Permitir que los usuarios accedan con OIDC

En este documento, se muestra cómo usar Identity Platform para que los usuarios accedan con un proveedor de OpenID Connect (OIDC).

Antes de comenzar

1. Accede a tu cuenta de Google Cloud. Si eres nuevo en Google Cloud, crea una cuenta para evaluar el rendimiento de nuestros productos en situaciones reales. Los clientes nuevos también obtienen $300 en créditos gratuitos para ejecutar, probar y, además, implementar cargas de trabajo.

2. En la página del selector de proyectos de la consola de Google Cloud, selecciona o crea un proyecto de Google Cloud.

   Nota: Si no planeas conservar los recursos que creaste durante este procedimiento, crea un proyecto en lugar de seleccionar uno existente. Cuando termines, puedes borrar el proyecto y quitar todos los recursos asociados con él.

   Ir al selector de proyectos

3. Asegúrate de que la facturación esté habilitada para tu proyecto de Google Cloud.

4. En la página del selector de proyectos de la consola de Google Cloud, selecciona o crea un proyecto de Google Cloud.

   Nota: Si no planeas conservar los recursos que creaste durante este procedimiento, crea un proyecto en lugar de seleccionar uno existente. Cuando termines, puedes borrar el proyecto y quitar todos los recursos asociados con él.

   Ir al selector de proyectos

5. Asegúrate de que la facturación esté habilitada para tu proyecto de Google Cloud.

6. Habilita Identity Platform y agrega el SDK cliente a tu app. Consulta la Guía de inicio rápido para obtener información sobre cómo hacerlo.

Configura el proveedor

1. Ve a la página Proveedores de identidad en la consola de Google Cloud.
   Ir a la página de proveedores de identidad
   

2. Haz clic en Agregar un proveedor y selecciona OpenID Connect en la lista.

Flujo de código de autorización

1. Ingresa los siguientes detalles para habilitar el flujo de código de autorización:

   1. Selecciona Flujo de código en la sección Elige el tipo de otorgamiento.

   2. El Nombre del proveedor. Puede ser el mismo que el ID del proveedor o un nombre personalizado. Si ingresas un nombre personalizado, haz clic en Editar junto a ID del proveedor para especificar el ID (que debe comenzar con oidc.).

   3. El ID de cliente del proveedor.

   4. El emisor del proveedor. Debería verse similar a https://example.com. Identity Platform usa esta URL para ubicar el documento de descubrimiento de OIDC (por lo general, se encuentra en /.well-known/openid-configuration), que especifica los extremos de OAuth y las claves públicas del proveedor.

      Nota: Si tu proveedor de OIDC no cumple con la especificación de OIDC para el descubrimiento, no funcionará con Identity Platform.

   5. El secreto del cliente del proveedor.

2. Agrega tu app a la lista de Dominios autorizados. Por ejemplo, si la URL de acceso de tu app es https://example.com/login, agrega example.com.

3. Configura la URL de devolución de llamadas de Identity Platform como una URL de redireccionamiento con tu proveedor de OIDC. La URL debe ser similar a https://[PROJECT-ID].firebaseapp.com/__/auth/handler.

4. Haz clic en Guardar.

Flujo implícito

1. Ingresa los siguientes detalles para habilitar el flujo implícito:

   1. Selecciona Flujo implícito en la sección Elige el tipo de otorgamiento.

   2. El Nombre del proveedor. Puede ser el mismo que el ID del proveedor o un nombre personalizado. Si ingresas un nombre personalizado, haz clic en Editar junto a ID del proveedor para especificar el ID (que debe comenzar con oidc.).

   3. El ID de cliente del proveedor.

   4. El emisor del proveedor. Debería ser similar a https://example.com. Identity Platform usa esta URL para localizar el documento de descubrimiento de OIDC (que se suele encontrar en /.well-known/openid-configuration), que especifica las claves públicas y los extremos de OAuth del proveedor.

      Nota: Si tu proveedor de OIDC no cumple con la especificación de OIDC para el descubrimiento, no funcionará con Identity Platform.

2. Agrega tu app a la lista de Dominios autorizados. Por ejemplo, si la URL de acceso de tu app es https://example.com/login, agrega example.com.

3. Configura la URL de devolución de llamadas de Identity Platform como una URL de redireccionamiento con tu proveedor de OIDC. La URL debe ser similar a https://[PROJECT-ID].firebaseapp.com/__/auth/handler.

4. Haz clic en Guardar.

Usuarios que acceden

Existen dos maneras de permitir que los usuarios accedan con OIDC:

• Usa el flujo de OAuth. Este enfoque completa el protocolo de enlace de OAuth. Según la selección del flujo de código de autorización o flujo implícito en el paso de proveedor de configuración, el servidor de GCIP elige el flujo deseado para comunicarse con el proveedor de identidad.

• Usar el token de ID del proveedor de OIDC. En este método se supone que ya tienes un token de OIDC disponible.

Acceso de usuarios mediante OAuth

Para acceder mediante OAuth, haz lo siguiente:

1. Crea una instancia OAuthProvider con el ID del proveedor que configuraste en la sección anterior. El ID del proveedor debe comenzar con oidc..

   Web versión 9

   Obtén más información sobre la API modular web que admite la eliminación de código no utilizado y realiza la actualización desde la API con espacio de nombres.

   import { OAuthProvider } from "firebase/auth";
   
   const provider = new OAuthProvider("oidc.myProvider");
   auth_oidc_provider_create.js

   Web versión 8

   const provider = new firebase.auth.OAuthProvider('oidc.myProvider');
   oidc.js

2. Inicia el flujo de acceso. Puedes elegir usar una ventana emergente o un redireccionamiento.

   Ventana emergente

   Web versión 9

   Obtén más información sobre la API modular web que admite la eliminación de código no utilizado y realiza la actualización desde la API con espacio de nombres.

   import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   signInWithPopup(auth, provider)
     .then((result) => {
       // User is signed in.
       const credential = OAuthProvider.credentialFromResult(result);
       // This gives you an access token for the OIDC provider. You can use it to directly interact with that provider
     }).catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
       // The email of the user's account used.
       const email = error.customData.email;
       // The AuthCredential type that was used.
       const credential = OAuthProvider.credentialFromError(error);
       // Handle / display error.
       // ...
     });
   auth_oidc_signin_popup.js

   Web versión 8

   firebase.auth().signInWithPopup(provider)
     .then((result) => {
       // User is signed in.
       // result.credential is a firebase.auth().OAuthCredential object.
       // result.credential.providerId is equal to 'oidc.myProvider'.
       // result.credential.idToken is the OIDC provider's ID token.
     })
     .catch((error) => {
       // Handle error.
     });
   oidc.js

   Redireccionamiento

   Para redireccionar a una página de acceso, llama a signInWithRedirect():

   Web versión 9

   Obtén más información sobre la API modular web que admite la eliminación de código no utilizado y realiza la actualización desde la API con espacio de nombres.

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

   Web versión 8

   firebase.auth().signInWithRedirect(provider).catch((error) => {
     // Handle error.
   });
   oidc.js

   Luego, llama a getRedirectResult() para obtener los resultados cuando el usuario vuelva a tu app:

   Web versión 9

   Obtén más información sobre la API modular web que admite la eliminación de código no utilizado y realiza la actualización desde la API con espacio de nombres.

   import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   getRedirectResult(auth)
     .then((result) => {
       // User is signed in.
       const credential = OAuthProvider.credentialFromResult(result);
       // This gives you an access token for the OIDC provider. You can use it to directly interact with that provider
     })
     .catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
       // The email of the user's account used.
       const email = error.customData.email;
       // The AuthCredential type that was used.
       const credential = OAuthProvider.credentialFromError(error);
       // Handle / display error.
       // ...
     });
   auth_oidc_signin_redirect_result.js

   Web versión 8

   // On return.
   firebase.auth().getRedirectResult()
     .then((result) => {
       // User is signed in.
       // result.credential is a firebase.auth().OAuthCredential object.
       // result.credential.providerId is equal to 'oidc.myProvider'.
       // result.credential.idToken is the OIDC provider's ID token.
     })
     .catch((error) => {
       // Handle / display error.
       // ...
     });
   oidc.js

Cuando finalice cualquiera de los flujos, puedes obtener el token de ID de OIDC mediante el uso del campo result.credential.idToken.

Permite que los usuarios accedan directamente

Para hacer que un usuario acceda directamente con un token de ID de OIDC, haz lo siguiente:

1. Inicializa una instancia de OAuthProvider con el ID de proveedor que configuraste en la sección anterior. El ID del proveedor debe comenzar con oidc.. Luego, crea un OAuthCredential y llama a signInWithCredential() para que el usuario acceda.

   Web versión 9

   Obtén más información sobre la API modular web que admite la eliminación de código no utilizado y realiza la actualización desde la API con espacio de nombres.

   import { getAuth, OAuthProvider, signInWithCredential } from "firebase/auth";
   
   const auth = getAuth();
   const credential = provider.credential({
     idToken: oidcIdToken,
   });
   signInWithCredential(auth, credential)
     .then((result) => {
       // User is signed in.
       const newCredential = OAuthProvider.credentialFromResult(result);
       // This gives you a new access token for the OIDC provider. You can use it to directly interact with that provider.
     })
     .catch((error) => {
       // Handle Errors here.
       const errorCode = error.code;
       const errorMessage = error.message;
       // The email of the user's account used.
       const email = error.customData.email;
       // The AuthCredential type that was used.
       const credential = OAuthProvider.credentialFromError(error);
       // Handle / display error.
       // ...
     });
   auth_oidc_direct_sign_in.js

   Web versión 8

   const credential = provider.credential(oidcIdToken, null);
   
   firebase.auth().signInWithCredential(credential)
     .then((result) => {
       // User is signed in.
       // User now has a odic.myProvider UserInfo in providerData.
     })
     .catch((error) => {
       // Handle / display error.
       // ...
     });
   oidc.js

Vincula cuentas de usuario

Si un usuario ya accedió a tu app con un método diferente (como correo electrónico y contraseña), puedes vincular su cuenta existente al proveedor de OIDC con linkWithPopup() o linkWithRedirect(). Por ejemplo, podemos vincular una Cuenta de Google:

Web versión 9

Obtén más información sobre la API modular web que admite la eliminación de código no utilizado y realiza la actualización desde la API con espacio de nombres.

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

const auth = getAuth();
linkWithPopup(auth.currentUser, provider).then((result) => {
  // Accounts successfully linked.
  const credential = GoogleAuthProvider.credentialFromResult(result);
  const user = result.user;
  // ...
}).catch((error) => {
  // Handle Errors here.
  // ...
});
auth_link_with_popup.js

Web versión 8

auth.currentUser.linkWithPopup(provider).then((result) => {
  // Accounts successfully linked.
  var credential = result.credential;
  var user = result.user;
  // ...
}).catch((error) => {
  // Handle Errors here.
  // ...
});
link-multiple-accounts.js

¿Qué sigue?

• Permitir que los usuarios accedan con SAML
• Mostrar un dominio personalizado durante el acceso
• Administra proveedores de OIDC y SAML de manera programática