Autenticação por telefone

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:

  1. Ative o telefone como método de login no console do Firebase .
  2. 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.
  3. 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 .
  4. 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:

  1. verificaçãoCompletado : Manipulação automática do código SMS em dispositivos Android.
  2. VerifyFailed : lida com eventos de falha, como números de telefone inválidos ou se a cota de SMS foi excedida.
  3. codeSent : trata quando um código é enviado ao dispositivo pelo Firebase, usado para solicitar que os usuários insiram o código.
  4. 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:

  1. No Firebase Console, selecione o provedor de autenticação "Telefone" e clique no menu suspenso "Números de telefone para teste".
  2. 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.