이메일 템플릿

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;">
        Have questions or need help?
        <a href="{{mailToUrl}}" style="color: #A9ACAC; text-decoration: underline;">Contact us</a>
      </p>
    </div>
  </body>
</html>

그런 다음 위의 HTML 코드를 이스케이프하여 SendGrid 커넥터를 사용하는 경우 다음과 같이 구성의 "Template" 필드에 추가할 수 있습니다:

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

자주 묻는 질문

Logto에 템플릿이 구성되지 않은 경우 타사 이메일 템플릿 서비스를 사용하는 방법은 무엇입니까?

이메일을 보내기 위해 자체 웹 서비스에 새 엔드포인트를 추가한 다음, Logto HTTP 이메일 커넥터를 사용하여 유지 관리하는 엔드포인트를 호출할 수 있습니다.

이를 통해 이메일 템플릿 로직을 자체 서버에서 처리할 수 있습니다.

Logto 이메일을 사용하여 사용자에게 맞춤형 "환영 이메일"을 보낼 수 있는 방법이 있습니까?

우리는 Webhook 기능을 제공합니다. Logto Webhook이 보낸 User.Created 이벤트를 수신할 API 엔드포인트를 구현하고, Webhook 핸들러 내에서 맞춤형 환영 이메일을 보내는 로직을 추가할 수 있습니다.

Logto 이메일 커넥터는 인증 흐름과 관련된 이벤트에 대한 이메일 알림만 제공합니다. 환영 이메일은 비즈니스 요구 사항이며 이메일 커넥터에서 기본적으로 지원되지 않지만, 이 기능은 Webhooks를 통해 구현할 수 있습니다.

사용자 접근을 보장하기 위한 인증 이메일 전달 최대화

이메일 템플릿 유형​

이메일 템플릿 예시​

자주 묻는 질문​

Logto에 템플릿이 구성되지 않은 경우 타사 이메일 템플릿 서비스를 사용하는 방법은 무엇입니까?​

Logto 이메일을 사용하여 사용자에게 맞춤형 "환영 이메일"을 보낼 수 있는 방법이 있습니까?​

관련 리소스​

이메일 템플릿 유형

이메일 템플릿 예시

자주 묻는 질문

Logto에 템플릿이 구성되지 않은 경우 타사 이메일 템플릿 서비스를 사용하는 방법은 무엇입니까?

Logto 이메일을 사용하여 사용자에게 맞춤형 "환영 이메일"을 보낼 수 있는 방법이 있습니까?

관련 리소스