メールテンプレート

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

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

メールテンプレートのカスタマイズオプション

Logto は、メールテンプレート管理のために 3 つの異なるアプローチを提供しています：

1. Logto でテンプレートをカスタマイズする

   • コネクター:
     • SMTP
     • SendGrid
     • Mailgun
     • AWS Direct Mail
     • Aliyun Direct Mail
   • 機能:
     • ✅ 多様な変数をテンプレートに柔軟に挿入
     • ✅ Management API を介してカスタム多言語テンプレートを作成
     • ✅ Logto 内での完全なテンプレート編集

2. プロバイダープラットフォームでテンプレートをカスタマイズする

   • コネクター:
     • Postmark
     • HTTP Email
   • 機能:
     • ✅ プロバイダープラットフォームに変数を渡す
     • ✅ ローカリゼーションのために locale パラメーターをプロバイダープラットフォームに渡す
     • ✅ プロバイダーのダッシュボード内での完全なテンプレート編集 (Logto Management API を使用)

3. 組み込みテンプレート (カスタマイズ不可)

   • コネクター:
     • Logto 組み込みメールサービス
   • 機能:
     • ✅ ネイティブ変数サポート
     • ❌ 多言語テンプレート (近日公開)
     • ❌ テンプレート / UI の変更は無効

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

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

メールテンプレートの変数

Code

ユーザーが認証プロセスを完了するために入力する必要がある認証コードです。SignIn、Register、ForgotPassword、Generic、UserPermissionValidation、および BindNewIdentifier テンプレートで利用可能です。

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

ApplicationInfo

ユーザーが操作しているクライアントアプリケーションの公開情報です。SignIn、Register、ForgotPassword、UserPermissionValidation、および BindNewIdentifier テンプレートで利用可能です。

type ApplicationInfo = {
  id: string;
  name: string;
  displayName?: string;
  branding?: {
    logoUrl?: string;
    darkLogoUrl?: string;
    favicon?: string;
    darkFavicon?: string;
  };
};

• すべてのネストされたアプリケーション情報フィールドは、テンプレート内でドット表記を使用してアクセスできます。たとえば、{{application.name}} は設定から実際のアプリケーション名に置き換えられます。
• ルート application 変数が提供されていない場合、ハンドルバーのプレースホルダーは無視され、置き換えられません。
• 提供された application オブジェクトに必要なフィールドが含まれていない場合、または値が未定義の場合、ハンドルバーのプレースホルダーは空の文字列に置き換えられます。例：{{application.foo.bar}} は `` に置き換えられます。

OrganizationInfo

ユーザーが操作している組織の公開情報です。

type OrganizationInfo = {
  id: string;
  name: string;
  branding?: {
    logoUrl?: string;
    darkLogoUrl?: string;
    favicon?: string;
    darkFavicon?: string;
  };
};

• SignIn、Register、および ForgotPassword テンプレートでは、organization 変数はオプションです。認可リクエストに organization_id パラメーターが存在する場合にのみ利用可能です。詳細は 組織固有のブランディング を参照してください。
• OrganizationInvitation テンプレートでは、organization 変数は必須です。

UserInfo

メールが送信されるユーザーの公開情報です。UserPermissionValidation、BindNewIdentifier、および OrganizationInvitation テンプレートで利用可能です。

type UserInfo = {
  id: string;
  name?: string;
  username?: string;
  primaryEmail?: string;
  primaryPhone?: string;
  avatar?: string;
  profile?: Profile;
};

• Profile タイプの詳細については、プロファイル を確認してください。
• user 変数は UserPermissionValidation および BindNewIdentifier テンプレートで必須です。
• inviter 変数は OrganizationInvitation テンプレートでオプションです。組織招待リクエストで inviterId が提供されている場合にのみ利用可能です。

メールテンプレートの例

提供されたメールテンプレートコードの例を使用して、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 コードをエスケープして、設定のコネクター「テンプレート」フィールドに次のように追加できます（SendGrid コネクターを使用していると仮定）：

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

メールテンプレートのローカリゼーション

異なる言語のカスタムメールテンプレート

Logto は、Management API を介して異なる言語のカスタムメールテンプレートを作成することをサポートしています。異なる言語とテンプレートタイプのカスタムメールテンプレートを作成して、ユーザーにローカライズされた体験を提供できます。

type EmailTemplate = {
  languageTag: string;
  templateType: TemplateType;
  details: {
    subject: string;
    content: string;
    contentType?: 'text/html' | 'text/plain';
    replyTo?: string;
    sendFrom?: string;
  };
};

フィールド	説明
subject	メールの件名テンプレート。
content	メールのコンテンツテンプレート。
contentType	一部のメールプロバイダーは、コンテンツタイプに基づいてメールテンプレートを異なる方法でレンダリングする場合があります（例：Sendgrid、Mailgun）。このフィールドを使用してメールテンプレートのコンテンツタイプを指定します。
replyTo	メールの返信を受け取るメールアドレス。このフィールドがサポートされているかどうかは、メールプロバイダーに確認してください。
sendFrom	メール送信者の名前エイリアス。このフィールドがサポートされているかどうかは、メールプロバイダーに確認してください。

メールテンプレートが作成されると、Logto はユーザーの言語設定に基づいて適切なメールテンプレートを自動的に選択します。優先順位は次の通りです：

1. クライアントサイドの Experience API および User Account API では、リクエストの Accept-Language ヘッダーによって言語設定が決定されます。Management API（例： Organization Invitation）では、リクエストボディの messagePayload フィールドに locale パラメーターを含めることで言語設定を指定できます。
2. 言語設定が検出されると、Logto は languageTag および templateType フィールドを使用して一致するカスタムメールテンプレートを探します。指定された言語とテンプレートタイプに対するテンプレートが存在する場合、Logto はそのテンプレートを使用してメールをレンダリングします。
3. 言語設定が検出されない場合、または検出された言語とテンプレートタイプに対するカスタムテンプレートが存在しない場合、Logto はサインイン体験で設定されたテナントのデフォルト言語を使用します。設定の詳細については、ローカライズされた言語 を確認してください。
4. 一致するテンプレートが見つからない場合、Logto はコネクター設定で定義されたデフォルトのメールテンプレートを使用します。

サポートされているメールコネクター：

• Aliyun Direct Mail
• Amazon Direct Mail
• Mailgun
• SendGrid
• SMTP

プロバイダー側のメールテンプレートのローカリゼーション

プロバイダーによって管理されるメールテンプレートを持つメールコネクターを使用する開発者向け：

• HTTP Email
• Postmark

ユーザーの優先言語は、テンプレートペイロードの locale パラメーターを使用してプロバイダーに渡されます。プロバイダーのコンソールで異なる言語の複数のテンプレートを作成し、locale パラメーターを使用して言語設定を指定できます。

よくある質問

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

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

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

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

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

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

関連リソース

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