Saltar al contenido principal

Plantillas de correo electrónico

Logto proporciona diferentes plantillas para personalizar el contenido de los correos electrónicos, que se categorizan según sus casos de uso.

Se recomienda encarecidamente que utilices diferentes plantillas en diferentes escenarios. De lo contrario, los usuarios pueden recibir contenido de correo electrónico que no coincide con la operación actual, causando confusión. Si faltan plantillas que no están configuradas, puede causar errores en los flujos que dependen de esa plantilla y afectar el desarrollo normal del negocio.

Tipos de plantillas de correo electrónico​

usageTypeEscenarioVariables
SignInLos usuarios inician sesión usando su correo electrónico y verifican ingresando un código de verificación en lugar de ingresar una contraseña.code: string
application: ApplicationInfo
organization?: OrganizationInfo
RegisterLos usuarios crean una cuenta usando su correo electrónico y la verifican ingresando un código de verificación enviado por Logto a su correo electrónico.code: string
application: ApplicationInfo
organization?: OrganizationInfo
ForgotPasswordSi los usuarios olvidan su contraseña durante el inicio de sesión, pueden optar por verificar su identidad usando el correo electrónico que ya han verificado con Logto.code: string
application: ApplicationInfo
organization?: OrganizationInfo
GenericEsta plantilla se puede usar como una opción de respaldo general para varios escenarios, incluidas las pruebas de configuraciones de conectores, etc.code: string
OrganizationInvitationUsa esta plantilla para enviar a los usuarios un enlace de invitación para unirse a la organización.link: string
organization: OrganizationInfo
inviter?: UserInfo
UserPermissionValidationDurante el uso de la aplicación, puede haber algunas operaciones de alto riesgo o con un nivel de riesgo relativamente alto que requieran verificación adicional del usuario, como transferencias bancarias, eliminación de recursos en uso y cancelación de membresías. La plantilla UserPermissionValidation se puede usar para definir el contenido del código de verificación por correo electrónico que los usuarios reciben en estas situaciones.code: string
user: UserInfo
application?: ApplicationInfo
BindNewIdentifierCuando un usuario modifica su perfil, puede vincular una dirección de correo electrónico a su cuenta actual. En este caso, la plantilla BindNewIdentifier se puede usar para personalizar el contenido del correo electrónico de verificación.code: string
user: UserInfo
application?: ApplicationInfo

Variables de las plantillas de correo electrónico​

Code​

El código de verificación que los usuarios necesitan ingresar para completar el proceso de verificación. Disponible en las plantillas SignIn, Register, ForgotPassword, Generic, UserPermissionValidation y BindNewIdentifier.

  • Los códigos de verificación expiran en 10 minutos. Actualmente no admitimos la personalización del tiempo de expiración del código de verificación.
  • Se debe reservar un marcador de posición {{code}} en la plantilla. Al enviar un código de verificación, un código generado aleatoriamente reemplazará este marcador de posición antes de que enviemos el correo electrónico a los usuarios.

ApplicationInfo​

La información pública de la aplicación cliente con la que los usuarios están interactuando. Disponible en las plantillas SignIn, Register, ForgotPassword, UserPermissionValidation y BindNewIdentifier.

type ApplicationInfo = {
  id: string;
  name: string;
  displayName?: string;
  branding?: {
    logoUrl?: string;
    darkLogoUrl?: string;
    favicon?: string;
    darkFavicon?: string;
  };
};
  • Todos los campos de información de la aplicación anidados se pueden acceder en las plantillas a través de la notación de puntos. Por ejemplo, {{application.name}} será reemplazado por el nombre real de la aplicación de tu configuración.
  • Si no se proporciona la variable raíz application, el marcador de posición de handlebars será ignorado y no se reemplazará.
  • Si el objeto application proporcionado no contiene los campos requeridos o el valor es indefinido, el marcador de posición de handlebars será reemplazado por una cadena vacía. Por ejemplo, {{application.foo.bar}} será reemplazado por ``.

OrganizationInfo​

La información pública de la organización con la que los usuarios están interactuando.

type OrganizationInfo = {
  id: string;
  name: string;
  branding?: {
    logoUrl?: string;
    darkLogoUrl?: string;
    favicon?: string;
    darkFavicon?: string;
  };
};
  • Para las plantillas SignIn, Register y ForgotPassword, la variable organization es opcional. Solo está disponible cuando el parámetro organization_id está presente en la solicitud de autorización. Consulta Personalización específica de la organización para más detalles.
  • Para la plantilla OrganizationInvitation, la variable organization es obligatoria.

UserInfo​

La información pública del usuario al que se envía el correo electrónico. Disponible en las plantillas UserPermissionValidation, BindNewIdentifier y OrganizationInvitation.

type UserInfo = {
  id: string;
  name?: string;
  username?: string;
  primaryEmail?: string;
  primaryPhone?: string;
  avatar?: string;
  profile?: Profile;
};
  • Consulta perfil para más detalles sobre el tipo Profile.
  • La variable user es obligatoria para las plantillas UserPermissionValidation y BindNewIdentifier.
  • La variable inviter es opcional para la plantilla OrganizationInvitation. Solo está disponible cuando se proporciona inviterId en la solicitud de invitación a la organización.

Ejemplos de plantillas de correo electrónico​

Puedes usar los ejemplos de código de plantillas de correo electrónico proporcionados como punto de partida para personalizar tu interfaz de usuario. Para crear una interfaz de usuario similar a la siguiente:

Muestra de plantilla de correo electrónico incorporada

Dado que las plantillas de correo electrónico utilizadas en diferentes escenarios de Logto son muy similares, con la única diferencia siendo la descripción del escenario y operación actual.

No mostramos el código HTML de todas las plantillas en detalle aquí. En su lugar, solo tomamos el escenario de inicio de sesión como ejemplo. Otros escenarios, como el registro y el olvido de contraseña, son muy similares al siguiente ejemplo.

Los usuarios pueden referirse a esta plantilla y ajustarla según su situación real.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Verifica tu correo electrónico para iniciar sesión</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>Verifica tu correo electrónico para iniciar sesión</h1>
          <p>
            Hemos recibido un intento de inicio de sesión con el siguiente código. Por favor,
            ingrésalo en la página que abriste para completar el proceso de inicio de sesión.
          </p>
          <div class="verification-code">000000</div>
          <p style="color: #747778;">
            Si no intentaste iniciar sesión pero recibiste este correo electrónico, por favor
            ignóralo. El código permanecerá activo durante 10 minutos.
          </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
        mejor infraestructura de identidad para desarrolladores.
      </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;">
        ¿Tienes preguntas o necesitas ayuda?
        <a href="{{mailToUrl}}" style="color: #A9ACAC; text-decoration: underline;">Contáctanos</a>
      </p>
    </div>
  </body>
</html>

Luego puedes escapar el código HTML anterior y agregarlo al campo "Template" del conector en las configuraciones de la siguiente manera (suponiendo que uses el conector SendGrid):

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

Localización de plantillas de correo electrónico​

Plantillas de correo electrónico personalizadas para diferentes idiomas​

Logto admite la creación de plantillas de correo electrónico personalizadas para diferentes idiomas a través de Management API. Puedes crear plantillas de correo electrónico personalizadas para diferentes idiomas y tipos de plantillas para proporcionar una experiencia localizada a tus usuarios.

type EmailTemplate = {
  languageTag: string;
  templateType: TemplateType;
  details: {
    subject: string;
    content: string;
    contentType?: 'text/html' | 'text/plain';
    replyTo?: string;
    sendFrom?: string;
  };
};
CampoDescripción
subjectLa plantilla del asunto del correo electrónico.
contentLa plantilla del contenido del correo electrónico.
contentTypeAlgunos proveedores de correo electrónico pueden renderizar las plantillas de correo electrónico de manera diferente según el tipo de contenido. (por ejemplo, Sendgrid, Mailgun). Usa este campo para especificar el tipo de contenido de la plantilla de correo electrónico.
replyToLa dirección de correo electrónico que recibirá las respuestas al correo electrónico. Consulta con tu proveedor de correo electrónico para ver si este campo es compatible.
sendFromEl alias del nombre del remitente del correo electrónico. Consulta con tu proveedor de correo electrónico para ver si este campo es compatible.

Una vez que se crean las plantillas de correo electrónico, Logto seleccionará automáticamente la plantilla de correo electrónico adecuada según la preferencia de idioma del usuario utilizando el siguiente orden de prioridad:

  1. Para las Experience APIs del lado del cliente y las User Account APIs, la preferencia de idioma se determina por el encabezado Accept-Language en la solicitud. Para las Management APIs (como Organization Invitation), puedes especificar la preferencia de idioma incluyendo un parámetro locale en el campo messagePayload del cuerpo de la solicitud.
  2. Cuando se detecta una preferencia de idioma, Logto busca una plantilla de correo electrónico personalizada que coincida utilizando los campos languageTag y templateType. Si existe una plantilla para el idioma y tipo de plantilla especificados, Logto usará esa plantilla para renderizar el correo electrónico.
  3. Si no se detecta ninguna preferencia de idioma, o si no existe una plantilla personalizada para el idioma y tipo de plantilla detectados, Logto usará el idioma predeterminado del inquilino configurado en la Experiencia de Inicio de Sesión. Consulta Idiomas localizados para obtener detalles de configuración.
  4. Si no se encuentra una plantilla coincidente, Logto usará la plantilla de correo electrónico predeterminada definida en la configuración del conector.

Conectores de correo electrónico compatibles:

Localización de plantillas de correo electrónico del lado del proveedor​

Para los desarrolladores que usan los conectores de correo electrónico que tienen plantillas de correo electrónico gestionadas por el proveedor:

El idioma preferido por el usuario se pasará al proveedor utilizando el parámetro locale en la carga útil de la plantilla. Puedes crear múltiples plantillas para diferentes idiomas en la consola del proveedor y usar el parámetro locale para especificar la preferencia de idioma.

Preguntas frecuentes​

¿Cómo usar servicios de plantillas de correo electrónico de terceros si las plantillas no están configuradas en Logto?​

Puedes agregar un nuevo endpoint a tu propio servicio web para enviar correos electrónicos, luego usar el conector de correo electrónico HTTP de Logto para llamar al endpoint que mantienes.

Esto te permite manejar la lógica de plantillas de correo electrónico en tu propio servidor.

¿Hay alguna manera de usar el correo electrónico de Logto para enviar a nuestros usuarios un "Correo de bienvenida" personalizado?​

Ofrecemos la funcionalidad de Webhook. Puedes implementar tu propio endpoint de API para recibir el evento User.Created enviado por el Webhook de Logto, y agregar lógica para enviar un correo de bienvenida personalizado dentro del manejador del webhook.

El conector de correo electrónico de Logto solo proporciona notificaciones por correo electrónico para eventos relacionados con el flujo de autenticación. Los correos de bienvenida son un requisito comercial y no son compatibles de forma nativa por el conector de correo electrónico, pero esta funcionalidad se puede lograr a través de Webhooks.

Maximiza la entrega de correos electrónicos de verificación para garantizar el acceso de los usuarios