電子郵件範本

Logto 提供不同的範本來自訂電子郵件內容，這些範本根據其使用情境進行分類。

強烈建議在不同情境中使用不同的範本。否則，使用者可能會收到與當前操作不符的電子郵件內容，造成混淆。如果有未配置的範本缺失，可能會導致依賴該範本的流程錯誤，影響業務的正常發展。

電子郵件範本類型

usageType	情境
SignIn	使用者使用電子郵件登入，並透過輸入驗證碼而非密碼進行驗證。
Register	使用者使用電子郵件創建帳戶，並透過輸入 Logto 發送到其電子郵件的驗證碼進行驗證。
ForgotPassword	如果使用者在登入時忘記密碼，他們可以選擇使用已在 Logto 驗證過的電子郵件來驗證其身分。
Generic	此範本可作為各種情境的通用備用選項，包括測試連接器配置等。
OrganizationInvitation	使用此範本向使用者發送邀請連結以加入組織。
UserPermissionValidation	在應用程式使用過程中，可能會有一些高風險操作或風險等級較高的操作需要額外的使用者驗證，例如銀行轉帳、刪除使用中的資源和取消會員資格。`UserPermissionValidation` 範本可用於定義使用者在這些情況下收到的電子郵件驗證碼的內容。
BindNewIdentifier	當使用者修改其個人資料時，他們可能會將電子郵件地址綁定到其當前帳戶。在這種情況下，`BindNewIdentifier` 範本可用於自訂驗證電子郵件的內容。

了解這些參數很重要：

驗證碼在 10 分鐘內過期。目前我們不支援自訂驗證碼的過期時間。
範本中需要保留一個 {{code}} 佔位符。發送驗證碼時，會用隨機生成的代碼替換此佔位符，然後將電子郵件發送給使用者。

電子郵件範本範例

你可以使用提供的電子郵件範本代碼範例作為自訂 UI 的起點。要創建類似於以下的使用者介面：

由於 Logto 在不同情境中使用的電子郵件範本非常相似，唯一的區別在於當前情境和操作的描述。

我們不在此詳細展示所有範本的 HTML 代碼，而是僅以登入情境為例。其他情境，如註冊和忘記密碼，與以下範例非常相似。

使用者可以參考此範本並根據實際情況進行調整。

<!doctype html>
<html lang="zh-TW">
  <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 中配置，如何使用第三方電子郵件範本服務？

你可以為自己的網路服務新增一個端點來發送電子郵件，然後使用 Logto HTTP 電子郵件連接器來調用你維護的端點。

這樣可以讓你在自己的伺服器上處理電子郵件範本邏輯。

是否可以使用 Logto 電子郵件發送自訂的「歡迎電子郵件」給我們的使用者？

我們提供 Webhook 功能。你可以實作自己的 API 端點來接收 Logto Webhook 發送的 User.Created 事件，並在 webhook 處理器中新增邏輯以發送自訂的歡迎電子郵件。

Logto 電子郵件連接器僅提供與驗證流程相關事件的電子郵件通知。歡迎電子郵件屬於業務需求，電子郵件連接器不原生支援此功能，但可以透過 Webhooks 實現。

最大化驗證電子郵件的傳遞以保證使用者存取

電子郵件範本類型​

電子郵件範本範例​

常見問題​

如果範本未在 Logto 中配置，如何使用第三方電子郵件範本服務？​

是否可以使用 Logto 電子郵件發送自訂的「歡迎電子郵件」給我們的使用者？​

相關資源​

電子郵件範本類型

電子郵件範本範例

常見問題

如果範本未在 Logto 中配置，如何使用第三方電子郵件範本服務？

是否可以使用 Logto 電子郵件發送自訂的「歡迎電子郵件」給我們的使用者？

相關資源