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​

usageTypeEscenario
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.
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.
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.
GenericEsta plantilla se puede usar como una opción de respaldo general para varios escenarios, incluyendo la prueba de configuraciones de conectores, entre otros.
OrganizationInvitationUsa esta plantilla para enviar a los usuarios un enlace de invitación para unirse a la organización.
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.
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.

Es importante entender estos parámetros:

  • 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 enviar el correo electrónico a los usuarios.

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

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 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.