Autenticación telefónica

La autenticación telefónica permite a los usuarios iniciar sesión en Firebase usando su teléfono como autenticador. Se envía un mensaje SMS al usuario (utilizando el número de teléfono proporcionado) que contiene un código único. Una vez que se ha autorizado el código, el usuario puede iniciar sesión en Firebase.

Google enviará y almacenará los números de teléfono que los usuarios finales proporcionen para la autenticación para mejorar la prevención de spam y abuso en todo el servicio de Google, incluido, entre otros, Firebase. Los desarrolladores deben asegurarse de tener el consentimiento del usuario final adecuado antes de usar el servicio de inicio de sesión con el número de teléfono de Firebase Authentication.authentication

Firebase Phone Authentication no es compatible en todos los países. Consulte sus preguntas frecuentes para obtener más información.

Configuración

Antes de comenzar con la autenticación telefónica, asegúrese de haber seguido estos pasos:

  1. Habilite el teléfono como método de inicio de sesión en la consola de Firebase .
  2. Android : si aún no configuró el hash SHA-1 de su aplicación en Firebase console , hágalo. Consulte Autenticación de su cliente para obtener información sobre cómo encontrar el hash SHA-1 de su aplicación.
  3. iOS : en Xcode, habilite las notificaciones automáticas para su proyecto y asegúrese de que su clave de autenticación de APN esté configurada con Firebase Cloud Messaging (FCM) . Para ver una explicación detallada de este paso, consulta la documentación de Firebase iOS Phone Auth .
  4. Web : asegúrese de haber agregado su dominio de aplicaciones en la consola de Firebase , en Dominios de redirección de OAuth .

nota ; El inicio de sesión con número de teléfono solo está disponible para su uso en dispositivos reales y en la web. Para probar su flujo de autenticación en emuladores de dispositivos, consulte Pruebas .

Uso

El SDK de autenticación de Firebase para Flutter ofrece dos formas individuales de iniciar sesión con un número de teléfono. Las plataformas nativas (por ejemplo, Android e iOS) brindan una funcionalidad diferente para validar un número de teléfono que la web, por lo tanto, existen dos métodos para cada plataforma exclusivamente:

  • Plataforma nativa : verifyPhoneNumber de teléfono.
  • Plataforma Web : signInWithPhoneNumber .

Nativo: verifyPhoneNumber

En las plataformas nativas, primero se debe verificar el número de teléfono del usuario y luego el usuario puede iniciar sesión o vincular su cuenta con una PhoneAuthCredential .

Primero debe solicitar al usuario su número de teléfono. Una vez proporcionado, llame al 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) {},
);

Hay 4 devoluciones de llamada separadas que debe manejar, cada una determinará cómo actualiza la interfaz de usuario de la aplicación:

  1. Verificación Completada : Manejo automático del código SMS en dispositivos Android.
  2. verificacionFailed : maneja eventos de falla como números de teléfono no válidos o si se ha excedido la cuota de SMS.
  3. codeSent : maneja cuando se ha enviado un código al dispositivo desde Firebase, que se usa para solicitar a los usuarios que ingresen el código.
  4. codeAutoRetrievalTimeout : maneja un tiempo de espera cuando falla el manejo automático de códigos SMS.

verificaciónCompletada

Este controlador solo se llamará en dispositivos Android que admitan la resolución automática de códigos SMS.

Cuando el código SMS se entrega al dispositivo, Android verificará automáticamente el código SMS sin requerir que el usuario ingrese el código manualmente. Si ocurre este evento, se proporciona automáticamente una PhoneAuthCredential que se puede usar para iniciar sesión o vincular el número de teléfono del usuario.

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);
  },
);

Fallo en la verificación

Si Firebase devuelve un error, por ejemplo, por un número de teléfono incorrecto o si se excedió la cuota de SMS para el proyecto, se enviará una FirebaseAuthException a este controlador. En este caso, le indicará a su usuario que algo salió mal según el código de error.

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

Cuando Firebase envía un código SMS al dispositivo, este controlador se activa con un ID de verificationId y un token de resendToken (un resendToken solo se admite en dispositivos Android, los dispositivos iOS siempre devolverán un valor null ).

Una vez activado, sería un buen momento para actualizar la interfaz de usuario de su aplicación para solicitar al usuario que ingrese el código de SMS que está esperando. Una vez que se haya ingresado el código de SMS, puede combinar la ID de verificación con el código de SMS para crear una nueva 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);
  },
);

De forma predeterminada, Firebase no volverá a enviar un nuevo mensaje SMS si se envió recientemente. Sin embargo, puede anular este comportamiento volviendo a llamar al verifyPhoneNumber con el token de reenvío al argumento forceResendingToken . Si tiene éxito, el mensaje SMS se reenviará.

códigoAutoRetrievalTimeout

En los dispositivos Android que admiten la resolución automática de códigos SMS, se llamará a este controlador si el dispositivo no ha resuelto automáticamente un mensaje SMS dentro de un período de tiempo determinado. Una vez que haya pasado el período de tiempo, el dispositivo ya no intentará resolver ningún mensaje entrante.

De forma predeterminada, el dispositivo espera 30 segundos; sin embargo, esto se puede personalizar con el argumento de timeout de espera:

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 de teléfono

En las plataformas web, los usuarios pueden iniciar sesión confirmando que tienen acceso a un teléfono ingresando el código SMS enviado al número de teléfono proporcionado. Para mayor seguridad y prevención de spam, se solicita a los usuarios que demuestren que son humanos completando un widget de Google reCAPTCHA . Una vez confirmado, se enviará el código SMS.

El SDK de autenticación de Firebase para Flutter administrará el widget reCAPTCHA de forma predeterminada; sin embargo, proporciona control sobre cómo se muestra y configura si es necesario. Para comenzar, llame al método signInWithPhoneNumber con el número de teléfono.

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');

Al llamar al método, primero se activará la visualización del widget reCAPTCHA. El usuario debe completar la prueba antes de que se envíe un código SMS. Una vez completado, puede iniciar la sesión del usuario proporcionando el código de SMS al método de confirm en la respuesta de ConfirmationResult resuelta:

UserCredential userCredential = await confirmationResult.confirm('123456');

Al igual que otros flujos de inicio de sesión, un inicio de sesión exitoso activará cualquier escucha de estado de autenticación que haya suscrito en su aplicación.

Configuración de reCAPTCHA

El widget reCAPTCHA es un flujo totalmente administrado que brinda seguridad a su aplicación web.

El segundo argumento de signInWithPhoneNumber acepta una instancia opcional de RecaptchaVerifier que se puede usar para administrar el widget. De forma predeterminada, el widget se representará como un widget invisible cuando se active el flujo de inicio de sesión. Aparecerá un widget "invisible" como un modal de página completa en la parte superior de su aplicación.

Sin embargo, es posible mostrar un widget en línea que el usuario debe presionar explícitamente para verificarse.

Para agregar un widget en línea, especifique un ID de elemento DOM en el argumento del container de la instancia de RecaptchaVerifier . El elemento debe existir y estar vacío; de lo contrario, se generará un error. Si no se proporciona ningún argumento de container , el widget se representará como "invisible".

ConfirmationResult confirmationResult = await auth.signInWithPhoneNumber('+44 7123 123 456', RecaptchaVerifier(
  container: 'recaptcha',
  size: RecaptchaVerifierSize.compact,
  theme: RecaptchaVerifierTheme.dark,
));

Opcionalmente, puede cambiar el tamaño y el tema personalizando los argumentos de size y theme como se muestra arriba.

También es posible escuchar eventos, como si el usuario ha completado el reCAPTCHA, si el reCAPTCHA ha caducado o si se ha producido un error:

RecaptchaVerifier(
  onSuccess: () => print('reCAPTCHA Completed!'),
  onError: (FirebaseAuthException error) => print(error),
  onExpired: () => print('reCAPTCHA Expired!'),
);

Pruebas

Firebase brinda soporte para probar números de teléfono localmente:

  1. En Firebase Console, seleccione el proveedor de autenticación "Teléfono" y haga clic en el menú desplegable "Números de teléfono para prueba".
  2. Introduzca un nuevo número de teléfono (por ejemplo, +44 7444 555666 ) y un código de prueba (por ejemplo, 123456 ).

Si proporciona un número de teléfono de prueba a los métodos signInWithPhoneNumber número de teléfono o verifyPhoneNumber con número de teléfono, no se enviará ningún SMS. En su lugar, puede proporcionar el código de prueba directamente a PhoneAuthProvider o con el controlador de resultados de confirmación signInWithPhoneNumber s.