Autenticar usando OpenID Connect en aplicaciones web

Si actualizó a Firebase Authentication con Identity Platform, puede autenticar a sus usuarios con Firebase utilizando el proveedor compatible con OpenID Connect (OIDC) de su elección. Esto hace posible utilizar proveedores de identidades que Firebase no admite de forma nativa.

Antes de que empieces

Para iniciar sesión como usuario utilizando un proveedor OIDC, primero debe recopilar cierta información del proveedor:

  • ID de cliente : una cadena exclusiva del proveedor que identifica su aplicación. Su proveedor podría 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 solo es obligatorio si utiliza el flujo de código de autenticación , lo cual es muy recomendable).

  • Emisor : una cadena que identifica a su proveedor. Este valor debe ser una URL que, cuando se añade /.well-known/openid-configuration , sea la ubicación del documento de descubrimiento 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. Agrega Firebase a tu proyecto de JavaScript .

  2. Si no has actualizado a Firebase Authentication con Identity Platform, hazlo. La autenticación 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ícito .

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

  5. Dé un nombre a este proveedor. Tenga en cuenta el ID del proveedor que se genera: algo así como oidc.example-provider . Necesitará esta identificación 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 del emisor de su proveedor. Estos valores deben coincidir exactamente con los valores que le asignó su proveedor.

  7. Guarde sus cambios.

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

La forma más sencilla de autenticar a sus usuarios con Firebase utilizando 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 utilizando el ID de proveedor que obtuvo en Firebase console.

    API modular web

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('oidc.example-provider');

    API con espacio de nombres web

    var provider = new firebase.auth.OAuthProvider('oidc.example-provider');

  2. Opcional : especifique parámetros OAuth personalizados adicionales que desee enviar con la solicitud OAuth.

    API modular web

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

    API con espacio de nombres web

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

    Consulte con su proveedor los parámetros que admite. Ten en cuenta que no puedes pasar los 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 alcances de OAuth 2.0 adicionales más allá del perfil básico que desea solicitar al proveedor de autenticación.

    API modular web

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

    API con espacio de nombres web

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

    Consulte con su proveedor los ámbitos que admite.

  4. Autentíquese con Firebase utilizando el objeto 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.

    Redirigir flujo

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

    API modular web

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

const auth = getAuth();
signInWithRedirect(auth, provider);

    API con espacio de nombres web

    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() .

    API modular web

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

    API con espacio de nombres web

    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

    API modular web

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

    API con espacio de nombres web

    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 centran 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 utilizar 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 implementaste el flujo de inicio de sesión de OpenID Connect en tu aplicación, puedes usar el token de ID directamente para autenticarte con Firebase:

API modular web

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

API con espacio de nombres web

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