La autenticación por teléfono permite a los usuarios iniciar sesión en Firebase utilizando 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 contar con el consentimiento del usuario final adecuado antes de utilizar el servicio de inicio de sesión con número de teléfono de Firebase Authentication.authentication
La autenticación telefónica de Firebase no se admite 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:
- Habilite el teléfono como método de inicio de sesión en Firebase console .
- Android : si aún no has configurado el hash SHA-1 de tu aplicación en Firebase console , hazlo. Consulte Autenticar a su cliente para obtener información sobre cómo encontrar el hash SHA-1 de su aplicación.
- 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) . Además, debe habilitar los modos en segundo plano para notificaciones remotas. Para ver una explicación detallada de este paso, consulte la documentación de autenticación de teléfono de Firebase iOS .
- Web : asegúrese de haber agregado el dominio de su aplicación en Firebase console , 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 proporciona dos formas individuales de iniciar sesión para un usuario con su número de teléfono. Las plataformas nativas (por ejemplo, Android e iOS) proporcionan una funcionalidad diferente para validar un número de teléfono que la web, por lo que existen dos métodos exclusivamente para cada plataforma:
- Plataforma nativa :
verifyPhoneNumber. - 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 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 debes manejar, cada una determinará cómo actualizar la interfaz de usuario de la aplicación:
- verificaciónCompletada : Manejo automático del código SMS en dispositivos Android.
- verificarFailed : Maneja eventos de falla, como números de teléfono no válidos o si se ha excedido la cuota de SMS.
- codeSent : controla cuando se ha enviado un código al dispositivo desde Firebase y se utiliza para solicitar a los usuarios que ingresen el código.
- codeAutoRetrievalTimeout : maneja un tiempo de espera cuando falla el manejo automático del código 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 envía al dispositivo, Android verificará automáticamente el código SMS sin necesidad de 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 al 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 verificationId y 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 SMS que espera. Una vez que se haya ingresado el código SMS, puede combinar la ID de verificación con el código 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 el método verifyPhoneNumber con el token de reenvío al argumento forceResendingToken . Si tiene éxito, se reenviará el mensaje SMS.
códigoAutoRetrievalTimeout
En 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 transcurrido el plazo, 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 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
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 reCAPTCHA de Google . 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, pero 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');
Llamar al método primero activará la visualización del widget reCAPTCHA. El usuario debe completar la prueba antes de enviar un código SMS. Una vez completado, puede iniciar sesión como usuario proporcionando el código SMS al método confirm en la respuesta 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 oyente del estado de autenticación al que se haya suscrito en toda su aplicación.
Configuración 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 RecaptchaVerifier que se puede usar para administrar el widget. De forma predeterminada, el widget se mostrará como un widget invisible cuando se active el flujo de inicio de sesión. Un widget "invisible" aparecerá 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 container de la instancia RecaptchaVerifier . El elemento debe existir y estar vacío; de lo contrario, se generará un error. Si no se proporciona ningún argumento 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 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:
- En Firebase Console, seleccione el proveedor de autenticación "Teléfono" y haga clic en el menú desplegable "Números de teléfono para pruebas".
- 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 verifyPhoneNumber o signInWithPhoneNumber , 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 de signInWithPhoneNumber .