邮件模板

Logto 提供了不同的模板用于自定义邮件内容，这些模板根据其使用场景进行分类。

强烈建议在不同的场景中使用不同的模板。否则，用户可能会收到与当前操作不匹配的邮件内容，导致混淆。如果缺少未配置的模板，可能会导致依赖该模板的流程错误，影响业务的正常发展。

邮件模板类型

usageType	场景
SignIn	用户使用他们的电子邮件登录，并通过输入验证码而不是输入密码进行验证。
Register	用户使用他们的电子邮件创建一个账户，并通过输入 Logto 发送到他们电子邮件的验证码进行验证。
ForgotPassword	如果用户在登录时忘记密码，他们可以选择使用已经通过 Logto 验证的电子邮件来验证身份。
Generic	此模板可以用作各种场景的一般备选方案，包括测试连接器配置等。
OrganizationInvitation	使用此模板向用户发送邀请链接以加入组织。
UserPermissionValidation	在应用程序使用过程中，可能会有一些高风险操作或风险级别相对较高的操作需要额外的用户验证，例如银行转账、删除正在使用的资源和取消会员资格。`UserPermissionValidation` 模板可用于定义用户在这些情况下收到的电子邮件验证码的内容。
BindNewIdentifier	当用户修改其个人资料时，他们可能会将一个电子邮件地址绑定到他们当前的账户。在这种情况下，可以使用 `BindNewIdentifier` 模板来自定义验证邮件的内容。

备注

验证码在 10 分钟内有效。我们目前不支持自定义验证码的过期时间。

模板中需要保留一个 {{code}} 占位符。在发送验证码时，会用随机生成的代码替换此占位符，然后我们将邮件发送给用户。

邮件模板示例

你可以使用提供的邮件模板代码示例作为自定义 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 中未配置模板，如何使用第三方邮件模板服务？

你可以为自己的网络服务添加一个新端点来发送邮件，然后使用 Logto HTTP 邮件连接器调用你维护的端点。

这允许你在自己的服务器上处理邮件模板逻辑。

有没有办法使用 Logto 邮件向我们的用户发送自定义的 "欢迎邮件"？

我们提供 Webhook 功能。你可以实现自己的 API 端点来接收 Logto Webhook 发送的 User.Created 事件，并在 webhook 处理程序中添加逻辑以发送自定义的欢迎邮件。

Logto 邮件连接器仅提供与认证流程相关事件的邮件通知。欢迎邮件是一个业务需求，邮件连接器不原生支持此功能，但可以通过 Webhook 实现此功能。

邮件模板类型​

邮件模板 示例​

常见问题​

邮件模板类型

邮件模板示例

常见问题