Verificação AUTOMÁTICA de SMS (ANDROID com React Native)

Como preencher automaticamente um código recebido por mensagem no React Native

Visão geral da seção: Nesta seção, o apresentador introduz o tópico e explica que mostrará como preencher automaticamente um código recebido por mensagem em um aplicativo React Native.

Utilizando a API Retriver para pegar o código de uma mensagem

• A API Retriver é usada para pegar o código de uma mensagem.

• O hash na mensagem é usado para distinguir as mensagens enviadas pela nossa aplicação.

• A biblioteca React Native OTP Verify é utilizada para obter o código da mensagem enviada.

Obtendo o hash da mensagem

• O método getHash é utilizado para obter o hash da mensagem.

• O hash obtido deve ser colocado dentro da mensagem que será enviada ao dispositivo.

Enviando a mensagem com o código

• O hash obtido anteriormente deve ser colocado dentro da mensagem que será enviada ao dispositivo.

Procurando e enviando mensagens

Visão geral da seção: Nesta seção, o palestrante mostra como procurar e enviar mensagens usando um emulador. Ele também demonstra como criar um listener para observar as mensagens recebidas.

Procurando e enviando mensagens

• Para procurar por aplicativos, arraste a tela inicial para cima.

• Para enviar uma mensagem, clique no ícone de mensagem na tela inicial.

• Para enviar uma mensagem com um hash específico, use o método "Send message" nas configurações do emulador.

• Crie um listener para observar as mensagens recebidas.

Criando um listener

• Use o método startOTPListener dentro do useEffect para criar um listener.

• Crie uma função separada chamada getOTPCode para receber a mensagem e extrair o código OTP dela.

• Utilize removeListener no return do useEffect para remover o listener quando o componente é desmontado.

Extraindo o código OTP da mensagem

• Utilize expressões regulares para extrair os quatro dígitos do código OTP da mensagem recebida.

• A barra (/), parênteses (), dígito (d), 4 e g são usados na expressão regular para identificar os quatro dígitos do código OTP.

• O código OTP é extraído da mensagem recebida e exibido no console.

Conclusão

Nesta seção, aprendemos como procurar e enviar mensagens usando um emulador e como criar um listener para observar as mensagens recebidas. Também aprendemos a extrair o código OTP da mensagem recebida usando expressões regulares.

Utilizando Hash para OTP

Visão geral da seção: Nesta seção, o apresentador mostra como utilizar um hash para gerar códigos OTP (One-Time Password) em uma aplicação.

Utilizando useState para armazenar o código

• Utiliza useState para armazenar o código.

• Inicialmente, o código começa como um texto vazio.

• O valor do código é utilizado no campo de entrada value.

• O primeiro índice do código é usado na posição zero.

Testando a funcionalidade

• Testa a funcionalidade enviando mensagens com diferentes códigos.

• Verifica se há conteúdo dentro da mensagem antes de fazer a conversão.

• Usa expressões regulares para extrair os quatro códigos necessários.

Recapitulando

Visão geral da seção: Nesta seção, o apresentador recapitula as etapas necessárias para utilizar um hash e gerar códigos OTP em uma aplicação.

Resumo das etapas

• Adiciona um hash à mensagem para identificá-la no meio de outras mensagens recebidas pelo dispositivo.

• Observa quando essa mensagem chega e pega seu conteúdo.

• Repassa esse conteúdo ao método getOTPCode, que utiliza expressões regulares para extrair os quatro códigos necessários.

• Atualiza o estado e exibe cada dígito do código em um input diferente.

Conclusão

Visão geral da seção: Nesta seção, o apresentador conclui o vídeo e incentiva os espectadores a compartilhar suas próprias experiências com a utilização de hashes para gerar códigos OTP.

Encerramento

• Incentiva os espectadores a compartilhar suas próprias experiências com a utilização de hashes.

• Pede aos espectadores que curtam e compartilhem o vídeo.