A autenticação por telefone permite que os usuários façam login no Firebase usando o telefone como autenticador. Uma mensagem SMS é enviada ao usuário (através do número de telefone fornecido) contendo um código exclusivo. Depois que o código for autorizado, o usuário poderá fazer login no Firebase.
Os números de telefone fornecidos pelos usuários finais para autenticação serão enviados e armazenados pelo Google para melhorar a prevenção de spam e abuso em todos os serviços do Google, incluindo, entre outros, o Firebase. Os desenvolvedores devem garantir que tenham o consentimento adequado do usuário final antes de usar o serviço de login por número de telefone do Firebase Authentication.authentication
O Firebase Phone Authentication não é compatível com todos os países. Consulte as perguntas frequentes para obter mais informações.
Configurar
Antes de iniciar a autenticação por telefone, certifique-se de ter seguido estas etapas:
- Ative o telefone como método de login no console do Firebase .
- Android : se você ainda não definiu o hash SHA-1 do seu aplicativo no console do Firebase , faça-o. Consulte Autenticando seu cliente para obter informações sobre como encontrar o hash SHA-1 do seu aplicativo.
- iOS : no Xcode, habilite notificações push para seu projeto e certifique-se de que sua chave de autenticação de APNs esteja configurada com Firebase Cloud Messaging (FCM) . Além disso, você deve ativar os modos de segundo plano para notificações remotas. Para ver uma explicação detalhada desta etapa, consulte a documentação do Firebase iOS Phone Auth .
- Web : verifique se você adicionou o domínio de seus aplicativos no console do Firebase , em Domínios de redirecionamento OAuth .
Observação ; O login com número de telefone está disponível apenas para uso em dispositivos reais e na web. Para testar seu fluxo de autenticação em emuladores de dispositivos, consulte Testes .
Uso
O SDK do Firebase Authentication para Flutter oferece duas maneiras individuais de fazer login de um usuário com seu número de telefone. As plataformas nativas (por exemplo, Android e iOS) fornecem funcionalidades diferentes para validar um número de telefone da web, portanto existem dois métodos exclusivamente para cada plataforma:
- Plataforma nativa :
verifyPhoneNumber. - Plataforma Web :
signInWithPhoneNumber.
Nativo: verifyPhoneNumber
Em plataformas nativas, primeiro o número de telefone do usuário deve ser verificado e, em seguida, o usuário pode fazer login ou vincular sua conta a um PhoneAuthCredential .
Primeiro você deve solicitar ao usuário o número de telefone. Uma vez fornecido, chame o método verifyPhoneNumber() :
await FirebaseAuth.instance.verifyPhoneNumber(
phoneNumber: '+44 7123 123 456',
verificationCompleted: (PhoneAuthCredential credential) {},
verificationFailed: (FirebaseAuthException e) {},
codeSent: (String verificationId, int? resendToken) {},
codeAutoRetrievalTimeout: (String verificationId) {},
);
Existem quatro retornos de chamada separados que você deve manipular, cada um determinará como você atualizará a interface do usuário do aplicativo:
- VerificationCompleted : Tratamento automático do código SMS em dispositivos Android.
- verifyFailed : trata eventos de falha, como números de telefone inválidos ou se a cota de SMS foi excedida.
- codeSent : identificador quando um código foi enviado ao dispositivo pelo Firebase, usado para solicitar que os usuários insiram o código.
- codeAutoRetrievalTimeout : processa um tempo limite de falha no tratamento automático do código SMS.
verificação concluída
Este manipulador só será chamado em dispositivos Android que suportam resolução automática de código SMS.
Quando o código SMS for entregue ao dispositivo, o Android verificará automaticamente o código SMS sem exigir que o usuário insira o código manualmente. Se esse evento ocorrer, um PhoneAuthCredential será fornecido automaticamente e poderá ser usado para fazer login ou vincular o número de telefone do usuário.
FirebaseAuth auth = FirebaseAuth.instance;
await auth.verifyPhoneNumber(
phoneNumber: '+44 7123 123 456',
verificationCompleted: (PhoneAuthCredential credential) async {
// ANDROID ONLY!
// Sign the user in (or link) with the auto-generated credential
await auth.signInWithCredential(credential);
},
);
falha na verificação
Se o Firebase retornar um erro, por exemplo, devido a um número de telefone incorreto ou se a cota de SMS do projeto for excedida, uma FirebaseAuthException será enviada para esse manipulador. Nesse caso, você avisaria ao usuário que algo deu errado, dependendo do código de erro.
FirebaseAuth auth = FirebaseAuth.instance;
await auth.verifyPhoneNumber(
phoneNumber: '+44 7123 123 456',
verificationFailed: (FirebaseAuthException e) {
if (e.code == 'invalid-phone-number') {
print('The provided phone number is not valid.');
}
// Handle other errors
},
);
código enviado
Quando o Firebase envia um código SMS para o dispositivo, esse manipulador é acionado com um verificationId e resendToken (um resendToken só é compatível com dispositivos Android, os dispositivos iOS sempre retornarão um valor null ).
Depois de acionado, seria um bom momento para atualizar a interface do usuário do aplicativo para solicitar que o usuário insira o código SMS que espera. Depois que o código SMS for inserido, você poderá combinar o ID de verificação com o código SMS para criar um novo PhoneAuthCredential :
FirebaseAuth auth = FirebaseAuth.instance;
await auth.verifyPhoneNumber(
phoneNumber: '+44 7123 123 456',
codeSent: (String verificationId, int? resendToken) async {
// Update the UI - wait for the user to enter the SMS code
String smsCode = 'xxxx';
// Create a PhoneAuthCredential with the code
PhoneAuthCredential credential = PhoneAuthProvider.credential(verificationId: verificationId, smsCode: smsCode);
// Sign the user in (or link) with the credential
await auth.signInWithCredential(credential);
},
);
Por padrão, o Firebase não reenviará uma nova mensagem SMS se ela tiver sido enviada recentemente. No entanto, você pode substituir esse comportamento chamando novamente o método verifyPhoneNumber com o token de reenvio para o argumento forceResendingToken . Se for bem-sucedido, a mensagem SMS será reenviada.
códigoAutoRetrievalTimeout
Em dispositivos Android que suportam resolução automática de código SMS, esse manipulador será chamado se o dispositivo não tiver resolvido automaticamente uma mensagem SMS dentro de um determinado período de tempo. Depois que o prazo tiver passado, o dispositivo não tentará mais resolver nenhuma mensagem recebida.
Por padrão, o dispositivo espera 30 segundos, mas isso pode ser personalizado com o argumento timeout :
FirebaseAuth auth = FirebaseAuth.instance;
await auth.verifyPhoneNumber(
phoneNumber: '+44 7123 123 456',
timeout: const Duration(seconds: 60),
codeAutoRetrievalTimeout: (String verificationId) {
// Auto-resolution timed out...
},
);
Web: signInWithPhoneNumber
Nas plataformas web, os usuários podem fazer login confirmando que têm acesso a um telefone digitando o código SMS enviado para o número de telefone fornecido. Para maior segurança e prevenção de spam, os usuários devem provar que são humanos preenchendo um widget Google reCAPTCHA . Depois de confirmado, o código SMS será enviado.
O SDK do Firebase Authentication para Flutter gerenciará o widget reCAPTCHA pronto para uso por padrão, mas fornece controle sobre como ele é exibido e configurado, se necessário. Para começar, chame o método signInWithPhoneNumber com o número de telefone.
FirebaseAuth auth = FirebaseAuth.instance;
// Wait for the user to complete the reCAPTCHA & for an SMS code to be sent.
ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('+44 7123 123 456');
Chamar o método primeiro acionará a exibição do widget reCAPTCHA. O usuário deve concluir o teste antes que um código SMS seja enviado. Depois de concluído, você poderá fazer login do usuário fornecendo o código SMS para o método confirm na resposta ConfirmationResult resolvida:
UserCredential userCredential = await confirmationResult.confirm('123456');
Como outros fluxos de entrada, uma entrada bem-sucedida acionará quaisquer ouvintes de estado de autenticação que você tenha inscrito em todo o seu aplicativo.
Configuração reCAPTCHA
O widget reCAPTCHA é um fluxo totalmente gerenciado que fornece segurança ao seu aplicativo web.
O segundo argumento de signInWithPhoneNumber aceita uma instância RecaptchaVerifier opcional que pode ser usada para gerenciar o widget. Por padrão, o widget será renderizado como um widget invisível quando o fluxo de login for acionado. Um widget "invisível" aparecerá como um modal de página inteira na parte superior do seu aplicativo.
No entanto, é possível exibir um widget embutido que o usuário deve pressionar explicitamente para verificar-se.
Para adicionar um widget embutido, especifique um ID de elemento DOM para o argumento container da instância RecaptchaVerifier . O elemento deve existir e estar vazio, caso contrário, um erro será gerado. Se nenhum argumento container for fornecido, o widget será renderizado como "invisível".
ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('+44 7123 123 456', RecaptchaVerifier(
container: 'recaptcha',
size: RecaptchaVerifierSize.compact,
theme: RecaptchaVerifierTheme.dark,
));
Opcionalmente, você pode alterar o tamanho e o tema personalizando os argumentos size e theme conforme mostrado acima.
Também é possível ouvir eventos, como se o reCAPTCHA foi concluído pelo usuário, se o reCAPTCHA expirou ou se ocorreu um erro:
RecaptchaVerifier(
onSuccess: () => print('reCAPTCHA Completed!'),
onError: (FirebaseAuthException error) => print(error),
onExpired: () => print('reCAPTCHA Expired!'),
);
Teste
O Firebase oferece suporte para testes locais de números de telefone:
- No Firebase Console, selecione o provedor de autenticação "Telefone" e clique no menu suspenso "Números de telefone para teste".
- Insira um novo número de telefone (por exemplo
+44 7444 555666) e um código de teste (por exemplo,123456).
Se você fornecer um número de telefone de teste para os métodos verifyPhoneNumber ou signInWithPhoneNumber , nenhum SMS será realmente enviado. Em vez disso, você pode fornecer o código de teste diretamente ao PhoneAuthProvider ou com o manipulador de resultados de confirmação de signInWithPhoneNumber .