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

Autenticarse con Firebase usando un enlace de correo electrónico en JavaScript

Puede usar Firebase Authentication para iniciar sesión en un usuario enviándole un correo electrónico que contenga un enlace, en el que puede hacer clic para iniciar sesión. En el proceso, también se verifica la dirección de correo electrónico del usuario.

Hay numerosos beneficios al iniciar sesión por correo electrónico:

  • Registro e inicio de sesión de baja fricción.
  • Menor riesgo de reutilización de contraseñas entre aplicaciones, lo que puede socavar la seguridad incluso de contraseñas bien seleccionadas.
  • La capacidad de autenticar a un usuario y al mismo tiempo verificar que el usuario es el propietario legítimo de una dirección de correo electrónico.
  • Un usuario solo necesita una cuenta de correo electrónico accesible para iniciar sesión. No se requiere la propiedad de un número de teléfono o cuenta de redes sociales.
  • Un usuario puede iniciar sesión de forma segura sin necesidad de proporcionar (o recordar) una contraseña, lo que puede resultar engorroso en un dispositivo móvil.
  • Un usuario existente que haya iniciado sesión previamente con un identificador de correo electrónico (contraseña o federado) puede actualizarse para iniciar sesión solo con el correo electrónico. Por ejemplo, un usuario que ha olvidado su contraseña aún puede iniciar sesión sin necesidad de restablecer su contraseña.

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 .

Para que los usuarios inicien sesión mediante un enlace de correo electrónico, primero debe habilitar el proveedor de correo electrónico y el método de inicio de sesión con enlace de correo electrónico para su proyecto de Firebase:

  1. En Firebase console , abra la sección Auth .
  2. En la pestaña Método de inicio de sesión , habilite el proveedor de correo electrónico/contraseña . Tenga en cuenta que el inicio de sesión con correo electrónico/contraseña debe estar habilitado para usar el inicio de sesión con enlace de correo electrónico.
  3. En la misma sección, habilite el método de inicio de sesión Enlace de correo electrónico (inicio de sesión sin contraseña) .
  4. Haga clic en Guardar .

Para iniciar el flujo de autenticación, presente al usuario una interfaz que le solicite que proporcione su dirección de correo electrónico y luego llame a sendSignInLinkToEmail para solicitar que Firebase envíe el enlace de autenticación al correo electrónico del usuario.

  1. Construya el objeto ActionCodeSettings , que proporciona a Firebase instrucciones sobre cómo construir el enlace de correo electrónico. Configure los siguientes campos:

    • url : el enlace profundo para incrustar y cualquier estado adicional que se transmita. El dominio del enlace debe agregarse en la lista de dominios autorizados de Firebase Console, que se puede encontrar yendo a la pestaña Método de inicio de sesión (Autenticación -> Método de inicio de sesión).
    • android e ios : las aplicaciones que se usarán cuando se abra el enlace de inicio de sesión en un dispositivo Android o Apple. Obtenga más información sobre cómo configurar Firebase Dynamic Links para abrir vínculos de acción de correo electrónico a través de aplicaciones móviles.
    • handleCodeInApp : establecido en verdadero. La operación de inicio de sesión siempre debe completarse en la aplicación, a diferencia de otras acciones de correo electrónico fuera de banda (restablecimiento de contraseña y verificaciones de correo electrónico). Esto se debe a que, al final del flujo, se espera que el usuario haya iniciado sesión y su estado de autenticación persista dentro de la aplicación.
    • dynamicLinkDomain : cuando se definen varios dominios de enlace dinámico personalizados para un proyecto, especifique cuál usar cuando el enlace se abra a través de una aplicación móvil específica (por ejemplo, example.page.link ). De lo contrario, el primer dominio se selecciona automáticamente.

      Web version 9

      const actionCodeSettings = {
        // URL you want to redirect back to. The domain (www.example.com) for this
        // URL must be in the authorized domains list in the Firebase Console.
        url: 'https://www.example.com/finishSignUp?cartId=1234',
        // This must be true.
        handleCodeInApp: true,
        iOS: {
          bundleId: 'com.example.ios'
        },
        android: {
          packageName: 'com.example.android',
          installApp: true,
          minimumVersion: '12'
        },
        dynamicLinkDomain: 'example.page.link'
      };

      Web version 8

      var actionCodeSettings = {
        // URL you want to redirect back to. The domain (www.example.com) for this
        // URL must be in the authorized domains list in the Firebase Console.
        url: 'https://www.example.com/finishSignUp?cartId=1234',
        // This must be true.
        handleCodeInApp: true,
        iOS: {
          bundleId: 'com.example.ios'
        },
        android: {
          packageName: 'com.example.android',
          installApp: true,
          minimumVersion: '12'
        },
        dynamicLinkDomain: 'example.page.link'
      };

    Para obtener más información sobre ActionCodeSettings, consulte la sección Passing State in Email Actions .

  2. Pide al usuario su correo electrónico.

  3. Envíe el enlace de autenticación al correo electrónico del usuario y guarde el correo electrónico del usuario en caso de que el usuario complete el inicio de sesión de correo electrónico en el mismo dispositivo.

    Web version 9

    import { getAuth, sendSignInLinkToEmail } from "firebase/auth";
    
    const auth = getAuth();
    sendSignInLinkToEmail(auth, email, actionCodeSettings)
      .then(() => {
        // The link was successfully sent. Inform the user.
        // Save the email locally so you don't need to ask the user for it again
        // if they open the link on the same device.
        window.localStorage.setItem('emailForSignIn', email);
        // ...
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        // ...
      });

    Web version 8

    firebase.auth().sendSignInLinkToEmail(email, actionCodeSettings)
      .then(() => {
        // The link was successfully sent. Inform the user.
        // Save the email locally so you don't need to ask the user for it again
        // if they open the link on the same device.
        window.localStorage.setItem('emailForSignIn', email);
        // ...
      })
      .catch((error) => {
        var errorCode = error.code;
        var errorMessage = error.message;
        // ...
      });

Preocupaciones de seguridad

Para evitar que se use un enlace de inicio de sesión para iniciar sesión como un usuario no deseado o en un dispositivo no deseado, Firebase Auth requiere que se proporcione la dirección de correo electrónico del usuario al completar el flujo de inicio de sesión. Para que el inicio de sesión sea exitoso, esta dirección de correo electrónico debe coincidir con la dirección a la que se envió originalmente el enlace de inicio de sesión.

Puede simplificar este flujo para los usuarios que abren el enlace de inicio de sesión en el mismo dispositivo en el que solicitan el enlace, almacenando su dirección de correo electrónico localmente, por ejemplo, usando localStorage o cookies, cuando envía el correo electrónico de inicio de sesión. Luego, use esta dirección para completar el flujo. No pase el correo electrónico del usuario en los parámetros de la URL de redireccionamiento y reutilícelo, ya que esto puede permitir inyecciones de sesión.

Después de completar el inicio de sesión, cualquier mecanismo de inicio de sesión no verificado anterior se eliminará del usuario y se invalidarán todas las sesiones existentes. Por ejemplo, si alguien creó anteriormente una cuenta no verificada con el mismo correo electrónico y contraseña, la contraseña del usuario se eliminará para evitar que el suplantador que reclamó la propiedad y creó esa cuenta no verificada vuelva a iniciar sesión con el correo electrónico y la contraseña no verificados.

También asegúrese de usar una URL HTTPS en producción para evitar que su enlace sea potencialmente interceptado por servidores intermediarios.

Completar inicio de sesión en una página web

El formato del enlace profundo del enlace de correo electrónico es el mismo que el formato utilizado para las acciones de correo electrónico fuera de banda (verificación de correo electrónico, restablecimiento de contraseña y revocación de cambio de correo electrónico). Firebase Auth simplifica esta verificación al proporcionar la API isSignInWithEmailLink para verificar si un enlace es un inicio de sesión con un enlace de correo electrónico.

Para completar el inicio de sesión en la página de destino, llame a signInWithEmailLink con el correo electrónico del usuario y el enlace de correo electrónico real que contiene el código único.

Web version 9

import { getAuth, isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth";

// Confirm the link is a sign-in with email link.
const auth = getAuth();
if (isSignInWithEmailLink(auth, window.location.href)) {
  // Additional state parameters can also be passed via URL.
  // This can be used to continue the user's intended action before triggering
  // the sign-in operation.
  // Get the email if available. This should be available if the user completes
  // the flow on the same device where they started it.
  let email = window.localStorage.getItem('emailForSignIn');
  if (!email) {
    // User opened the link on a different device. To prevent session fixation
    // attacks, ask the user to provide the associated email again. For example:
    email = window.prompt('Please provide your email for confirmation');
  }
  // The client SDK will parse the code from the link for you.
  signInWithEmailLink(auth, email, window.location.href)
    .then((result) => {
      // Clear email from storage.
      window.localStorage.removeItem('emailForSignIn');
      // You can access the new user via result.user
      // Additional user info profile not available via:
      // result.additionalUserInfo.profile == null
      // You can check if the user is new or existing:
      // result.additionalUserInfo.isNewUser
    })
    .catch((error) => {
      // Some error occurred, you can inspect the code: error.code
      // Common errors could be invalid email and invalid or expired OTPs.
    });
}

Web version 8

// Confirm the link is a sign-in with email link.
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
  // Additional state parameters can also be passed via URL.
  // This can be used to continue the user's intended action before triggering
  // the sign-in operation.
  // Get the email if available. This should be available if the user completes
  // the flow on the same device where they started it.
  var email = window.localStorage.getItem('emailForSignIn');
  if (!email) {
    // User opened the link on a different device. To prevent session fixation
    // attacks, ask the user to provide the associated email again. For example:
    email = window.prompt('Please provide your email for confirmation');
  }
  // The client SDK will parse the code from the link for you.
  firebase.auth().signInWithEmailLink(email, window.location.href)
    .then((result) => {
      // Clear email from storage.
      window.localStorage.removeItem('emailForSignIn');
      // You can access the new user via result.user
      // Additional user info profile not available via:
      // result.additionalUserInfo.profile == null
      // You can check if the user is new or existing:
      // result.additionalUserInfo.isNewUser
    })
    .catch((error) => {
      // Some error occurred, you can inspect the code: error.code
      // Common errors could be invalid email and invalid or expired OTPs.
    });
}

Completar el inicio de sesión en una aplicación móvil

Firebase Authentication usa Firebase Dynamic Links para enviar el vínculo del correo electrónico a un dispositivo móvil. Para completar el inicio de sesión a través de la aplicación móvil, la aplicación debe configurarse para detectar el enlace de la aplicación entrante, analizar el enlace profundo subyacente y luego completar el inicio de sesión como se hace a través del flujo web.

Para obtener más información sobre cómo manejar el inicio de sesión con un enlace de correo electrónico en una aplicación de Android, consulte la guía de Android .

Para obtener más información sobre cómo manejar el inicio de sesión con un enlace de correo electrónico en una aplicación de Apple, consulte la guía de plataformas de Apple .

También puede vincular este método de autenticación a un usuario existente. Por ejemplo, un usuario previamente autenticado con otro proveedor, como un número de teléfono, puede agregar este método de inicio de sesión a su cuenta existente.

La diferencia estaría en la segunda mitad de la operación:

Web version 9

import { getAuth, linkWithCredential, EmailAuthProvider } from "firebase/auth";

// Construct the email link credential from the current URL.
const credential = EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Link the credential to the current user.
const auth = getAuth();
linkWithCredential(auth.currentUser, credential)
  .then((usercred) => {
    // The provider is now successfully linked.
    // The phone user can now sign in with their phone number or email.
  })
  .catch((error) => {
    // Some error occurred.
  });

Web version 8

// Construct the email link credential from the current URL.
var credential = firebase.auth.EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Link the credential to the current user.
firebase.auth().currentUser.linkWithCredential(credential)
  .then((usercred) => {
    // The provider is now successfully linked.
    // The phone user can now sign in with their phone number or email.
  })
  .catch((error) => {
    // Some error occurred.
  });

Esto también se puede usar para volver a autenticar a un usuario de enlace de correo electrónico antes de ejecutar una operación confidencial.

Web version 9

import { getAuth, reauthenticateWithCredential, EmailAuthProvider } from "firebase/auth";

// Construct the email link credential from the current URL.
const credential = EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Re-authenticate the user with this credential.
const auth = getAuth();
reauthenticateWithCredential(auth.currentUser, credential)
  .then((usercred) => {
    // The user is now successfully re-authenticated and can execute sensitive
    // operations.
  })
  .catch((error) => {
    // Some error occurred.
  });

Web version 8

// Construct the email link credential from the current URL.
var credential = firebase.auth.EmailAuthProvider.credentialWithLink(
  email, window.location.href);

// Re-authenticate the user with this credential.
firebase.auth().currentUser.reauthenticateWithCredential(credential)
  .then((usercred) => {
    // The user is now successfully re-authenticated and can execute sensitive
    // operations.
  })
  .catch((error) => {
    // Some error occurred.
  });

Sin embargo, como el flujo podría terminar en un dispositivo diferente donde el usuario original no inició sesión, es posible que este flujo no se complete. En ese caso, se le puede mostrar un error al usuario para obligarlo a abrir el enlace en el mismo dispositivo. Se puede pasar algún estado en el enlace para proporcionar información sobre el tipo de operación y el uid del usuario.

En caso de que admita el inicio de sesión basado en contraseña y enlace con correo electrónico, para diferenciar el método de inicio de sesión para un usuario de contraseña/enlace, use fetchSignInMethodsForEmail . Esto es útil para los flujos de identificador primero donde primero se le pide al usuario que proporcione su correo electrónico y luego se le presenta el método de inicio de sesión:

Web version 9

import { getAuth, fetchSignInMethodsForEmail, EmailAuthProvider} from "firebase/auth";

// After asking the user for their email.
const email = window.prompt('Please provide your email');

const auth = getAuth();
fetchSignInMethodsForEmail(auth, email)
  .then((signInMethods) => {
    // This returns the same array as fetchProvidersForEmail but for email
    // provider identified by 'password' string, signInMethods would contain 2
    // different strings:
    // 'emailLink' if the user previously signed in with an email/link
    // 'password' if the user has a password.
    // A user could have both.
    if (signInMethods.indexOf(EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD) != -1) {
      // User can sign in with email/password.
    }
    if (signInMethods.indexOf(EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD) != -1) {
      // User can sign in with email/link.
    }
  })
  .catch((error) => {
    // Some error occurred, you can inspect the code: error.code
  });

Web version 8

// After asking the user for their email.
var email = window.prompt('Please provide your email');
firebase.auth().fetchSignInMethodsForEmail(email)
  .then((signInMethods) => {
    // This returns the same array as fetchProvidersForEmail but for email
    // provider identified by 'password' string, signInMethods would contain 2
    // different strings:
    // 'emailLink' if the user previously signed in with an email/link
    // 'password' if the user has a password.
    // A user could have both.
    if (signInMethods.indexOf(
            firebase.auth.EmailAuthProvider.EMAIL_PASSWORD_SIGN_IN_METHOD) != -1) {
      // User can sign in with email/password.
    }
    if (signInMethods.indexOf(
            firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD) != -1) {
      // User can sign in with email/link.
    }
  })
  .catch((error) => {
    // Some error occurred, you can inspect the code: error.code
  });

Como se describió anteriormente, el correo electrónico/contraseña y el correo electrónico/enlace se consideran el mismo firebase.auth.EmailAuthProvider (mismo PROVIDER_ID ) con diferentes métodos de inicio de sesión.

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