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 (usando o 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 todo o serviço do Google, incluindo, mas não limitado ao Firebase. Os desenvolvedores devem garantir que tenham o consentimento apropriado 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. Por favor, veja suas perguntas frequentes para obter mais informações.
Configuração
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 configurou o hash SHA-1 do seu aplicativo no console do Firebase , faça isso. Consulte Autenticação do seu cliente para obter informações sobre como localizar o hash SHA-1 do seu aplicativo.
- iOS : no Xcode, ative as notificações por push para seu projeto e verifique se a chave de autenticação de APNs está configurada com o Firebase Cloud Messaging (FCM) . Para ver uma explicação detalhada desta etapa, consulte a documentação do Firebase iOS Phone Auth .
- Web : certifique-se de ter adicionado o domínio de seus aplicativos no console do Firebase , em domínios de redirecionamento OAuth .
Nota ; O login por número de telefone só está disponível para uso em dispositivos reais e na Web. Para testar seu fluxo de autenticação em emuladores de dispositivos, consulte Testando .
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 do que a web, portanto, existem dois métodos exclusivos para cada plataforma:
- Plataforma nativa :
verifyPhoneNumber
. - Plataforma Web :
signInWithPhoneNumber
.
Nativo: verifyPhoneNumber
Em plataformas nativas, o número de telefone do usuário deve ser verificado primeiro e, em seguida, o usuário pode fazer login ou vincular sua conta a um PhoneAuthCredential
.
Primeiro, você deve solicitar ao usuário seu 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 4 retornos de chamada separados que você deve manipular, cada um determinará como você atualiza a interface do usuário do aplicativo:
- verificaçãoCompletado : Manipulação automática do código SMS em dispositivos Android.
- VerifyFailed : lida com eventos de falha, como números de telefone inválidos ou se a cota de SMS foi excedida.
- codeSent : trata quando um código é enviado ao dispositivo pelo Firebase, usado para solicitar que os usuários insiram o código.
- codeAutoRetrievalTimeout : Lide com um tempo limite de quando a manipulação automática de código SMS falha.
verificação concluída
Este manipulador só será chamado em dispositivos Android que suportam a 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 entrar 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, para um número de telefone incorreto ou se a cota de SMS do projeto tiver excedido, uma FirebaseAuthException
será enviada a 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 um resendToken
(um resendToken
só é compatível com dispositivos Android, os dispositivos iOS sempre retornarão um valor null
).
Uma vez 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 está esperando. 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.
codeAutoRetrievalTimeout
Em dispositivos Android que suportam a 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. Após o prazo, o dispositivo não tentará mais resolver as mensagens recebidas.
Por padrão, o dispositivo aguarda 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
Em plataformas da 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 . Uma vez confirmado, o código SMS será enviado.
O SDK do Firebase Authentication para Flutter gerenciará o widget reCAPTCHA 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á o widget reCAPTCHA para exibição. O usuário deve concluir o teste antes que um código SMS seja enviado. Depois de concluído, você pode conectar o usuário fornecendo o código SMS para o método confirm
na resposta ConfirmationResult
resolvida:
UserCredential userCredential = await confirmationResult.confirm('123456');
Assim como outros fluxos de entrada, uma entrada bem-sucedida acionará todos os ouvintes de estado de autenticação que você assinou em todo o aplicativo.
Configuração do reCAPTCHA
O widget reCAPTCHA é um fluxo totalmente gerenciado que fornece segurança ao seu aplicativo da web.
O segundo argumento de signInWithPhoneNumber
aceita uma instância opcional RecaptchaVerifier
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 no topo do seu aplicativo.
No entanto, é possível exibir um widget embutido que o usuário deve pressionar explicitamente para verificar a si mesmo.
Para adicionar um widget embutido, especifique um ID de elemento DOM para o argumento de container
da instância RecaptchaVerifier
. O elemento deve existir e estar vazio, caso contrário, um erro será lançado. Se nenhum argumento de 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 de 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 um erro foi gerado:
RecaptchaVerifier(
onSuccess: () => print('reCAPTCHA Completed!'),
onError: (FirebaseAuthException error) => print(error),
onExpired: () => print('reCAPTCHA Expired!'),
);
Teste
O Firebase oferece suporte para testar números de telefone localmente:
- 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 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 signInWithPhoneNumber
s.