Assista: Como validar o WhatsApp de novos usuários na Lovable
Se você está criando um SaaS, aplicativo, área de membros ou qualquer sistema utilizando a Lovable, uma das funcionalidades que pode deixar o processo de cadastro muito mais completo é a verificação do número de WhatsApp do usuário.
A ideia é simples:
O usuário preenche o formulário de cadastro, informa seu número de WhatsApp e recebe automaticamente um código de verificação.
Para concluir a criação da conta, ele precisa inserir esse código dentro da plataforma.
O fluxo fica assim:
Cadastro → Envio do código pelo WhatsApp → Validação → Conta liberada
Além de melhorar a experiência de cadastro, esse processo ajuda a confirmar que o número informado realmente pertence ao usuário e pode reduzir cadastros automatizados, dados inválidos e spam dentro da aplicação.
Neste tutorial, vamos implementar esse sistema utilizando:
Lovable + API de WhatsApp + WPI
O que vamos construir
Ao final da configuração, nosso sistema terá um fluxo parecido com este:
- O usuário acessa a página de cadastro
- Informa nome, e-mail, WhatsApp e senha
- A plataforma gera um código de verificação
- O código é enviado automaticamente pelo WhatsApp
- O usuário é direcionado para uma página de confirmação
- Ele informa o código recebido
- O sistema valida o código
- Se estiver correto, o cadastro é confirmado
- O usuário recebe uma mensagem de boas-vindas
Também vamos adicionar algumas funcionalidades importantes ao processo:
Código de 6 caracteres
Inputs separados para cada caractere
Preenchimento automático ao colar o código
Timer para solicitar um novo código
Opção para alterar o número de WhatsApp
Validação de código incorreto
Mensagem de confirmação após a validação
Antes de começar: conecte uma API de WhatsApp à Lovable
Para enviar mensagens automaticamente pelo WhatsApp, a Lovable precisa estar conectada a uma API.
Neste projeto utilizamos a WPI, uma plataforma que fornece uma API de WhatsApp que pode ser integrada ao sistema criado na Lovable.
Essa integração precisa estar funcionando antes de começarmos a implementar a verificação.
Na prática, a Lovable precisa conseguir executar uma ação como:
Sistema → API → WhatsApp do usuário
Eu já publiquei um tutorial completo mostrando como conectar uma API de WhatsApp à Lovable, gerar o token, configurar a documentação da API e testar o envio das mensagens.
Se você ainda não realizou essa configuração, recomendo fazer primeiro a integração com a WPI e depois retornar para este tutorial.
1. Criando a página de verificação do WhatsApp
O primeiro passo é criar uma página que será exibida imediatamente após o usuário preencher o cadastro.
Essa página será responsável por receber o código enviado pelo WhatsApp.
Um exemplo de solicitação para a Lovable seria:
Quero realizar um processo de verificação de WhatsApp para os usuários que realizarem cadastro na plataforma.
Para isso, crie uma página de verificação que será exibida após a página de cadastro.
O código deverá possuir seis caracteres alfanuméricos.
Quero seis inputs separados, sendo um input para cada caractere.
Caso o usuário copie o código completo e cole no primeiro campo, os caracteres deverão ser distribuídos automaticamente entre os seis inputs.
Adicione um botão para validar o código.
Adicione também a opção de reenviar o código após um timer de 1 minuto.
O usuário também deverá conseguir alterar o número de WhatsApp informado.
Com essa instrução, conseguimos deixar muito mais claro para a Lovable exatamente como a experiência deve funcionar.
Detalhar o prompt pode economizar créditos
Esse é um detalhe importante principalmente para quem utiliza Lovable com frequência.
Evite solicitações extremamente genéricas como:
Crie uma verificação de WhatsApp.
A Lovable provavelmente conseguirá criar alguma implementação, mas talvez ela não corresponda à experiência que você imaginou.
Isso pode gerar uma sequência como:
Prompt inicial → correção → novo ajuste → outra correção → novo prompt
E cada interação adicional pode consumir mais créditos.
Por isso, antes de enviar uma solicitação para a Lovable, tente definir:
- O que deve acontecer
- Quando deve acontecer
- O que o usuário verá
- Quais são as exceções
- O que acontece quando algo der errado
Quanto mais contexto você fornecer, maior a possibilidade de receber uma primeira implementação próxima do resultado esperado.
2. Configurando a mensagem com o código de verificação
Depois que a página estiver pronta, precisamos definir a mensagem que será enviada pelo WhatsApp.
Por exemplo:
Aqui existem duas informações que não são fixas:
Nome do usuário e Código de verificação
Esses valores precisam ser gerados dinamicamente pelo sistema.
Se Guilherme estiver realizando o cadastro e receber o código A8F4K2, por exemplo, a mensagem deverá ser montada automaticamente com essas informações.
3. Criando as regras de validação
Agora chegamos a uma das partes mais importantes.
Não basta gerar e enviar um código. Precisamos definir o que acontece quando o usuário informa o código correto ou incorreto.
Código correto
Se o código informado pelo usuário for igual ao código gerado pelo sistema:
WhatsApp verificado -> Cadastro liberado -> Usuário direcionado para a plataforma
Depos: Mensagem de boas-vindas enviada
Podemos solicitar à Lovable:
Quando o usuário preencher o formulário de cadastro, receber o código pelo WhatsApp e informar corretamente esse código na página de validação, confirme o número de telefone e conclua o cadastro.
Após a confirmação, exiba uma mensagem de boas-vindas na plataforma e envie também uma mensagem de boas-vindas pelo WhatsApp.
