Google se compromete a impulsar la igualdad racial para las comunidades afrodescendientes. Obtén información al respecto.

Autenticarse con Firebase con un número de teléfono usando JavaScript

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Puede usar Firebase Authentication para iniciar sesión en un usuario mediante el envío de un mensaje SMS al teléfono del usuario. El usuario inicia sesión con un código de un solo uso contenido en el mensaje SMS.

La forma más fácil de agregar el inicio de sesión con número de teléfono a su aplicación es usar FirebaseUI , que incluye un widget de inicio de sesión directo que implementa flujos de inicio de sesión para el inicio de sesión con número de teléfono, así como inicio de sesión federado y basado en contraseña. -en. Este documento describe cómo implementar un flujo de inicio de sesión de número de teléfono mediante el SDK de Firebase.

Antes de que empieces

Si aún no lo ha hecho, copie el fragmento de código de inicialización de la consola de Firebase a su proyecto como se describe en Agregar Firebase a su proyecto de JavaScript .

Preocupaciones de seguridad

La autenticación usando solo un número de teléfono, si bien es conveniente, es menos segura que los otros métodos disponibles, porque la posesión de un número de teléfono se puede transferir fácilmente entre usuarios. Además, en dispositivos con múltiples perfiles de usuario, cualquier usuario que pueda recibir mensajes SMS puede iniciar sesión en una cuenta usando el número de teléfono del dispositivo.

Si usa el inicio de sesión basado en el número de teléfono en su aplicación, debe ofrecerlo junto con métodos de inicio de sesión más seguros e informar a los usuarios sobre las ventajas y desventajas de seguridad del uso del inicio de sesión con el número de teléfono.

Habilite el inicio de sesión con número de teléfono para su proyecto de Firebase

Para que los usuarios inicien sesión por SMS, primero debe habilitar el método de inicio de sesión con número de teléfono para su proyecto de Firebase:

  1. En Firebase console , abra la sección Autenticación .
  2. En la página Método de inicio de sesión , habilite el método de inicio de sesión Número de teléfono .
  3. En la misma página, si el dominio que alojará su aplicación no aparece en la sección de dominios de redirección de OAuth , agregue su dominio.

La cuota de solicitud de inicio de sesión del número de teléfono de Firebase es lo suficientemente alta como para que la mayoría de las aplicaciones no se vean afectadas. Sin embargo, si necesita iniciar sesión en un volumen muy alto de usuarios con autenticación telefónica, es posible que deba actualizar su plan de precios. Consulte la página de precios .

Configurar el verificador reCAPTCHA

Antes de que pueda iniciar sesión en los usuarios con sus números de teléfono, debe configurar el verificador reCAPTCHA de Firebase. Firebase usa reCAPTCHA para evitar abusos, por ejemplo, al garantizar que la solicitud de verificación del número de teléfono provenga de uno de los dominios permitidos de su aplicación.

No necesita configurar manualmente un cliente reCAPTCHA; cuando usas el objeto RecaptchaVerifier del SDK de Firebase, Firebase crea y maneja automáticamente las claves y los secretos de cliente necesarios.

El objeto RecaptchaVerifier admite reCAPTCHA invisible , que a menudo puede verificar al usuario sin requerir ninguna acción del usuario, así como el widget reCAPTCHA, que siempre requiere la interacción del usuario para completarse correctamente.

El reCAPTCHA renderizado subyacente se puede localizar según las preferencias del usuario actualizando el código de idioma en la instancia de Auth antes de renderizar el reCAPTCHA. La localización antes mencionada también se aplicará al mensaje SMS enviado al usuario, que contiene el código de verificación.

Web version 9

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();

Web version 8

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();

Usar reCAPTCHA invisible

Para usar un reCAPTCHA invisible, cree un objeto RecaptchaVerifier con el parámetro de size establecido en invisible , especificando el ID del botón que envía su formulario de inicio de sesión. Por ejemplo:

Web version 9

import { getAuth, RecaptchaVerifier } from "firebase/auth";

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
}, auth);

Web version 8

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
});

Utilice el widget reCAPTCHA

Para usar el widget reCAPTCHA visible, cree un elemento en su página para contener el widget y luego cree un objeto RecaptchaVerifier , especificando la ID del contenedor cuando lo haga. Por ejemplo:

Web version 9

import { getAuth, RecaptchaVerifier } from "firebase/auth";

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {}, auth);

Web version 8

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');

Opcional: especifique los parámetros de reCAPTCHA

Opcionalmente, puede establecer funciones de devolución de llamada en el objeto RecaptchaVerifier que se llaman cuando el usuario resuelve el reCAPTCHA o el reCAPTCHA caduca antes de que el usuario envíe el formulario:

Web version 9

import { getAuth, RecaptchaVerifier } from "firebase/auth";

const auth = getAuth();
window.recaptchaVerifier = new RecaptchaVerifier('recaptcha-container', {
  'size': 'normal',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': () => {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
}, auth);

Web version 8

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
  'size': 'normal',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    // ...
  },
  'expired-callback': () => {
    // Response expired. Ask user to solve reCAPTCHA again.
    // ...
  }
});

Opcional: renderice previamente el reCAPTCHA

Si desea renderizar previamente el reCAPTCHA antes de enviar una solicitud de inicio de sesión, llame a render :

Web version 9

recaptchaVerifier.render().then((widgetId) => {
  window.recaptchaWidgetId = widgetId;
});

Web version 8

recaptchaVerifier.render().then((widgetId) => {
  window.recaptchaWidgetId = widgetId;
});

Después de que se resuelve el render , obtienes el ID del widget de reCAPTCHA, que puedes usar para realizar llamadas a la API de reCAPTCHA :

Web version 9

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

Web version 8

const recaptchaResponse = grecaptcha.getResponse(recaptchaWidgetId);

Enviar un código de verificación al teléfono del usuario

Para iniciar el inicio de sesión con el número de teléfono, presente al usuario una interfaz que le solicite que proporcione su número de teléfono y luego llame a signInWithPhoneNumber para solicitar que Firebase envíe un código de autenticación al teléfono del usuario por SMS:

  1. Obtener el número de teléfono del usuario.

    Los requisitos legales varían, pero como práctica recomendada y para establecer expectativas para sus usuarios, debe informarles que si usan el inicio de sesión por teléfono, pueden recibir un mensaje SMS para verificación y se aplican tarifas estándar.

  2. Llame signInWithPhoneNumber , pasándole el número de teléfono del usuario y el RecaptchaVerifier que creó anteriormente.

    Web version 9

    import { getAuth, signInWithPhoneNumber } from "firebase/auth";
    
    const phoneNumber = getPhoneNumberFromUserInput();
    const appVerifier = window.recaptchaVerifier;
    
    const auth = getAuth();
    signInWithPhoneNumber(auth, phoneNumber, appVerifier)
        .then((confirmationResult) => {
          // SMS sent. Prompt user to type the code from the message, then sign the
          // user in with confirmationResult.confirm(code).
          window.confirmationResult = confirmationResult;
          // ...
        }).catch((error) => {
          // Error; SMS not sent
          // ...
        });

    Web version 8

    const phoneNumber = getPhoneNumberFromUserInput();
    const appVerifier = window.recaptchaVerifier;
    firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
        .then((confirmationResult) => {
          // SMS sent. Prompt user to type the code from the message, then sign the
          // user in with confirmationResult.confirm(code).
          window.confirmationResult = confirmationResult;
          // ...
        }).catch((error) => {
          // Error; SMS not sent
          // ...
        });
    Si signInWithPhoneNumber genera un error, restablezca el reCAPTCHA para que el usuario pueda volver a intentarlo:
    grecaptcha.reset(window.recaptchaWidgetId);
    
    // Or, if you haven't stored the widget ID:
    window.recaptchaVerifier.render().then(function(widgetId) {
      grecaptcha.reset(widgetId);
    });
    

El método signInWithPhoneNumber emite el desafío reCAPTCHA al usuario y, si el usuario supera el desafío, solicita que Firebase Authentication envíe un mensaje SMS que contenga un código de verificación al teléfono del usuario.

Iniciar sesión del usuario con el código de verificación

Después de que la llamada a signInWithPhoneNumber tenga éxito, solicite al usuario que escriba el código de verificación que recibió por SMS. Luego, inicie sesión con el usuario pasando el código al método de confirm del objeto ConfirmationResult que se pasó al controlador de cumplimiento de signInWithPhoneNumber (es decir, su bloque then ). Por ejemplo:

Web version 9

const code = getCodeFromUserInput();
confirmationResult.confirm(code).then((result) => {
  // User signed in successfully.
  const user = result.user;
  // ...
}).catch((error) => {
  // User couldn't sign in (bad verification code?)
  // ...
});

Web version 8

const code = getCodeFromUserInput();
confirmationResult.confirm(code).then((result) => {
  // User signed in successfully.
  const user = result.user;
  // ...
}).catch((error) => {
  // User couldn't sign in (bad verification code?)
  // ...
});

Si la llamada para confirm tuvo éxito, el usuario inició sesión correctamente.

Obtener el objeto AuthCredential intermedio

Si necesita obtener un objeto AuthCredential para la cuenta del usuario, pase el código de verificación del resultado de la confirmación y el código de verificación a PhoneAuthProvider.credential en lugar de llamar a confirm :

var credential = firebase.auth.PhoneAuthProvider.credential(confirmationResult.verificationId, code);

Luego, puede iniciar sesión en el usuario con la credencial:

firebase.auth().signInWithCredential(credential);

Prueba con números de teléfono ficticios

Puede configurar números de teléfono ficticios para el desarrollo a través de la consola de Firebase. Las pruebas con números de teléfono ficticios brindan estos beneficios:

  • Pruebe la autenticación del número de teléfono sin consumir su cuota de uso.
  • Pruebe la autenticación del número de teléfono sin enviar un mensaje SMS real.
  • Ejecute pruebas consecutivas con el mismo número de teléfono sin verse limitado. Esto minimiza el riesgo de rechazo durante el proceso de revisión de la tienda de aplicaciones si el revisor usa el mismo número de teléfono para la prueba.
  • Pruebe fácilmente en entornos de desarrollo sin ningún esfuerzo adicional, como la capacidad de desarrollar en un simulador de iOS o un emulador de Android sin Google Play Services.
  • Escriba pruebas de integración sin que lo bloqueen los controles de seguridad que normalmente se aplican a números de teléfono reales en un entorno de producción.

Los números de teléfono ficticios deben cumplir estos requisitos:

  1. Asegúrese de utilizar números de teléfono que sean realmente ficticios y que aún no existan. Firebase Authentication no le permite establecer números de teléfono existentes utilizados por usuarios reales como números de prueba. Una opción es usar números con el prefijo 555 como números de teléfono de prueba de EE. UU., por ejemplo: +1 650-555-3434
  2. Los números de teléfono deben tener el formato correcto para la longitud y otras restricciones. Seguirán pasando por la misma validación que el número de teléfono de un usuario real.
  3. Puede agregar hasta 10 números de teléfono para el desarrollo.
  4. Use números de teléfono/códigos de prueba que sean difíciles de adivinar y cámbielos con frecuencia.

Crear números de teléfono y códigos de verificación ficticios

  1. En Firebase console , abra la sección Autenticación .
  2. En la pestaña Método de inicio de sesión , habilite el proveedor de teléfono si aún no lo ha hecho.
  3. Abra el menú Números de teléfono para probar acordeón.
  4. Proporcione el número de teléfono que desea probar, por ejemplo: +1 650-555-3434 .
  5. Proporcione el código de verificación de 6 dígitos para ese número específico, por ejemplo: 654321 .
  6. Agrega el número. Si es necesario, puede eliminar el número de teléfono y su código pasando el cursor sobre la fila correspondiente y haciendo clic en el icono de la papelera.

Prueba manual

Puede comenzar directamente a usar un número de teléfono ficticio en su aplicación. Esto le permite realizar pruebas manuales durante las etapas de desarrollo sin encontrarse con problemas de cuota o limitaciones. También puede probar directamente desde un simulador de iOS o un emulador de Android sin tener instalados los servicios de Google Play.

Cuando proporciona el número de teléfono ficticio y envía el código de verificación, no se envía ningún SMS real. En su lugar, debe proporcionar el código de verificación configurado previamente para completar el inicio de sesión.

Al completar el inicio de sesión, se crea un usuario de Firebase con ese número de teléfono. El usuario tiene el mismo comportamiento y propiedades que un usuario de número de teléfono real y puede acceder a Realtime Database/Cloud Firestore y otros servicios de la misma manera. El token de identificación acuñado durante este proceso tiene la misma firma que un usuario de número de teléfono real.

Otra opción es establecer un rol de prueba a través de reclamos personalizados en estos usuarios para diferenciarlos como usuarios falsos si desea restringir aún más el acceso.

Pruebas de integración

Además de las pruebas manuales, Firebase Authentication proporciona API para ayudar a escribir pruebas de integración para las pruebas de autenticación telefónica. Estas API deshabilitan la verificación de aplicaciones al deshabilitar el requisito de reCAPTCHA en la web y las notificaciones automáticas silenciosas en iOS. Esto hace que las pruebas de automatización sean posibles en estos flujos y más fáciles de implementar. Además, ayudan a brindar la capacidad de probar flujos de verificación instantánea en Android.

En la web, establezca appVerificationDisabledForTesting en true antes de representar firebase.auth.RecaptchaVerifier . Esto resuelve el reCAPTCHA automáticamente, permitiéndole pasar el número de teléfono sin resolverlo manualmente. Tenga en cuenta que aunque reCAPTCHA esté deshabilitado, el uso de un número de teléfono no ficticio seguirá sin completar el inicio de sesión. Solo se pueden usar números de teléfono ficticios con esta API.

// Turn off phone auth app verification.
firebase.auth().settings.appVerificationDisabledForTesting = true;

var phoneNumber = "+16505554567";
var testVerificationCode = "123456";

// This will render a fake reCAPTCHA as appVerificationDisabledForTesting is true.
// This will resolve after rendering without app verification.
var appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
// signInWithPhoneNumber will call appVerifier.verify() which will resolve with a fake
// reCAPTCHA response.
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
    .then(function (confirmationResult) {
      // confirmationResult can resolve with the fictional testVerificationCode above.
      return confirmationResult.confirm(testVerificationCode)
    }).catch(function (error) {
      // Error; SMS not sent
      // ...
    });

Los verificadores de aplicaciones reCAPTCHA simulados visibles e invisibles se comportan de manera diferente cuando la verificación de aplicaciones está deshabilitada:

  • ReCAPTCHA visible : cuando el reCAPTCHA visible se procesa a través appVerifier.render() , se resuelve automáticamente después de una fracción de segundo de retraso. Esto es equivalente a que un usuario haga clic en reCAPTCHA inmediatamente después de renderizar. La respuesta de reCAPTCHA caducará después de un tiempo y luego se resolverá automáticamente nuevamente.
  • ReCAPTCHA invisible : el reCAPTCHA invisible no se resuelve automáticamente al renderizar y, en cambio, lo hace en la llamada appVerifier.verify() o cuando se hace clic en el botón ancla de reCAPTCHA después de una fracción de segundo de retraso. Del mismo modo, la respuesta caducará después de un tiempo y solo se resolverá automáticamente después de la llamada appVerifier.verify() o cuando se haga clic nuevamente en el botón ancla de reCAPTCHA.

Cada vez que se resuelve un reCAPTCHA simulado, la función de devolución de llamada correspondiente se activa como se esperaba con la respuesta falsa. Si también se especifica una devolución de llamada de vencimiento, se activará al vencimiento.

Próximos pasos

Después de que un usuario inicia sesión por primera vez, se crea una nueva cuenta de usuario y se vincula a las credenciales (es decir, el nombre de usuario y la contraseña, el número de teléfono o la información del proveedor de autenticación) con las que el usuario inició sesión. Esta nueva cuenta se almacena como parte de su proyecto de Firebase y se puede usar para identificar a un usuario en cada aplicación de su proyecto, independientemente de cómo inicie sesión el usuario.

  • En sus aplicaciones, la forma recomendada de conocer el estado de autenticación de su usuario es establecer un observador en el objeto Auth . A continuación, puede obtener la información básica del perfil del User del objeto Usuario. Consulte Administrar usuarios .

  • En sus Reglas de seguridad de Firebase Realtime Database y Cloud Storage, puede obtener el ID de usuario único del usuario que inició sesión de la variable auth y usarlo para controlar a qué datos puede acceder un usuario.

Puede permitir que los usuarios inicien sesión en su aplicación utilizando varios proveedores de autenticación vinculando las credenciales del proveedor de autenticación a una cuenta de usuario existente.

Para cerrar la sesión de un usuario, llame a signOut :

Web version 9

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web version 8

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});