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.

Opciones de personalización de plantillas de correo electrónico

Logto ofrece tres enfoques distintos para la gestión de plantillas de correo electrónico:

1. Personalizar plantillas en Logto

   • Connectors:
     • SMTP
     • SendGrid
     • Mailgun
     • AWS Direct Mail
     • Aliyun Direct Mail
   • Capacidades:
     • ✅ Insertar variables diversas en las plantillas de manera flexible
     • ✅ Crear plantillas personalizadas multilingües a través de Management APIs
     • ✅ Edición completa de plantillas dentro de Logto

2. Personalizar plantillas en la plataforma del proveedor

   • Connectors:
     • Postmark
     • HTTP Email
   • Capacidades:
     • ✅ Pasar variables a la plataforma del proveedor
     • ✅ Pasar el parámetro locale a la plataforma del proveedor para la localización
     • ✅ Edición completa de plantillas dentro del panel del proveedor (Usar Logto Management APIs)

3. Plantillas predefinidas (no personalizables)

   • Connector:
     • Logto Built-in Email Service
   • Capacidades:
     • ✅ Soporte nativo de variables
     • ❌ Plantillas multilingües (Próximamente)
     • ❌ Modificaciones de plantilla / UI deshabilitadas

Tipos de plantillas de correo electrónico

usageType	Escenario	Variables
SignIn	Los 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
Register	Los 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
ForgotPassword	Si los usuarios olvidan su contraseña durante el inicio de sesión, pueden optar por verificar su identidad usando el correo electrónico primero para restablecer la contraseña.	code: string application: ApplicationInfo organization?: OrganizationInfo
Generic	Esta plantilla se puede usar como una opción de respaldo general para varios escenarios, incluyendo probar configuraciones de conectores, verificar o vincular el correo electrónico después de iniciar sesión, y así sucesivamente.	code: string
OrganizationInvitation	Usa esta plantilla para enviar a los usuarios un enlace de invitación para unirse a la organización.	link: string organization: OrganizationInfo inviter?: UserInfo
UserPermissionValidation	Durante el uso de la aplicación, puede haber algunas operaciones de alto riesgo o operaciones con un nivel de riesgo relativamente alto que requieren 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
BindNewIdentifier	Cuando 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 plantilla 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 necesita 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 con 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 con una cadena vacía. Por ejemplo, {{application.foo.bar}} será reemplazado con ``.

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 el inviterId se proporciona 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:

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;
  };
};

Campo	Descripción
subject	La plantilla del asunto del correo electrónico.
content	La plantilla del contenido del correo electrónico.
contentType	Algunos 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.
replyTo	La 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.
sendFrom	El 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 ninguna plantilla coincidente, Logto usará la plantilla de correo electrónico predeterminada definida en la configuración del conector.

Connectors de correo electrónico compatibles:

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

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

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

• HTTP Email
• Postmark

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 HTTP email 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 forma 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 de 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.

Recursos relacionados

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