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 Entwicklung des Geschäfts beeinträchtigen.

Anpassungsoptionen für E-Mail-Vorlagen

Logto bietet drei verschiedene Ansätze für das Management von E-Mail-Vorlagen:

1. Vorlagen in Logto anpassen

   • Connectors:
     • SMTP
     • SendGrid
     • Mailgun
     • AWS Direct Mail
     • Aliyun Direct Mail
   • Fähigkeiten:
     • ✅ Flexibles Einfügen verschiedener Variablen in Vorlagen
     • ✅ Erstellen benutzerdefinierter mehrsprachiger Vorlagen über Management APIs
     • ✅ Vollständige Bearbeitung von Vorlagen innerhalb von Logto

2. Vorlagen auf der Anbieterplattform anpassen

   • Connectors:
     • Postmark
     • HTTP Email
   • Fähigkeiten:
     • ✅ Variablen an die Anbieterplattform übergeben
     • ✅ locale-Parameter zur Anbieterplattform für Lokalisierung übergeben
     • ✅ Vollständige Bearbeitung von Vorlagen im Dashboard des Anbieters (Verwendung von Logto Management APIs)

3. Vorgefertigte Vorlagen (nicht anpassbar)

   • Connector:
     • Logto Built-in Email Service
   • Fähigkeiten:
     • ✅ Native Unterstützung von Variablen
     • ❌ Mehrsprachige Vorlagen (Demnächst verfügbar)
     • ❌ Vorlagen- / UI-Änderungen deaktiviert

Arten von E-Mail-Vorlagen

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 beim Anmelden vergessen, können sie wählen, ihre Identität zuerst per E-Mail zu verifizieren, um das Passwort zurückzusetzen.	code: string application: ApplicationInfo organization?: OrganizationInfo
Generic	Diese Vorlage kann als allgemeine Backup-Option für verschiedene Szenarien verwendet werden, einschließlich Testen von Connector-Konfigurationen, Verifizieren oder Verknüpfen von E-Mails nach der Anmeldung 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 zusätzliche Benutzerverifizierung erfordern, wie z. B. Banküberweisungen, Löschen von Ressourcen in Gebrauch und Kündigung 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

Variablen für E-Mail-Vorlagen

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 durch Punktnotation aufgerufen werden. Zum Beispiel wird {{application.name}} durch den tatsächlichen Anwendungsnamen aus deiner Konfiguration ersetzt.
• Wenn die Wurzelvariable application 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 Variable organization optional. Nur verfügbar, wenn der Parameter organization_id in der Autorisierungsanfrage vorhanden ist. Siehe Organisationsspezifisches Branding für weitere Details.
• Für die Vorlage OrganizationInvitation ist die Variable organization 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 Variable user ist obligatorisch für die Vorlagen UserPermissionValidation und BindNewIdentifier.
• Die Variable inviter 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, aber diese E-Mail 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 du 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 wie folgt in das "Template"-Feld des Connectors in den Konfigurationen einfü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 das Erstellen 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 lokalisiertes 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 können E-Mail-Vorlagen basierend auf dem Inhaltstyp unterschiedlich rendern. (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 Name 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 standardmäßige Sprache 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 bevorzugte Sprache des Benutzers wird dem Anbieter über den locale-Parameter 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-Vorlagen-Dienste nutzen, 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 nicht nativ vom E-Mail-Connector unterstützt, aber diese Funktionalität kann durch Webhooks erreicht werden.

Verwandte Ressourcen

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