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

Autenticar usando OpenID Connect en aplicaciones web

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

Si actualizó a Firebase Authentication con Identity Platform, puede autenticar a sus usuarios con Firebase mediante el proveedor compatible con OpenID Connect (OIDC) de su elección. Esto hace posible el uso de proveedores de identidad que no son compatibles de forma nativa con Firebase.

Antes de que empieces

Para que los usuarios inicien sesión con un proveedor de OIDC, primero debe recopilar cierta información del proveedor:

  • ID de cliente : una cadena exclusiva del proveedor que identifica su aplicación. Su proveedor puede asignarle una ID de cliente diferente para cada plataforma que admita. Este es uno de los valores del reclamo aud en tokens de identificación emitidos por su proveedor.

  • Secreto del cliente : una cadena secreta que el proveedor utiliza para confirmar la propiedad de un ID de cliente. Para cada ID de cliente, necesitará un secreto de cliente coincidente. (Este valor es obligatorio solo si está utilizando el flujo de código de autenticación , que es muy recomendable).

  • Emisor : una cadena que identifica a su proveedor. Este valor debe ser una URL que, cuando se agrega con /.well-known/openid-configuration , sea la ubicación del documento de detección de OIDC del proveedor. Por ejemplo, si el emisor es https://auth.example.com , el documento de descubrimiento debe estar disponible en https://auth.example.com/.well-known/openid-configuration .

Una vez que tenga la información anterior, habilite OpenID Connect como proveedor de inicio de sesión para su proyecto de Firebase:

  1. Agregue Firebase a su proyecto de JavaScript .

  2. Si no actualizó a Firebase Authentication con Identity Platform, hágalo. La autenticación de OpenID Connect solo está disponible en proyectos actualizados.

  3. En la página Proveedores de inicio de sesión de Firebase console, haga clic en Agregar nuevo proveedor y luego haga clic en OpenID Connect .

  4. Seleccione si utilizará el flujo de código de autorización o el flujo de concesión implícita .

    Debe usar siempre el flujo de código si su proveedor lo admite . El flujo implícito es menos seguro y se desaconseja su uso.

  5. Asigne un nombre a este proveedor. Tenga en cuenta el ID de proveedor que se genera: algo así como oidc.example-provider . Necesitará este ID cuando agregue el código de inicio de sesión a su aplicación.

  6. Especifique su ID de cliente y secreto de cliente, y la cadena de emisor de su proveedor. Estos valores deben coincidir exactamente con los valores que su proveedor le asignó.

  7. Guarde sus cambios.

Manejar el flujo de inicio de sesión con el SDK de Firebase

La forma más fácil de autenticar a sus usuarios con Firebase mediante su proveedor OIDC es manejar todo el flujo de inicio de sesión con el SDK de Firebase.

Para manejar el flujo de inicio de sesión con el SDK de JavaScript de Firebase, sigue estos pasos:

  1. Cree una instancia de OAuthProvider con el ID de proveedor que obtuvo en la consola de Firebase.

    Web version 9

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('oidc.example-provider');
    

    Web version 8

    var provider = new firebase.auth.OAuthProvider('oidc.example-provider');
    
  2. Opcional : especifique parámetros de OAuth personalizados adicionales que desee enviar con la solicitud de OAuth.

    Web version 9

    provider.setCustomParameters({
      // Target specific email with login hint.
      login_hint: 'user@example.com'
    });
    

    Web version 8

    provider.setCustomParameters({
      // Target specific email with login hint.
      login_hint: 'user@example.com'
    });
    

    Consulte con su proveedor los parámetros que admite. Tenga en cuenta que no puede pasar parámetros requeridos por Firebase con setCustomParameters . Estos parámetros son client_id , response_type , redirect_uri , state , scope y response_mode .

  3. Opcional : especifique ámbitos de OAuth 2.0 adicionales más allá del perfil básico que desee solicitar al proveedor de autenticación.

    Web version 9

    provider.addScope('mail.read');
    provider.addScope('calendars.read');
    

    Web version 8

    provider.addScope('mail.read');
    provider.addScope('calendars.read');
    

    Consulte con su proveedor los ámbitos que admite.

  4. Autenticarse con Firebase mediante el objeto del proveedor de OAuth.

    Puede redirigir al usuario a la página de inicio de sesión del proveedor o abrir la página de inicio de sesión en una ventana emergente del navegador.

    Flujo de redireccionamiento

    Redirige a la página de inicio de sesión del proveedor llamando a signInWithRedirect() :

    Web version 9

    import { getAuth, signInWithRedirect } from "firebase/auth";
    
    const auth = getAuth();
    signInWithRedirect(auth, provider);
    

    Web version 8

    firebase.auth().signInWithRedirect(provider);
    

    Después de que el usuario complete el inicio de sesión y regrese a su aplicación, puede obtener el resultado del inicio de sesión llamando a getRedirectResult() .

    Web version 9

    import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";
    
    const auth = getAuth();
    getRedirectResult(auth)
      .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.
    
        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });
    

    Web version 8

    firebase.auth().getRedirectResult()
      .then((result) => {
        // IdP data available in result.additionalUserInfo.profile.
        // ...
    
        /** @type {firebase.auth.OAuthCredential} */
        var credential = result.credential;
    
        // OAuth access and id tokens can also be retrieved:
        var accessToken = credential.accessToken;
        var idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });
    

    Flujo emergente

    Web version 9

    import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
    
    const auth = getAuth();
    signInWithPopup(auth, provider)
      .then((result) => {
        // User is signed in.
        // IdP data available using getAdditionalUserInfo(result)
    
        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });
    

    Web version 8

    firebase.auth().signInWithPopup(provider)
      .then((result) => {
        // IdP data available in result.additionalUserInfo.profile.
        // ...
    
        /** @type {firebase.auth.OAuthCredential} */
        var credential = result.credential;
    
        // OAuth access and id tokens can also be retrieved:
        var accessToken = credential.accessToken;
        var idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });
    
  5. Si bien los ejemplos anteriores se enfocan en los flujos de inicio de sesión, puede usar el mismo patrón para vincular un proveedor OIDC a un usuario existente usando linkWithRedirect() y linkWithPopup() , y volver a autenticar a un usuario con reauthenticateWithRedirect() y reauthenticateWithPopup() , que se puede usar para recuperar credenciales nuevas para operaciones confidenciales que requieren un inicio de sesión reciente.

Manejar el flujo de inicio de sesión manualmente

Si ya implementó el flujo de inicio de sesión de OpenID Connect en su aplicación, puede usar el token de ID directamente para autenticarse con Firebase:

Web version 9

import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
signInWithCredential(getAuth(), credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });

Web version 8

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
firebase.auth().signInWithCredential(credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });