Modelos de email
Logto fornece diferentes modelos para personalizar o conteúdo de email, que são categorizados com base em seus casos de uso.
É fortemente recomendado que você use diferentes modelos em diferentes cenários. Caso contrário, os usuários podem receber conteúdo de email que não corresponde à operação atual, causando confusão. Se houver modelos ausentes que não estão configurados, isso pode causar erros de fluxo que dependem desse modelo e afetar o desenvolvimento normal dos negócios.
Tipos de modelos de email
| usageType | Cenário |
|---|---|
| SignIn | Usuários fazem login usando seu email e verificam inserindo o código de verificação em vez de inserir uma senha. |
| Register | Usuários criam uma conta usando seu email e a verificam inserindo um código de verificação enviado pelo Logto para seu email. |
| ForgotPassword | Se os usuários esquecerem sua senha durante o login, eles podem optar por verificar sua identidade usando o email que já verificaram com o Logto. |
| Generic | Este modelo pode ser usado como uma opção de backup geral para vários cenários, incluindo testar configurações de conectores e assim por diante. |
| OrganizationInvitation | Use este modelo para enviar aos usuários um link de convite para ingressar na organização. |
| UserPermissionValidation | Durante o uso do aplicativo, pode haver algumas operações de alto risco ou operações com um nível de risco relativamente alto que exigem verificação adicional do usuário, como transferências bancárias, exclusão de recursos em uso e cancelamento de assinaturas. O modelo UserPermissionValidation pode ser usado para definir o conteúdo do código de verificação por email que os usuários recebem nessas situações. |
| BindNewIdentifier | Quando um usuário modifica seu perfil, ele pode vincular um endereço de email à sua conta atual. Nesse caso, o modelo BindNewIdentifier pode ser usado para personalizar o conteúdo do email de verificação. |
Os códigos de verificação expiram em 10 minutos. Atualmente, não suportamos a personalização do tempo de expiração do código de verificação.
Um espaço reservado {{code}} precisa ser mantido no modelo. Ao enviar um código de verificação, um código gerado aleatoriamente substituirá esse espaço reservado antes de enviarmos o email aos usuários.
Exemplos de modelos de email
Você pode usar os exemplos de código de modelo de email fornecidos como ponto de partida para personalizar sua interface de usuário. Para criar uma interface de usuário semelhante ao seguinte:
Como os modelos de email usados em diferentes cenários do Logto são muito semelhantes, com a única diferença sendo a descrição do cenário e operação atuais.
Não mostramos o código HTML de todos os modelos em detalhes aqui. Em vez disso, tomamos apenas o cenário de login como exemplo. Outros cenários, como cadastro e esquecimento de senha, são muito semelhantes ao exemplo a seguir.
Os usuários podem consultar este modelo e ajustá-lo de acordo com sua situação real.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Verifique seu email para fazer login</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>Verifique seu email para fazer login</h1>
<p>
Recebemos uma tentativa de login com o seguinte código. Por favor, insira-o na página
que você abriu para completar o processo de login.
</p>
<div class="verification-code">000000</div>
<p style="color: #747778;">
Se você não tentou fazer login, mas recebeu este email, por favor, ignore-o. O código
permanecerá ativo por 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>: A
melhor infraestrutura de identidade para desenvolvedores.
</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;">
Tem perguntas ou precisa de ajuda?
<a href="{{mailToUrl}}" style="color: #A9ACAC; text-decoration: underline;"
>Entre em contato</a
>
</p>
</div>
</body>
</html>
Você pode então escapar o código HTML acima e adicioná-lo ao campo "Template" do conector nas configurações da seguinte forma (supondo o uso do conector SendGrid):
{
"subject": "<sign-in-template-subject>",
"content": "<table cellpadding=\"0\" cellspacing=\"0\" ...",
"usageType": "SignIn",
"type": "text/html"
}
Perguntas frequentes
Como usar serviços de modelo de email de terceiros se os modelos não estiverem configurados no Logto?
Você pode adicionar um novo endpoint ao seu próprio serviço web para enviar emails e, em seguida, usar o conector de email HTTP do Logto para chamar o endpoint que você mantém.
Isso permite que você gerencie a lógica de modelos de email em seu próprio servidor.
Existe uma maneira de usar o email do Logto para enviar aos nossos usuários um "Email de boas-vindas" personalizado?
Oferecemos funcionalidade de Webhook. Você pode implementar seu próprio endpoint de API para receber o evento User.Created enviado pelo Webhook do Logto e adicionar lógica para enviar um email de boas-vindas personalizado dentro do manipulador de webhook.
O conector de email do Logto fornece apenas notificações por email para eventos relacionados ao fluxo de autenticação. Emails de boas-vindas são um requisito de negócios e não são suportados nativamente pelo conector de email, mas essa funcionalidade pode ser alcançada por meio de Webhooks.