Monday, 28 June, 2021 UTC
Summary
Como desenvolvedores da Web, acabamos criando uma tonelada de sistemas de login e parte do fluxo "criar usuário" do desenvolvedor socialmente responsável é verificar se o endereço de e-mail inserido pelo usuário é real e pertence a ele.
Felizmente, o Twilio Verify agora oferece suporte à verificação de e-mail! Podemos enviar solicitações de verificação de e-mail completas usando um token gerado automaticamente com uma única chamada de API para a plataforma Twilio. Depois que o usuário clicar no link, poderemos validar se o token está correto com outra chamada de API. Isso nos deixa livres para resolver nossos problemas de negócios específicos e não gastar nossa energia reinventando a roda.
Pré-requisitos Antes de começar, verifique se você tem o seguinte:
- Uma conta da Twilio
- Uma conta do Sendgrid (pode ser o nível gratuito)
- Uma chave de API do Sendgrid
Vamos começar criando um modelo de e-mail em que será mantido o código de verificação de e-mail. Navegue até o dashboard do Sendgrid e crie um modelo dinâmico. Você terá a opção de criar seu modelo com o editor gráfico ou com o código. Neste tutorial, usaremos HTML. Veja alguns exemplos de HTML para começar.
<html> <head> <style type="text/css"> body, p, div { font-family: Helvetica, Arial, sans-serif; font-size: 14px; } a { text-decoration: none; } </style> <title></title> </head> <body> <center> <p> The verification code is: <strong>{{twilio_code}}</strong> </p> <p><a href="https://sendgrid.com/blog/open-source-transactional-email-templates/">Check out more templates</a></p> <span style="font-size: 10px;"><a href=".">Email preferences</a></span> </center> </body> </html> Cole o HTML no editor de código. Note a variável "twilio_code" incluída em nosso HTML. A API Verify preencherá esse valor.
Clique em "Settings" (Configurações) à esquerda para adicionar um assunto ao seu modelo. Salve o modelo e clique na seta no canto superior esquerdo para voltar ao dashboard. Anote o Template ID (ID do modelo) de e-mail, pois vamos usá-lo na próxima etapa.
Criar um serviço do Twilio Verify e a integração de e-mail Em seguida, precisamos criar um serviço do Twilio Verify. Esse serviço pode ser usado em alguns canais, como mensagens SMS ou chamadas telefônicas. Acesse o Console do Twilio Verify e crie um serviço. Anote o Verification Service SID (SID do serviço de verificação), pois vamos usá-lo novamente mais à frente.
Agora podemos criar uma integração de e-mail do Twilio Verify. Acesse a seção E-mail integration (Integração de e-mail) do console do Twilio Verify e clique no botão vermelho para criar uma integração.
Você precisará de:
- Sua chave de API do SendGrid (crie uma caso ainda não o tenha feito)
- Seu ID de modelo do modelo dinâmico que criamos anteriormente
- Um e-mail de origem padrão
- Um nome de origem padrão
Atribua a integração de e-mail ao serviço do Verify ao qual você deseja associá-la marcando a caixa de seleção na parte inferior da página.
É hora de testar! Crie um projeto node e instale a biblioteca auxiliar da Twilio. Para isso, você pode navegar até uma nova pasta na linha de comando e executar os comandos abaixo.
npm init npm install twilio touch index.js Agora, dentro do arquivo index.js, autenticaremos o Twilio Client com o Account SID (SID da conta) e o Auth Token (token de autenticação). Nota: Em produção, não faça codificação rígida. Use variáveis de ambiente. Veja aqui um guia escrito por meu colega Dominik sobre como fazer isso.
const accountSid = process.env.TWILIO_ACCOUNT_SID; const authToken = process.env.TWILIO_AUTH_TOKEN; const twilioClient = require("twilio")(accountSid, authToken); twilioClient.verify .services("VAXXXXXXXXXXX") //Put the Verification service SID here .verifications.create({to: "[email protected]", channel: "email"}) .then(verification => { console.log(verification.sid); }); Vamos executar este código. De volta ao terminal, execute os seguintes comandos:
node index Você verá um SID de verificação se tudo funcionar. Agora, vamos acessar nossa caixa de entrada de e-mail. Você verá um e-mail exatamente como o que criamos no SendGrid.
Vamos verificar esse código de verificação A próxima etapa é verificar se o código de verificação fornecido pelo usuário corresponde ao código que enviamos ao e-mail dele. Vamos verificar o código. Comente as linhas acima, onde criamos a verificação, e adicione o seguinte código ao arquivo de índice.
twilioClient.verify .services("VAXXXXXXXXXXX") //Put the Verification service SID here .verificationChecks.create({ to: "[email protected]", code: "123456" }) .then(verification_check => console.log(verification_check.status)); Primeiro, tente com um código incorreto. Use o endereço de e-mail em que você recebeu o código de verificação. Você deve ver um status de "pending" (pendente) no console. Até que o código correto seja usado, a verificação permanecerá pending (pendente). Em seguida, substitua o código incorreto pelo código recebido. Agora, ao executar o código, você verá um status
Vamos colocar isso em prática approved (aprovado) no console.Vamos implementar o Twilio Verify em uma experiência de inscrição de usuário. Criei um exemplo de aplicativo no GitHub que você pode usar como ponto de partida para seu projeto. Se o git estiver instalado, você poderá executar os seguintes comandos na linha de comando para configurá-lo no computador.
git clone https://github.com/nokenwa/verify-Starter.git cd verify-Starter npm install Antes de começarmos, crie um arquivo .env e inclua seu Account SID (SID da conta) da Twilio, o Auth Token (token de autenticação) e o Verification SID (SID de verificação). Execute o seguinte comando para iniciar o servidor da Web.
npm start No navegador, acesse
localhost:3000. Você verá uma página de inscrição como esta.Nós o configuramos com um banco de dados fictício no armazenamento. No arquivo
index.js, localize a parte do código na rota post /. Você notará que ele é quase idêntico ao código que usamos anteriormente para enviar um e-mail com um código de verificação. Além disso, quando o e-mail de verificação for enviado, redirecionaremos o usuário para a página verify (Verificar), onde poderemos coletar o código de verificação. Transmitimos o e-mail do usuário como um parâmetro de consulta no URL. Você também pode usar variáveis de sessão para armazenar essas informações.//New User Created app.post("/", (req, res) => { const email = req.body.email; database.addUser({ username: req.body.username, email: email, password: req.body.password, verified: "Not Verified" }); //CREATE A NEW VERIFICATION HERE twilioClient.verify .services(verificationSID) .verifications.create({ to: email, channel: "email" }) .then(verification => { console.log("Verification email sent"); res.redirect(`/verify?email=${email}`); }) .catch(error => { console.log(error); }); // res.redirect("/users"); }); Agora, sempre que um novo usuário for criado, um e-mail de verificação será enviado, e o usuário será redirecionado para
/verify, onde podemos coletar o código de verificação.Em seguida, vamos dar uma olhada na rota post
/Verify. Ela usa a biblioteca da Twilio para verificar a combinação de e-mail e código. Se o código for aprovado, modificaremos a entrada do banco de dados do usuário para mostrar que ele foi aprovado e redirecionaremos para mostrar todos os usuários; no entanto, se o código estiver incorreto, exibiremos uma mensagem informando que ocorreu falha na verificação.//Verification Code submission app.post("/verify", (req, res) => { const userCode = req.body.code; const email = req.body.email; console.log(`Code: ${userCode}`); console.log(`Email: ${email}`); //CHECK YOUR VERIFICATION CODE HERE twilioClient.verify .services("VAXXXXXXXXXX") .verificationChecks.create({ to: email, code: userCode }) .then(verification_check => { if (verification_check.status === "approved") { database.verifyUser(email); res.redirect("users"); } else { res.render("verify", { email: email, message: "Verification Failed. Please enter the code from your email" }); } }) .catch(error => { console.log(error); res.render("verify", { email: email, message: "Verification Failed. Please enter the code from your email" }); }); }); Volte ao navegador e inicie um novo processo de inscrição. Agora, depois de integrar um novo usuário, você verá esta tela.
Acesse seu e-mail e verifique o código recebido. Ao colocá-lo na caixa de texto e clicar em
Finalizar Verify, você poderá ver a lista de usuários com seu mais novo usuário verificado!Todas as ferramentas que podem me ajudar a parar de resolver repetidamente os mesmos problemas são fantásticas e estão no meu livro. Podemos usar a API Verify para enviar e lidar com e-mails de verificação e podemos usar um sistema semelhante para enviar e-mails de solicitação de alteração de senha. Os modelos dinâmicos do SendGrid também são úteis para enviar quaisquer outros e-mails automatizados que o aplicativo possa precisar. O que é ainda mais surpreendente na API Verify é que, basta alterar o canal, para você ter uma verificação de números de telefone.
Conte-me como você usou o Twilio Verify para verificar endereços de e-mail em seus aplicativos aqui nos comentários ou no Twitter. Mal posso esperar para ver o que você criou!
Este artigo foi traduzido do original "Email Verification with Twilio Verify and Twilio Sendgrid with Node.js". Enquanto melhoramos nossos processos de tradução, adoraríamos receber seus comentários em [email protected] - contribuições valiosas podem render brindes da Twilio.