邮件模板

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

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

邮件模板类型

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

理解这些参数很重要：

验证码在 10 分钟后过期。我们目前不支持自定义验证码的过期时间。
模板中需要保留一个 {{code}} 占位符。在发送验证码时，一个随机生成的代码将替换此占位符，然后我们将邮件发送给用户。

邮件模板示例

你可以使用提供的邮件模板代码示例作为自定义 UI 的起点。要创建类似于以下的用户界面：

内置邮件模板示例

由于 Logto 在不同场景中使用的邮件模板非常相似，唯一的区别是当前场景和操作的描述。

我们在此不详细展示所有模板的 HTML 代码，而是仅以登录场景为例。其他场景，如注册和忘记密码，与以下示例非常相似。

用户可以参考此模板并根据实际情况进行调整。

<!doctype html>
<html lang="zh-CN">
  <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 功能。你可以实现自己的 API 端点以接收 Logto Webhook 发送的 User.Created 事件，并在 webhook 处理程序中添加逻辑以发送自定义的欢迎邮件。

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

最大化验证邮件的投递以保证用户访问

邮件模板类型​

邮件模板示例​

常见问题​

如果模板未在 Logto 中配置，如何使用第三方邮件模板服务？​

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

相关资源​

邮件模板类型

邮件模板示例

常见问题

如果模板未在 Logto 中配置，如何使用第三方邮件模板服务？

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

相关资源