Verificação de e-mail personalizada do Laravel 7 com Twilio Verify e SendGrid

Tempo de leitura: 7 minutos

May 07, 2020
Escrito por
Marcus Battle
Twilion
Revisado por
AJ Saulsberry
Contribuidor
As opiniões expressas pelos colaboradores da Twilio são de sua autoria

Verificação de e-mail personalizada do Laravel 7 com Twilio Verify e SendGrid

Ao permitir que os usuários se registrem no seu aplicativo sem verificar os endereços de e-mail, você diminui a probabilidade de entrar em contato com eles novamente. Se eles tiverem permissão para se inscrever com um endereço de e-mail incorreto, não há garantia de que eles navegarão para o perfil e o corrigirão mais tarde.

A verificação por e-mail existe para corrigir essa falha na experiência do usuário. Quando implementada corretamente, a verificação de e-mail permite que um usuário se inscreva e receba um token seguro enviado ao e-mail dele para confirmar que ele é real e que forneceu o endereço de e-mail correto.

Ao adicionar a verificação a qualquer etapa da jornada do usuário, o Twilio Verify permite que você combata a fraude antes que ela comece e verifique os usuários por e-mail, SMS ou voz.

Neste tutorial, você usará o Twilio Verify e o SendGrid para substituir a lógica de verificação padrão no Laravel e implantar seu próprio sistema.

É importante observar que o Laravel vem com a verificação de e-mail incorporada à sua estrutura. Mesmo que você não precise se preocupar com a implantação de sua própria solução, a lógica de verificação no Laravel só funciona com retransmissão SMTP de terceiros, como o SendGrid.

Esse é um dos motivos pelos quais usar o Twilio Verify para fornecer uma solução segura e eficiente para desenvolvedores para verificar usuários por meio de seus endereços de e-mail é uma ótima ideia. Se você precisar de um provedor SMTP de terceiros, por que não usar um que venha com um serviço de verificação?

Pré-requisitos

Para concluir este tutorial, você precisará do seguinte:

Criar um aplicativo Laravel

Primeiramente, você vai precisar instalar um novo aplicativo Laravel localmente. O instalador do Laravel nos ajudará a agilizar a instalação. Execute o seguinte comando:

$ laravel laravel-twilio-verify-email && cd laravel-twilio-verify-email

Habilitar autenticação do Laravel

A partir da versão 6, o Laravel separou o suporte de registro da estrutura principal. Para adicioná-lo, são necessários apenas dois comandos. Execute os seguintes comandos para implementar o registro do usuário:

$ composer require laravel/ui
$ php artisan ui vue --auth
$ php artisan ui:auth

Configurar banco de dados para registro

Antes de registrar usuários, você precisa garantir que seu banco de dados esteja configurado para registrar os dados deles. Abra o arquivo .env no diretório do projeto e atualize os seguintes valores para corresponder às credenciais do banco de dados:

DB_DATABASE=laravel_twilio_verify_email
DB_USERNAME=root
DB_PASSWORD=

Agora que suas credenciais de banco de dados foram atualizadas e o suporte de autenticação está em vigor, você pode executar a migração para gerar as tabelas necessárias.

$ php artisan migrate

Iniciar o aplicativo Laravel

Agora é um bom momento para visualizar sua instalação do Laravel. Com o comando artisan, inicie o aplicativo Laravel executando os seguintes comandos:

$ npm run dev
$ php artisan serve

Se o Laravel estiver configurado corretamente, você verá a página inicial padrão, como a exibida na imagem a seguir:

Página inicial do Laravel

Agora você pode visualizar seu aplicativo do Laravel em http://127.0.0.1:8000/

Adicionar verificação de e-mail

A Laravel pode fornecer a verificação por e-mail ao finalizar cada solicitação de dados do usuário com o contrato MustVerifyEmail. Por padrão, essa lógica não está ativada no seu aplicativo.

Para adicionar a verificação por e-mail, abra app\User.php e altere a declaração de classe para corresponder ao seguinte, especificamente MustVerifyEmail:

<?php

namespace App;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable implements MustVerifyEmail
{
    use Notifiable;

    // ...
}

Cada rota de autenticação agora precisa verificar se um usuário foi ou não verificado. Abra routes\web.php e substitua o seguinte:

Auth::routes(['verify' => true]);

Route::get('/home', 'HomeController@index')->name('home')->middleware('verified');

As alterações acima permitem a verificação em cada rota de autenticação e forçam o usuário a ser verificado antes de poder acessar o dashboard.

Por padrão, a lógica de verificação do Laravel vai procurar um endereço de e-mail de envio para tentar entregar o e-mail de verificação. Abra o arquivo .env e adicione o endereço "From" (De) à seguinte variável:

MAIL_FROM_ADDRESS=""

OBSERVAÇÃO: Você não receberá um e-mail porque um serviço de e-mail SMTP ainda não foi adicionado ao seu aplicativo Laravel. Se você quiser saber mais sobre como enviar e-mails no Laravel usando a classe Mailer, confira este link.

Reserve um momento para testar a lógica que você acabou de criar. Navegue até http://127.0.0.1:8000/register e registre um novo usuário. Como observado acima, você não receberá um e-mail, mas perceberá que está sendo solicitado a verificar seu e-mail para obter um link de verificação.

Verifique o endereço de e-mail do usuário

Agora que a verificação de e-mail foi ativada, você está pronto para implementar o Twilio Verify.

As próximas etapas são:

  • Criar um modelo Dinâmico no SendGrid para enviar para novo usuários
  • Criar um serviço de verificação da Twilio a ser usado no lugar da lógica padrão do Laravel

Criar uma chave SendGrid

Você precisará de uma chave de API para autenticar cada solicitação feita aos servidores do SendGrid. Navegue até o dashboard de chaves de API para criar uma nova chave com Full Access (acesso total), caso ainda não tenha uma disponível.

Salve a chave gerada em um local seguro, pois você precisará dela mais tarde.

Painel de chaves de API do SendGrid

Configurar a autenticação de domínio

A autenticação de domínio mostra aos provedores de e-mail que o SendGrid tem permissão para enviar e-mails em seu nome. Este é um passo importante para aumentar a capacidade de entrega de e-mails, pois cada e-mail é autenticado com seu nome de domínio, o que gera confiança com os provedores de serviços de e-mail e diminui a probabilidade de sua mensagem ser filtrada como spam.

Você pode configurar a autenticação de domínio no console SendGrid.

Para obter uma explicação mais detalhada, o SendGrid criou um tutorial sobre como configurar a autenticação de domínio.

Criar um modelo de e-mail dinâmico

Agora que seu domínio está autenticado, você está pronto para configurar o serviço de verificação. O primeiro requisito é criar o modelo de e-mail dinâmico que será enviado aos usuários.

Na sua conta SendGrid, navegue até a tela Dynamic Templates (Modelos dinâmicos) e selecione o botão "Create a Dynamic Template" (Criar um modelo dinâmico).

Modelo de e-mail dinâmico do SendGrid

Nomeie seu modelo como "Email Verification" (Verificação por e-mail) e selecione a linha recém-criada para revelar o Template ID (ID do modelo), Copie o valor e o salve em um local seguro para usá-lo mais tarde.

Verificação de e-mail

Após a criação do modelo, será necessário adicionar o conteúdo clicando no botão "Add Version" (Adicionar versão), conforme mostrado abaixo.

Adicionar versão ao Modelo SendGrid

Essa ação redirecionará você ao menu para "Select a Design" (Selecionar um design). Escolha "Blank Template" (Modelo em branco) seguido pelo "Code Editor" (Editor de código) para inserir o HTML personalizado como modelo de design.

Editor de código de modelo de design do SendGrid

Copie e cole o seguinte código no editor, conforme mostrado na captura de tela abaixo:

<html>
  <body>
  <center>
    <p>
      <a href="http://127.0.0.1:8000/verify-email/?token={{twilio_code}}" 
         style="background-color:#ffbe00; color:#000000; display:inline-block; padding:12px 40px 12px 40px; text-align:center; text-decoration:none;" 
         target="_blank">Verify Email Now</a>
    </p>
    <p><small>NOTE: This link will expire in 30 minutes.</small></p>
    <span style="font-size: 10px;"><a href=".">Email preferences</a></span>
  </center>
  </body>
</html>

OBSERVAÇÃO: você precisará substituir o URL do localhost pelo URL de produção na implementação. 

Modelo de e-mail do SendGrid

Observe que o modelo mustache {{twilio_code}} vai ser substituído dinamicamente pelo código de verificação gerado automaticamente pelo Twilio Verify.

Expanda a aba "Settings" (Configurações) para definir o Version Name (Nome da versão) e o Subject (Assunto) do e-mail. Identifique-os como "V1" e "Confirm your email address" (Confirmar seu endereço de e-mail), respectivamente.

Configurações dinâmicas de e-mail

Salve essas configurações, expanda a seção Test Your Email (Testar seu e-mail) e envie uma mensagem de teste.

Testar seu modelo de e-mail

E-mail de teste

Criar um serviço do Twilio Verify

O modelo que você acabou de criar não funcionará sozinho. É necessário que um "serviço de verificação" da Twilio seja enviado ao usuário.

Crie um novo serviço Twilio Verify e defina o Nome amigável como o nome do seu site.

Serviço Twilio Verify

Criar uma integração de e-mail

Agora que o serviço de verificação foi criado, você precisará definir o tipo de integração que seu aplicativo usará. O Twilio Verify oferece proteção contra fraudes via SMS, telefone e e-mail. Como observado anteriormente, você criará uma integração de e-mail.

Crie uma nova Integração de e-mail da Twilio e defina o Email Integration Name (Nome de integração de e-mail) como "Laravel Email Verification" (Verificação de e-mail do Laravel).

Verificação de e-mail da Lavarel

Agora, cole a chave de API SendGrid e o ID do modelo dinâmico previamente salvos, juntamente com seu endereço de e-mail e nome nos campos correspondentes, conforme mostrado na captura de tela abaixo:

Integração do Twilio Verify

OBSERVAÇÃO: o campo "Default From Email" (E-mail "De" padrão) deve ser um endereço de e-mail verificado em sua conta SendGrid durante a autenticação do domínio.

Depois de preencher o formulário, a integração deve ser atribuída a um serviço do Verify. Selecione o serviço do Verify que usará a integração e salve.

Serviço Twilio Verify

Adicionar suas credenciais da Twilio

Suas credenciais da Twilio precisam ser adicionadas ao aplicativo para que o SDK da Twilio possa aprovar cada solicitação. Isso é possível ao usar as variáveis de ambiente para armazená-las com segurança fora do controle de versão. Abra o arquivo .env.

TWILIO_ACCOUNT_SID="ACXXXXXXXXXXXXXXXXX"
TWILIO_AUTH_TOKEN="XXXXXXXXXXXXXXXX"
TWILIO_VERIFY_SID="VAXXXXXXXXXXXXXXXX"

Se você os perdeu, o Account SID (SID de conta) e o Auth Token (token de autenticação) da Twilio podem ser recuperados no console.

Agora, você vai se preparar para usar essas credenciais adicionando o  SDK Twilio PHP ao aplicativo. Execute o seguinte comando:

$ composer require twilio/sdk

Substituir o contrato MustVerifyEmail

Anteriormente, você implementou o contrato MustVerifyEmail no modelo User. Se você não estiver familiarizado, os contratos são um conjunto de interfaces que definem os principais serviços fornecidos pelo Laravel.

Um dos métodos que essa interface fornece é o SendEmailVerificationNotification(), que é acionado por uma solicitação POST para /email/verify ou /email/resend. Essencialmente, esse método é chamado sempre que um usuário é bem-sucedido ao enviar o formulário de registro ou redefinir a senha dele.

Para substituir a lógica padrão, você precisa implementar um método SendEmailVerificationNotification() personalizado no modelo User.

Abra o app/User.php e adicione o seguinte código:

public function sendEmailVerificationNotification()
   {
       $current_user = Auth::user();
       $sid    = getenv("TWILIO_ACCOUNT_SID");
       $token  = getenv("TWILIO_AUTH_TOKEN");
       $twilio = new Client($sid, $token);

       $verification = $twilio->verify->v2->services(getenv("TWILIO_VERIFY_SID"))
           ->verifications
           ->create($current_user->email, "email");
   }

O código acima substituirá a lógica padrão usando suas credenciais da Twilio para solicitar que um novo e-mail de verificação seja enviado ao usuário autenticado no momento.

Por fim, defina os seguintes namespaces acima da definição de classe:

use Illuminate\Support\Facades\Auth;
use Twilio\Rest\Client;

class User extends Authenticatable implements MustVerifyEmail

Criar um endpoint de verificação

Depois que o e-mail de verificação tiver sido enviado ao usuário autenticado, seu aplicativo precisará processar o código de verificação gerado.

Todos os links de verificação serão roteados para /verify-email/?token=CODE. Atualmente, esse endpoint não existe, portanto, você precisará criá-lo.

Abra VerificationController em app/Http/Controllers/VerificationController.php e adicione o seguinte código:

public function validate_twilio_verification_token(Request $request)
    {
        $current_user = Auth::user();
        $verification_token = $request->input('token');

        $sid    = getenv("TWILIO_ACCOUNT_SID");
        $token  = getenv("TWILIO_AUTH_TOKEN");
        $twilio = new Client($sid, $token);

        // Verify the token
        try {
            $verification_check = $twilio->verify->v2->services(getenv("TWILIO_VERIFY_SID"))
                ->verificationChecks
                ->create($verification_token, ["to" => $current_user->email]);
        } catch (\Exception $e) {
        
            // Redirect to elsewhere
            return redirect()->route('login');
        }

        // Check if the verify token is valid
        if ($verification_check->status === 'approved') {

            // Mark the user as verified in the database
            $current_user->markEmailAsVerified();

            // Redirect user to dashbaord
            return redirect()->route('login');
        }
    }

Em seguida, defina os seguintes namespaces acima da definição de classe:

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Twilio\Rest\Client;

class VerificationController extends Controller

Por último, defina a rota em routes/web.php:

Route::get('/verify-email', 'Auth\VerificationController@validate_twilio_verification_token');

Isso criará o endpoint http://127.0.0.1:8000/verify-email.

Testar

Agora você está pronto para testar a lógica de confirmação de e-mail. Se o seu aplicativo não estiver em execução, abra o terminal e execute php artisan serve

Navegue até a rota /login e faça login em sua conta.

Quando o aviso de verificação solicitar, clique em "Click here to request another" (Clique aqui para solicitar outro) e verifique seu e-mail.

Verifique o endereço de e-mail do usuário

Clique no botão "Verify Email Now" (Verificar e-mail agora). Se a verificação for bem-sucedida, você será redirecionado para http://127.0.0.1:8000/home.

E-mail de teste

Conclusão

Parabéns! Você substituiu todo o processo de confirmação de e-mail do Laravel pela sua própria solução personalizada e segura.

Se você quiser estender ainda mais esse processo, recomendo usar o SMS e a verificação por voz durante o processo de login/registro.

Este artigo foi traduzido do original "Custom Laravel 7 Email Verification with Twilio Verify and SendGrid". Enquanto melhoramos nossos processos de tradução, adoraríamos receber seus comentários em help@twilio.com - contribuições valiosas podem render brindes da Twilio.

Publicações relacionadas

Recursos relacionados

A newspaper article

Twilio Docs

De APIs a SDKs e aplicativos de amostra

Documentação de referência de API, SDKs, bibliotecas auxiliares, guias de início rápido e tutoriais para sua linguagem e plataforma.
An Open book

Centro de Recursos

Os mais recentes e-books, relatórios do setor e webinars

Aprenda com especialistas em engajamento do cliente para melhorar sua própria comunicação.

User group reactions

Ahoy

Centro da comunidade de desenvolvedores da Twilio

Melhores práticas, exemplos de código e inspiração para criar comunicações e experiências de engajamento digital.