E-Mail-Vorlagen

Logto bietet verschiedene Vorlagen zur Anpassung von E-Mail-Inhalten, die basierend auf ihren Anwendungsfällen kategorisiert sind.

Es wird dringend empfohlen, in unterschiedlichen Szenarien unterschiedliche Vorlagen zu verwenden. Andernfalls könnten Benutzer E-Mail-Inhalte erhalten, die nicht zur aktuellen Operation passen, was zu Verwirrung führen kann. Wenn Vorlagen fehlen, die nicht konfiguriert sind, kann dies zu Fehlern im Ablauf führen, die auf dieser Vorlage basieren, und die normale Geschäftsentwicklung beeinträchtigen.

E-Mail-Vorlagentypen

usageType	Szenario	Variablen
SignIn	Benutzer melden sich mit ihrer E-Mail an und verifizieren sich, indem sie einen Bestätigungscode eingeben, anstatt ein Passwort einzugeben.	code: string application: ApplicationInfo organization?: OrganizationInfo
Register	Benutzer erstellen ein Konto mit ihrer E-Mail und verifizieren es, indem sie einen von Logto an ihre E-Mail gesendeten Bestätigungscode eingeben.	code: string application: ApplicationInfo organization?: OrganizationInfo
ForgotPassword	Wenn Benutzer ihr Passwort während der Anmeldung vergessen, können sie wählen, ihre Identität mit der E-Mail zu verifizieren, die sie bereits mit Logto verifiziert haben.	code: string application: ApplicationInfo organization?: OrganizationInfo
Generic	Diese Vorlage kann als allgemeine Backup-Option für verschiedene Szenarien verwendet werden, einschließlich der Testkonfiguration von Connectors und so weiter.	code: string
OrganizationInvitation	Verwende diese Vorlage, um Benutzern einen Einladungslink zu senden, um der Organisation beizutreten.	link: string organization: OrganizationInfo inviter?: UserInfo
UserPermissionValidation	Während der Nutzung der App kann es einige risikoreiche Operationen oder Operationen mit einem relativ hohen Risikoniveau geben, die eine zusätzliche Benutzerverifizierung erfordern, wie z. B. Banküberweisungen, das Löschen von Ressourcen in Gebrauch und das Kündigen von Mitgliedschaften. Die UserPermissionValidation-Vorlage kann verwendet werden, um den Inhalt des E-Mail-Bestätigungscodes zu definieren, den Benutzer in diesen Situationen erhalten.	code: string user: UserInfo application?: ApplicationInfo
BindNewIdentifier	Wenn ein Benutzer sein Profil ändert, kann er eine E-Mail-Adresse an sein aktuelles Konto binden. In diesem Fall kann die BindNewIdentifier-Vorlage verwendet werden, um den Inhalt der Bestätigungs-E-Mail anzupassen.	code: string user: UserInfo application?: ApplicationInfo

E-Mail-Vorlagenvariablen

Code

Der Bestätigungscode, den Benutzer eingeben müssen, um den Verifizierungsprozess abzuschließen. Verfügbar in den Vorlagen SignIn, Register, ForgotPassword, Generic, UserPermissionValidation und BindNewIdentifier.

• Bestätigungscodes verfallen nach 10 Minuten. Wir unterstützen derzeit keine Anpassung der Ablaufzeit von Bestätigungscodes.
• Ein {{code}}-Platzhalter muss in der Vorlage reserviert werden. Beim Senden eines Bestätigungscodes wird ein zufällig generierter Code diesen Platzhalter ersetzen, bevor wir die E-Mail an Benutzer senden.

ApplicationInfo

Die öffentlichen Informationen der Client-Anwendung, mit der Benutzer interagieren. Verfügbar in den Vorlagen SignIn, Register, ForgotPassword, UserPermissionValidation und BindNewIdentifier.

type ApplicationInfo = {
  id: string;
  name: string;
  displayName?: string;
  branding?: {
    logoUrl?: string;
    darkLogoUrl?: string;
    favicon?: string;
    darkFavicon?: string;
  };
};

• Alle verschachtelten Anwendungsinformationsfelder können in Vorlagen über Punktnotation zugegriffen werden. Zum Beispiel wird {{application.name}} mit dem tatsächlichen Anwendungsnamen aus deiner Konfiguration ersetzt.
• Wenn die root application-Variable nicht bereitgestellt wird, wird der Handlebars-Platzhalter ignoriert und nicht ersetzt.
• Wenn das bereitgestellte application-Objekt die erforderlichen Felder nicht enthält oder der Wert undefiniert ist, wird der Handlebars-Platzhalter durch einen leeren String ersetzt. Z. B. wird {{application.foo.bar}} durch `` ersetzt.

OrganizationInfo

Die öffentlichen Informationen der Organisation, mit der Benutzer interagieren.

type OrganizationInfo = {
  id: string;
  name: string;
  branding?: {
    logoUrl?: string;
    darkLogoUrl?: string;
    favicon?: string;
    darkFavicon?: string;
  };
};

• Für die Vorlagen SignIn, Register und ForgotPassword ist die organization-Variable optional. Nur verfügbar, wenn der organization_id-Parameter in der Autorisierungsanfrage vorhanden ist. Siehe Organisationsspezifisches Branding für weitere Details.
• Für die Vorlage OrganizationInvitation ist die organization-Variable obligatorisch.

UserInfo

Die öffentlichen Informationen des Benutzers, an den die E-Mail gesendet wird. Verfügbar in den Vorlagen UserPermissionValidation, BindNewIdentifier und OrganizationInvitation.

type UserInfo = {
  id: string;
  name?: string;
  username?: string;
  primaryEmail?: string;
  primaryPhone?: string;
  avatar?: string;
  profile?: Profile;
};

• Siehe Profil für weitere Details zum Profile-Typ.
• Die user-Variable ist obligatorisch für die Vorlagen UserPermissionValidation und BindNewIdentifier.
• Die inviter-Variable ist optional für die Vorlage OrganizationInvitation. Nur verfügbar, wenn die inviterId in der Organisationseinladung bereitgestellt wird.

Beispiele für E-Mail-Vorlagen

Du kannst die bereitgestellten E-Mail-Vorlagen-Codebeispiele als Ausgangspunkt für die Anpassung deiner Benutzeroberfläche verwenden. Um eine Benutzeroberfläche ähnlich der folgenden zu erstellen:

Da die in verschiedenen Szenarien von Logto verwendeten E-Mail-Vorlagen sehr ähnlich sind, wobei der einzige Unterschied die Beschreibung des aktuellen Szenarios und der Operation ist.

Wir zeigen hier nicht den HTML-Code aller Vorlagen im Detail. Stattdessen nehmen wir nur das Anmelde-Szenario als Beispiel. Andere Szenarien, wie Anmeldung und Passwort vergessen, sind dem folgenden Beispiel sehr ähnlich.

Benutzer können sich auf diese Vorlage beziehen und sie entsprechend ihrer tatsächlichen Situation anpassen.

<!doctype html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Verifiziere deine E-Mail, um dich anzumelden</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>Verifiziere deine E-Mail, um dich anzumelden</h1>
          <p>
            Wir haben einen Anmeldeversuch mit dem folgenden Code erhalten. Bitte gib ihn auf der
            Seite ein, die du geöffnet hast, um den Anmeldeprozess abzuschließen.
          </p>
          <div class="verification-code">000000</div>
          <p style="color: #747778;">
            Wenn du nicht versucht hast, dich anzumelden, diese E-Mail jedoch erhalten hast,
            ignoriere sie bitte. Der Code bleibt 10 Minuten lang aktiv.
          </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>:
        Die bessere Identitätsinfrastruktur für Entwickler.
      </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;">
        Hast du Fragen oder benötigst Hilfe?
        <a href="{{mailToUrl}}" style="color: #A9ACAC; text-decoration: underline;"
          >Kontaktiere uns</a
        >
      </p>
    </div>
  </body>
</html>

Du kannst dann den obigen HTML-Code escapen und ihn dem "Template"-Feld des Connectors in den Konfigurationen wie folgt hinzufügen (angenommen, du verwendest den SendGrid-Connector):

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

Lokalisierung von E-Mail-Vorlagen

Benutzerdefinierte E-Mail-Vorlagen für verschiedene Sprachen

Logto unterstützt die Erstellung benutzerdefinierter E-Mail-Vorlagen für verschiedene Sprachen über die Management API. Du kannst benutzerdefinierte E-Mail-Vorlagen für verschiedene Sprachen und Vorlagentypen erstellen, um deinen Benutzern ein lokalisierteres Erlebnis zu bieten.

type EmailTemplate = {
  languageTag: string;
  templateType: TemplateType;
  details: {
    subject: string;
    content: string;
    contentType?: 'text/html' | 'text/plain';
    replyTo?: string;
    sendFrom?: string;
  };
};

Feld	Beschreibung
subject	Die Betreffvorlage der E-Mail.
content	Die Inhaltsvorlage der E-Mail.
contentType	Einige E-Mail-Anbieter rendern E-Mail-Vorlagen möglicherweise unterschiedlich basierend auf dem Inhaltstyp. (z. B. Sendgrid, Mailgun). Verwende dieses Feld, um den Inhaltstyp der E-Mail-Vorlage anzugeben.
replyTo	Die E-Mail-Adresse, die Antworten auf die E-Mail erhält. Überprüfe bei deinem E-Mail-Anbieter, ob dieses Feld unterstützt wird.
sendFrom	Der Namensalias des E-Mail-Absenders. Überprüfe bei deinem E-Mail-Anbieter, ob dieses Feld unterstützt wird.

Sobald die E-Mail-Vorlagen erstellt sind, wählt Logto automatisch die passende E-Mail-Vorlage basierend auf der Sprachpräferenz des Benutzers in der folgenden Prioritätsreihenfolge aus:

1. Für clientseitige Experience APIs und User Account APIs wird die Sprachpräferenz durch den Accept-Language-Header in der Anfrage bestimmt. Für Management APIs (wie Organization Invitation) kannst du die Sprachpräferenz angeben, indem du einen locale-Parameter im messagePayload-Feld des Anfragekörpers einfügst.
2. Wenn eine Sprachpräferenz erkannt wird, sucht Logto nach einer passenden benutzerdefinierten E-Mail-Vorlage unter Verwendung der Felder languageTag und templateType. Wenn eine Vorlage für die angegebene Sprache und den Vorlagentyp existiert, verwendet Logto diese Vorlage, um die E-Mail zu rendern.
3. Wenn keine Sprachpräferenz erkannt wird oder keine benutzerdefinierte Vorlage für die erkannte Sprache und den Vorlagentyp existiert, verwendet Logto die Standardsprache des Mandanten, die in der Anmeldeerfahrung konfiguriert ist. Siehe Lokalisierte Sprachen für Konfigurationsdetails.
4. Wenn keine passende Vorlage gefunden wird, verwendet Logto die Standard-E-Mail-Vorlage, die in der Connector-Konfiguration definiert ist.

Unterstützte E-Mail-Connectors:

• Aliyun Direct Mail
• Amazon Direct Mail
• Mailgun
• SendGrid
• SMTP

Lokalisierung von E-Mail-Vorlagen auf Anbieterseite

Für Entwickler, die die E-Mail-Connectors verwenden, bei denen die E-Mail-Vorlage vom Anbieter verwaltet wird:

• HTTP Email
• Postmark

Die vom Benutzer bevorzugte Sprache wird dem Anbieter unter Verwendung des locale-Parameters im Vorlagen-Payload übergeben. Du kannst mehrere Vorlagen für verschiedene Sprachen in der Konsole des Anbieters erstellen und den locale-Parameter verwenden, um die Sprachpräferenz anzugeben.

FAQs

Wie kann man Drittanbieter-E-Mail-Vorlagendienste verwenden, wenn Vorlagen nicht in Logto konfiguriert sind?

Du kannst einen neuen Endpunkt zu deinem eigenen Webdienst hinzufügen, um E-Mails zu senden, und dann den Logto HTTP E-Mail-Connector verwenden, um den von dir verwalteten Endpunkt aufzurufen.

Dies ermöglicht es dir, die Logik der E-Mail-Vorlagen auf deinem eigenen Server zu verwalten.

Gibt es eine Möglichkeit, Logto-E-Mail zu verwenden, um unseren Benutzern eine angepasste "Willkommens-E-Mail" zu senden?

Wir bieten die Webhook-Funktionalität an. Du kannst deinen eigenen API-Endpunkt implementieren, um das User.Created-Ereignis zu empfangen, das vom Logto Webhook gesendet wird, und Logik hinzufügen, um eine angepasste Willkommens-E-Mail innerhalb des Webhook-Handlers zu senden.

Der Logto-E-Mail-Connector bietet nur E-Mail-Benachrichtigungen für Ereignisse im Zusammenhang mit dem Authentifizierungsablauf. Willkommens-E-Mails sind eine geschäftliche Anforderung und werden vom E-Mail-Connector nicht nativ unterstützt, aber diese Funktionalität kann durch Webhooks erreicht werden.

Verwandte Ressourcen

Maximieren der Zustellung von Bestätigungs-E-Mails, um den Benutzerzugang zu gewährleisten