Aller au contenu principal

Modèles d'e-mails

Logto fournit différents modèles pour personnaliser le contenu des e-mails, qui sont classés en fonction de leurs cas d'utilisation.

Il est fortement recommandé d'utiliser différents modèles dans différents scénarios. Sinon, les utilisateurs peuvent recevoir un contenu d'e-mail qui ne correspond pas à l'opération en cours, ce qui peut causer de la confusion. Si des modèles manquants ne sont pas configurés, cela peut entraîner des erreurs de flux qui dépendent de ce modèle et affecter le développement normal des affaires.

Types de modèles d'e-mails​

usageTypeScénarioVariables
SignInLes utilisateurs se connectent en utilisant leur e-mail et vérifient en entrant un code de vérification au lieu de saisir un mot de passe.code: string
application: ApplicationInfo
organization?: OrganizationInfo
RegisterLes utilisateurs créent un compte en utilisant leur e-mail et le vérifient en entrant un code de vérification envoyé par Logto à leur e-mail.code: string
application: ApplicationInfo
organization?: OrganizationInfo
ForgotPasswordSi les utilisateurs oublient leur mot de passe lors de la connexion, ils peuvent choisir de vérifier leur identité en utilisant l'e-mail qu'ils ont déjà vérifié avec Logto.code: string
application: ApplicationInfo
organization?: OrganizationInfo
GenericCe modèle peut être utilisé comme option de sauvegarde générale pour divers scénarios, y compris les tests de configurations de connecteurs, etc.code: string
OrganizationInvitationUtilisez ce modèle pour envoyer aux utilisateurs un lien d'invitation pour rejoindre l'organisation.link: string
organization: OrganizationInfo
inviter?: UserInfo
UserPermissionValidationLors de l'utilisation de l'application, il peut y avoir certaines opérations à haut risque ou des opérations avec un niveau de risque relativement élevé qui nécessitent une vérification utilisateur supplémentaire, telles que les virements bancaires, la suppression de ressources en cours d'utilisation et l'annulation d'abonnements. Le modèle UserPermissionValidation peut être utilisé pour définir le contenu du code de vérification par e-mail que les utilisateurs reçoivent dans ces situations.code: string
user: UserInfo
application?: ApplicationInfo
BindNewIdentifierLorsqu'un utilisateur modifie son profil, il peut lier une adresse e-mail à son compte actuel. Dans ce cas, le modèle BindNewIdentifier peut être utilisé pour personnaliser le contenu de l'e-mail de vérification.code: string
user: UserInfo
application?: ApplicationInfo

Variables des modèles d'e-mails​

Code​

Le code de vérification que les utilisateurs doivent entrer pour compléter le processus de vérification. Disponible dans les modèles SignIn, Register, ForgotPassword, Generic, UserPermissionValidation et BindNewIdentifier.

  • Les codes de vérification expirent dans 10 minutes. Nous ne prenons actuellement pas en charge la personnalisation du temps d'expiration des codes de vérification.
  • Un espace réservé {{code}} doit être réservé dans le modèle. Lors de l'envoi d'un code de vérification, un code généré aléatoirement remplacera cet espace réservé avant que nous envoyions l'e-mail aux utilisateurs.

ApplicationInfo​

Les informations publiques de l'application cliente avec laquelle les utilisateurs interagissent. Disponible dans les modèles SignIn, Register, ForgotPassword, UserPermissionValidation et BindNewIdentifier.

type ApplicationInfo = {
  id: string;
  name: string;
  displayName?: string;
  branding?: {
    logoUrl?: string;
    darkLogoUrl?: string;
    favicon?: string;
    darkFavicon?: string;
  };
};
  • Tous les champs d'informations d'application imbriqués peuvent être accessibles dans les modèles via la notation par points. Par exemple, {{application.name}} sera remplacé par le nom réel de l'application de votre configuration.
  • Si la variable racine application n'est pas fournie, l'espace réservé handlebars sera ignoré et non remplacé.
  • Si l'objet application fourni ne contient pas les champs requis ou si la valeur est indéfinie, l'espace réservé handlebars sera remplacé par une chaîne vide. Par exemple, {{application.foo.bar}} sera remplacé par ``.

OrganizationInfo​

Les informations publiques de l'organisation avec laquelle les utilisateurs interagissent.

type OrganizationInfo = {
  id: string;
  name: string;
  branding?: {
    logoUrl?: string;
    darkLogoUrl?: string;
    favicon?: string;
    darkFavicon?: string;
  };
};
  • Pour les modèles SignIn, Register et ForgotPassword, la variable organization est optionnelle. Disponible uniquement lorsque le paramètre organization_id est présent dans la requête d'autorisation. Voir Personnalisation spécifique à l'organisation pour plus de détails.
  • Pour le modèle OrganizationInvitation, la variable organization est obligatoire.

UserInfo​

Les informations publiques de l'utilisateur à qui l'e-mail est envoyé. Disponible dans les modèles UserPermissionValidation, BindNewIdentifier et OrganizationInvitation.

type UserInfo = {
  id: string;
  name?: string;
  username?: string;
  primaryEmail?: string;
  primaryPhone?: string;
  avatar?: string;
  profile?: Profile;
};
  • Consultez profil pour plus de détails sur le type Profile.
  • La variable user est obligatoire pour les modèles UserPermissionValidation et BindNewIdentifier.
  • La variable inviter est optionnelle pour le modèle OrganizationInvitation. Disponible uniquement lorsque le inviterId est fourni dans la requête d'invitation à l'organisation.

Exemples de modèles d'e-mails​

Vous pouvez utiliser les exemples de code de modèle d'e-mail fournis comme point de départ pour personnaliser votre interface utilisateur. Pour créer une interface utilisateur similaire à la suivante :

Exemple de modèle d'e-mail intégré

Étant donné que les modèles d'e-mails utilisés dans différents scénarios de Logto sont très similaires, la seule différence étant la description du scénario et de l'opération en cours.

Nous ne montrons pas le code HTML de tous les modèles en détail ici. Au lieu de cela, nous prenons uniquement le scénario connexion comme exemple. D'autres scénarios, tels que l'inscription et le mot de passe oublié, sont très similaires à l'exemple suivant.

Les utilisateurs peuvent se référer à ce modèle et l'ajuster en fonction de leur situation réelle.

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vérifiez votre e-mail pour vous connecter</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>Vérifiez votre e-mail pour vous connecter</h1>
          <p>
            Nous avons reçu une tentative de connexion avec le code suivant. Veuillez l'entrer sur
            la page que vous avez ouverte pour compléter le processus de connexion.
          </p>
          <div class="verification-code">000000</div>
          <p style="color: #747778;">
            Si vous n'avez pas tenté de vous connecter mais avez reçu cet e-mail, veuillez
            l'ignorer. Le code restera actif pendant 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> :
        La meilleure infrastructure d'identité pour les développeurs.
      </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;">
        Vous avez des questions ou besoin d'aide ?
        <a href="{{mailToUrl}}" style="color: #A9ACAC; text-decoration: underline;"
          >Contactez-nous</a
        >
      </p>
    </div>
  </body>
</html>

Vous pouvez ensuite échapper le code HTML ci-dessus et l'ajouter au champ "Template" du connecteur dans les configurations comme suit (en supposant l'utilisation du connecteur SendGrid) :

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

Localisation des modèles d'e-mails​

Modèles d'e-mails personnalisés pour différentes langues​

Logto prend en charge la création de modèles d'e-mails personnalisés pour différentes langues via Management API. Vous pouvez créer des modèles d'e-mails personnalisés pour différentes langues et types de modèles pour offrir une expérience localisée à vos utilisateurs.

type EmailTemplate = {
  languageTag: string;
  templateType: TemplateType;
  details: {
    subject: string;
    content: string;
    contentType?: 'text/html' | 'text/plain';
    replyTo?: string;
    sendFrom?: string;
  };
};
ChampDescription
subjectLe modèle de sujet de l'e-mail.
contentLe modèle de contenu de l'e-mail.
contentTypeCertains fournisseurs d'e-mails peuvent rendre les modèles d'e-mails différemment en fonction du type de contenu. (par exemple, Sendgrid, Mailgun). Utilisez ce champ pour spécifier le type de contenu du modèle d'e-mail.
replyToL'adresse e-mail qui recevra les réponses à l'e-mail. Vérifiez auprès de votre fournisseur d'e-mails si ce champ est pris en charge.
sendFromLe nom d'alias de l'expéditeur de l'e-mail. Vérifiez auprès de votre fournisseur d'e-mails si ce champ est pris en charge.

Une fois les modèles d'e-mails créés, Logto sélectionnera automatiquement le modèle d'e-mail approprié en fonction de la préférence linguistique de l'utilisateur en utilisant l'ordre de priorité suivant :

  1. Pour les Experience APIs côté client et les User Account APIs, la préférence linguistique est déterminée par l'en-tête Accept-Language dans la requête. Pour les Management APIs (tels que Organization Invitation), vous pouvez spécifier la préférence linguistique en incluant un paramètre locale dans le champ messagePayload du corps de la requête.
  2. Lorsqu'une préférence linguistique est détectée, Logto recherche un modèle d'e-mail personnalisé correspondant en utilisant les champs languageTag et templateType. Si un modèle existe pour la langue et le type de modèle spécifiés, Logto utilisera ce modèle pour rendre l'e-mail.
  3. Si aucune préférence linguistique n'est détectée, ou si aucun modèle personnalisé n'existe pour la langue et le type de modèle détectés, Logto utilisera la langue par défaut du locataire configurée dans l'Expérience de connexion. Consultez Langues localisées pour les détails de configuration.
  4. Si aucun modèle correspondant n'est trouvé, Logto utilisera le modèle d'e-mail par défaut défini dans la configuration du connecteur.

Connecteurs d'e-mails pris en charge :

Localisation des modèles d'e-mails côté fournisseur​

Pour les développeurs qui utilisent les connecteurs d'e-mails qui ont des modèles d'e-mails gérés par le fournisseur :

La langue préférée de l'utilisateur sera transmise au fournisseur en utilisant le paramètre locale dans le payload du modèle. Vous pouvez créer plusieurs modèles pour différentes langues dans la console du fournisseur et utiliser le paramètre locale pour spécifier la préférence linguistique.

FAQs​

Comment utiliser les services de modèles d'e-mails tiers si les modèles ne sont pas configurés dans Logto ?​

Vous pouvez ajouter un nouvel endpoint à votre propre service web pour envoyer des e-mails, puis utiliser le connecteur HTTP email de Logto pour appeler l'endpoint que vous maintenez.

Cela vous permet de gérer la logique des modèles d'e-mails sur votre propre serveur.

Existe-t-il un moyen d'utiliser l'e-mail Logto pour envoyer à nos utilisateurs un "e-mail de bienvenue" personnalisé ?​

Nous offrons la fonctionnalité Webhook. Vous pouvez implémenter votre propre endpoint API pour recevoir l'événement User.Created envoyé par le Webhook Logto, et ajouter une logique pour envoyer un e-mail de bienvenue personnalisé dans le gestionnaire de webhook.

Le connecteur d'e-mail Logto ne fournit que des notifications par e-mail pour les événements liés au flux d'authentification. Les e-mails de bienvenue sont une exigence commerciale et ne sont pas pris en charge nativement par le connecteur d'e-mail, mais cette fonctionnalité peut être réalisée via les Webhooks.

Maximiser la livraison des e-mails de vérification pour garantir l'accès des utilisateurs