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

メールテンプレート

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

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

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

usageTypeシナリオVariables
SignInユーザーがメールを使用してサインインし、パスワードを入力する代わりに認証コードを入力して確認します。code: string
application: ApplicationInfo
organization?: OrganizationInfo
Registerユーザーがメールを使用してアカウントを作成し、Logto から送信された認証コードを入力して確認します。code: string
application: ApplicationInfo
organization?: OrganizationInfo
ForgotPasswordユーザーがログイン中にパスワードを忘れた場合、Logto で既に確認済みのメールを使用して本人確認を行うことができます。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 型の詳細については、プロフィール を確認してください。
  • UserPermissionValidation と BindNewIdentifier テンプレートでは、user 変数は必須です。
  • OrganizationInvitation テンプレートでは、inviter 変数はオプションです。組織招待リクエストで inviterId が提供されている場合にのみ利用可能です。

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

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

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

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

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

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Verify your email to sign in</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>Verify your email to sign in</h1>
          <p>
            We have received a sign in attempt with the following code. Please enter it in the page
            you opened to complete the sign in process.
          </p>
          <div class="verification-code">000000</div>
          <p style="color: #747778;">
            If you did not attempt to sign in but received this email, please ignore it. The code
            will remain active for 10 minutes.
          </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>:
        The better identity infrastructure for developers.
      </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 は、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. クライアントサイドの 体験 API と ユーザーアカウント API では、リクエストの Accept-Language ヘッダーによって言語設定が決定されます。Management API（例： 組織招待）では、リクエストボディの messagePayload フィールドに locale パラメーターを含めることで言語設定を指定できます。
  2. 言語設定が検出されると、Logto は languageTag と templateType フィールドを使用して一致するカスタムメールテンプレートを探します。指定された言語とテンプレートタイプに対するテンプレートが存在する場合、Logto はそのテンプレートを使用してメールをレンダリングします。
  3. 言語設定が検出されない場合、または検出された言語とテンプレートタイプに対するカスタムテンプレートが存在しない場合、Logto はサインイン体験で設定されたテナントのデフォルト言語を使用します。設定の詳細については、ローカライズされた言語 を確認してください。
  4. 一致するテンプレートが見つからない場合、Logto はコネクター設定で定義されたデフォルトのメールテンプレートを使用します。

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

プロバイダー側のメールテンプレートのローカライズ​

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

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

よくある質問​

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

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

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

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

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

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

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