メインコンテンツまでスキップ

メールテンプレート

Logto は、メールコンテンツをカスタマイズするためのさまざまなテンプレートを提供しており、使用ケースに基づいて分類されています。

異なるシナリオで異なるテンプレートを使用することを強くお勧めします。そうしないと、ユーザーが現在の操作と一致しないメールコンテンツを受け取り、混乱を招く可能性があります。設定されていないテンプレートが欠落している場合、そのテンプレートに依存するフローエラーが発生し、ビジネスの正常な進行に影響を与える可能性があります。

メールテンプレートの種類​

usageTypeシナリオ
SignInユーザーがメールを使用してサインインし、パスワードを入力する代わりに認証コードを入力して確認します。
Registerユーザーがメールを使用してアカウントを作成し、Logto から送信された認証コードを入力して確認します。
ForgotPasswordユーザーがログイン中にパスワードを忘れた場合、Logto で既に確認済みのメールを使用して本人確認を行うことができます。
Genericこのテンプレートは、コネクター設定のテストなど、さまざまなシナリオの一般的なバックアップオプションとして使用できます。
OrganizationInvitationこのテンプレートを使用して、ユーザーに組織に参加するための招待リンクを送信します。
UserPermissionValidationアプリ使用中に、銀行振込、使用中のリソースの削除、メンバーシップのキャンセルなど、追加のユーザー確認が必要な高リスク操作や比較的リスクの高い操作が発生する場合があります。UserPermissionValidation テンプレートを使用して、これらの状況でユーザーが受け取るメール認証コードの内容を定義できます。
BindNewIdentifierユーザーがプロフィールを変更する際に、現在のアカウントにメールアドレスをバインドする場合があります。この場合、BindNewIdentifier テンプレートを使用して認証メールの内容をカスタマイズできます。

これらのパラメーターを理解することが重要です：

  • 認証コードは 10 分で期限切れになります。現在、認証コードの有効期限のカスタマイズはサポートしていません。
  • テンプレートには {{code}} プレースホルダーを残しておく必要があります。認証コードを送信する際に、ランダムに生成されたコードがこのプレースホルダーを置き換え、ユーザーにメールを送信します。

メールテンプレートの例​

提供されたメールテンプレートコードの例を使用して、UI をカスタマイズするための出発点とすることができます。次のようなユーザーインターフェースを作成するには：

組み込みメールテンプレートのサンプル

Logto の異なるシナリオで使用されるメールテンプレートは非常に似ており、唯一の違いは現在のシナリオと操作の説明です。

ここでは、すべてのテンプレートの HTML コードを詳細に示すことはせず、サインイン シナリオのみを例として取り上げます。他のシナリオ、例えばサインアップやパスワード忘れは、以下のサンプルと非常に似ています。

ユーザーはこのテンプレートを参照し、実際の状況に応じて調整できます。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>サインインのためにメールを確認してください</title>
    <style>
      .auth-service-by:hover .mini-logo {
        display: none !important;
      }
      .auth-service-by:hover .mini-logo-color {
        display: block !important;
      }
      body {
        font-family:
          'SF Pro Text',
          -apple-system,
          system-ui,
          BlinkMacSystemFont,
          'Segoe UI',
          Roboto,
          Arial,
          sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-smooth: always;
        background-color: #fff;
        color: #191c1d;
        max-width: 640px;
        padding: 32px 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
      }
      h1 {
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
        margin-top: 32px;
      }
      .verification-code {
        margin: 20px 0;
        background: #eff1f1;
        border-radius: 12px;
        padding: 36px;
        font-size: 32px;
        font-weight: 600;
        line-height: 40px;
      }
      .footer {
        text-align: center;
        color: #a9acac;
        margin-top: 48px;
      }
    </style>
  </head>
  <body>
    <div style="max-width: 698px; border-radius: 16px; border: 1px solid #E0E3E3;">
      <div style="padding: 0 24px;">
        <center>
          <img src="{{logoUrl}}" alt="Logo" width="auto" height="40" />
          <h1>サインインのためにメールを確認してください</h1>
          <p>
            次のコードでサインインの試行を受け取りました。サインインプロセスを完了するために開いたページに入力してください。
          </p>
          <div class="verification-code">000000</div>
          <p style="color: #747778;">
            サインインを試みていないのにこのメールを受け取った場合は、無視してください。コードは 10
            分間有効です。
          </p>
          <hr style="margin: 64px 0 24px; max-width: 420px;" />
          <p style="color: #747778; margin: 16px 0 0;">{{companyInfo}}</p>
        </center>
      </div>
    </div>
    <div class="footer">
      <hr />
      <p style="font-size: 14px; line-height: 20px; margin: 20px 0;">
        <a href="https://logto.io" style="color: #A9ACAC; text-decoration: underline;">Logto</a>:
        開発者のためのより良いアイデンティティインフラストラクチャ。
      </p>
      <table style="margin: 0 auto; width: auto; border-spacing: 0;">
        <tbody>
          <tr>
            <td style="vertical-align: middle;">
              <a href="{{discordServerUrl}}" style="display: block; margin: 0 12px;">
                <img src="{{discordLogoUrl}}" style="width: 20px;" />
              </a>
            </td>
            <td style="vertical-align: middle;">
              <a href="{{githubUrl}}" style="display: block; margin: 0 12px;">
                <img src="{{githubLogoUrl}}" style="width: 20px;" />
              </a>
            </td>
            <td style="vertical-align: middle;">
              <a href="{{twitterUrl}}" style="display: block; margin: 0 12px;">
                <img src="{{twitterLogoUrl}}" style="width: 20px;" />
              </a>
            </td>
            <td style="vertical-align: middle;">
              <a href="{{mailToUrl}}" style="display: block; margin: 0 12px;">
                <img src="{{emailIconUrl}}" style="width: 20px;" />
              </a>
            </td>
          </tr>
        </tbody>
      </table>
      <p style="font-size: 12px; line-height: 16px;">
        © Silverhand, Inc., 2810 North Church Street, Wilmington, DE 19802
      </p>
      <p style="color: #A9ACAC; font-size: 12px; line-height: 16px;">
        質問がありますか？またはサポートが必要ですか？
        <a href="{{mailToUrl}}" style="color: #A9ACAC; text-decoration: underline;">お問い合わせ</a>
      </p>
    </div>
  </body>
</html>

その後、上記の HTML コードをエスケープして、設定のコネクター「Template」フィールドに次のように追加できます（SendGrid コネクターを使用していると仮定します）：

{
  "subject": "<sign-in-template-subject>",
  "content": "<table cellpadding=\"0\" cellspacing=\"0\" ...",
  "usageType": "SignIn",
  "type": "text/html"
}

よくある質問​

Logto にテンプレートが設定されていない場合、サードパーティのメールテンプレートサービスを使用する方法はありますか？​

独自の Web サービスに新しいエンドポイントを追加してメールを送信し、Logto HTTP メールコネクター を使用して管理しているエンドポイントを呼び出すことができます。

これにより、独自のサーバーでメールテンプレートロジックを処理できます。

Logto のメールを使用して、カスタマイズされた「ウェルカムメール」をユーザーに送信する方法はありますか？​

Webhook 機能を提供しています。Logto Webhook によって送信される User.Created イベントを受信するための独自の API エンドポイントを実装し、Webhook ハンドラー内でカスタマイズされたウェルカムメールを送信するロジックを追加できます。

Logto メールコネクターは、認証 (Authentication) フローに関連するイベントのメール通知のみを提供します。ウェルカムメールはビジネス要件であり、メールコネクターではネイティブにサポートされていませんが、この機能は Webhook を通じて実現できます。

ユーザーアクセスを保証するために認証メールの配信を最大化する