Integração da autenticação silenciosa da Vonage no Laravel

O que estamos construindo?

A autenticação silenciosa elimina a necessidade de uma senha de uso único (OTP) ao utilizar a autenticação de dois fatores, enviando o número de telefone do dispositivo e verificando sua autenticidade (por enquanto, se você quiser saber “como”, a resposta fácil é “mágica”, e a resposta real está nesta explicação detalhada sobre como funcionam as APIs de rede).

Então, nosso aplicativo de demonstração usará o Laravel para tentar fazer o login de um usuário real do seu aplicativo usando a Autenticação Silenciosa da Vonage no Verify. Se o número de telefone não estiver em um território compatível ou em uma rede compatível, o sistema voltará por padrão para o SMS.

Prototipagem Rápida no Laravel

É justamente a rapidez com que o código do Laravel é escrito que torna o framework a escolha ideal para mostrar como esse sistema de autenticação funciona na prática. Não é surpresa que a Laravel, como empresa, acaba de anunciar um financiamento de US$ 57 milhões na Série A ao mesmo tempo em que foi anunciado o lançamento do perfil de SaaS em nuvem do Laravel.

Uma grande dor de cabeça com as estruturas de desenvolvimento de aplicativos web, em todas as linguagens e variantes, é o que é incluído como código padrão. O Node, por exemplo, tem milhares de estruturas e bibliotecas — e, por causa disso, a metodologia de fato para construir um aplicativo é escolher cada elemento da sua aplicação e conectá-los entre si. Embora muitos desenvolvedores do Node concordem que essa é a maneira como fazemos, há alguns (aviso: eu) que não estão acostumados a essa forma de trabalhar porque temos coisas como...

Laravel Breeze

...que oferece tudo o que você precisa para começar a usar um sistema de autenticação. Aqui estão alguns recursos:

• Migrações da tabela de usuários a serem executadas no banco de dados

• Modelos para cadastrar um novo usuário no seu aplicativo, que começam como uma rota aberta, mas que você pode proteger posteriormente, se necessário

• Um sistema de gerenciamento de recuperação de senha já pronto para você

• Formulários de login pré-criados

• Uma série de opções de CLI para definir como você deseja que esse front-end funcione— Blade com Alpine.js, Livewireou um SPA como o Vue.js ou React

O objetivo deste artigo não é mostrar como instalar isso nem explicar as partes que ele conecta, mas sim personalizar o que o Breeze faz. Um argumento contra esse tipo de prototipagem rápida é: “Mas o resultado final segue totalmente o estilo do Laravel”. Claro que sim. Mas o que importa é o código padrão: para tornar esse código seu, a única coisa que te impede é alterar como os controladores funcionam e quais modelos/rotas eles estão gerando. Além disso, se você realmente odeia o Tailwind, você pode se livrar dele em cerca de 30 segundos.

Então, já que tudo isso vem pronto para uso, por que não integrar a API de Autenticação Silenciosa ao mecanismo de login? E foi exatamente isso, caro leitor, que eu fiz.

A base de código

Veja o que você vai precisar para testar isso:

• PHP 8.1 ou superior (por favor, pessoal, certifiquem-se de que estão com a versão atualizada!)

• Docker e docker-compose

• Compositor

• Um proxy localhost, como o ngrok ou o Expose

Para começar a trabalhar com o código, clone o repositório:

git clone https://github.com/Vonage-Community/sample-verify2_sms_silent_auth-laravel

Em seguida, instale as dependências do projeto:

composer install

Você precisará de um arquivo de configuração; portanto, copie o exemplo fornecido (usando o comando correspondente ao seu sistema operacional), que o Sail utilizará para criar um novo arquivo de banco de dados SQLite.

cp .env.example .env  // Unix-like OS

copy .env.example .env // Windows

As próximas etapas da instalação exigem que seu aplicativo seja iniciado no Docker — esse aplicativo foi desenvolvido usando Laravel Sail; portanto, desde que a instalação das dependências tenha ocorrido corretamente, você poderá baixar os contêineres do aplicativo e executá-los:

./vendor/bin/sail up -d

O opção -d executa o Docker como um daemon, em vez de monitorar os logs. Você pode notar que o arquivo de variáveis de ambiente usa o SQLite como banco de dados — ao escrever este aplicativo, eu usei originalmente o MySQL, mas, para fins de demonstração, o SQLite é um substituto perfeitamente aceitável (além disso, navegar pelo banco de dados com um IDE como o VSCode ou PHPStorm é mais simples).

Usando o binário do Sail, agora podemos concluir a instalação do banco de dados e dos recursos do front-end:

./vendor/bin/sail artisan migrate

./vendor/bin/sail artisan db:seed

./vendor/bin/sail yarn install

O aplicativo requer um servidor de recursos front-end ou uma compilação. A maneira mais rápida de fazer isso é executar um servidor de desenvolvimento front-end:

./vendor/bin/sail yarn run dev

Isso será executado o Vite como um processo na janela do seu terminal; portanto, você precisará abrir uma nova aba ou janela do terminal.

Por fim, você precisará gerar uma chave de aplicativo:

./vendor/bin/sail artisan key

O aplicativo requer uma account válido de desenvolvedor da Vonage e um JWT para realizar chamadas à API, que são criadas automaticamente pelo SDK PHP da Vonage usando sua chave privada baixada do Painel de Aplicativos e o ID exclusivo do seu aplicativo. Depois de obtê-las, baixe a chave privada para o diretório raiz do seu aplicativo, adicione ./private.key como variável de ambiente VONAGE_PRIVATE_KEY_PATHe o ID do aplicativo como VONAGE_APPLICATION_ID no seu arquivo .env . Talvez seja necessário reiniciar o Sail depois que essas variáveis forem definidas.

Como usar

Com o Sail iniciado, você deverá ver uma tela de boas-vindas ao acessar localhost:80.

Laravel Silent Auth Spash Screen

Já estamos no ar! Agora é hora de se cadastrar. Vá até o canto superior direito e clique em “Registrar-se”. Você verá a maior parte do formulário padrão do Laravel Breeze , com exceção de um campo adicional chamado “Número de telefone”. Essa parte é fundamental — ela armazenará seu número no banco de dados e, em seguida, tentará usar a Autenticação Silenciosa para concluir o processo.

Acesso a partir do mundo exterior

Uma coisa que você talvez ter notado é que ainda não expliquei o que é a Autenticação Silenciosa é. Bem, este artigo é sobre o aplicativo de demonstração, então, se você quiser saber mais sobre o assunto, dê uma olhada neste artigo do nosso blog.

Resumindo: você só poderá fazer login com um dispositivo celular por meio de uma conexão de celular. Isso significa que precisaremos expor nosso aplicativo ao mundo exterior. Para isso, recomendo usar o ngrok ou, talvez, uma opção mais lógica seja Expose , que usa ReactPHP e é desenvolvido pela comunidade Laravel. Assim que você tiver uma URL externa, é hora de acessá-la pelo seu dispositivo.

Fluxo de trabalho de autenticação silenciosa

Então, o que acontece quando você tenta fazer login? Bem, em primeiro lugar, o código verifica se você está fazendo login pela primeira vez ou se seu último login ocorreu há mais de 4 dias. Se essas condições forem atendidas, o mecanismo de Autenticação de Dois Fatores (2FA) será acionado automaticamente.

Start Silent Auth Process

Ao clicar no botão para iniciar a autenticação, o aplicativo determinará automaticamente se você pode concluir o processo por meio da autenticação silenciosa (Silent Auth) e, caso não seja possível, ele voltará por padrão para o envio de SMS:

SMS Fallback Option

Então, para acessar o painel, você será fará login automaticamente ao clicar no botão de início do Silent Auth, ou poderá fazer o login digitando o código enviado para o seu dispositivo. Para que a solicitação do Silent Auth funcione, você deve ter sua conexão Wi-Fi desativada e estar usando a rede móvel. Isso ocorre porque a Vonage, nos bastidores, está validando o dispositivo e a localização.

O que eu fiz?

Basicamente, eu precisava aproveitar o Breeze já existente. Por isso, criei um novo middleware —VonageSilentAuthMiddleware—, que é executado na rota de login. Esse middleware é executado após um login bem-sucedido com senha; assim, ele só pode concluir o fluxo de autenticação se o controlador de Autenticação Silenciosa for aprovado ou se o controlador de SMS for aprovado. Aqui está parte dessa lógica no middleware:

// is this the first time logging in?  

if (empty($user->last_login)) {  

    $request->session()->put('email', $user->email);  

    $request->session()->put('phone_number', $user->phone_number);  

    Auth::logout();  

    return redirect()->route('silent');  

}


// was the last login over 4 days ago?  

$lastLogin = Carbon::make($user->last_login);  

if ($lastLogin->diffInDays(Carbon::now()) > 4) {  

    $request->session()->put('email', $user->email);  

    $request->session()->put('phone_number', $user->phone_number);  

    Auth::logout();    

    return redirect()->route('silent');  

}

Uma coisa que você vai notar é que o e-mail e o número de telefone do usuário são armazenados na sessão. Isso indica aos outros controladores, após o redirecionamento, qual usuário deve ser recuperado da tabela de usuários para autorização assim que um mecanismo de autenticação for concluído em um controlador.

Como ocorre a autenticação silenciosa?

Essa é uma parte do código bastante complexa de explicar. A desvantagem da Autenticação Silenciosa é que, embora seja uma experiência praticamente sem atrito para o usuário final, sua integração é mais complexa para os desenvolvedores. Essa aplicação Laravel segue essencialmente o mesmo processo do tutorial web do Express.js , mas com um painel de controle funcional e uma tabela de usuários. Para uma explicação mais detalhada de como o código front-end funciona para resolver a solicitação de Autenticação Silenciosa, você pode consultá-la no tutorial.

Conclusão

Você deve ter percebido que este é autenticação baseada na web . Há alguns aspectos a serem considerados aqui:

• A melhor experiência de autenticação silenciosa gira em torno do iOS e Android para aplicativos móveis. Isso porque esses SDKs podem forçar a solicitação de autenticação silenciosa por meio da conexão de celular do dispositivo.

• No entanto, embora não haja APIs da web disponíveis no navegador para realizar esse tipo de funcionalidade, temos uma opção alternativa, conforme mostrado nesta demonstração. Por isso: por que não ter a autenticação silenciosa como uma opção de qualquer maneirae, se ela falhar, usar um canal diferente para concluir a autenticação de duas etapas?

A autenticação silenciosa por meio da nossa Verify API é uma das ofertas desta nova era de APIs de rede. Para mais informações, confira outras novas APIs que lançamos, como a API de troca de SIM. Para saber mais sobre o que oferecemos ou como essas APIs funcionam, confira nossa Slack da Comunidade de Desenvolvedores ou siga-nos no X.

Recursos adicionais

• Código de demonstração utilizado neste artigo

• Artigo de lançamento sobre APIs de rede