Se usó la API de Cloud Translation para traducir esta página.
Switch to English

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 Google Cloud Console, selecciona o crea un proyecto de Google Cloud.

    Ir al selector de proyecto

  3. Asegúrate de que la facturación esté habilitada para tu proyecto de Cloud. Descubre cómo confirmar que tienes habilitada la facturación en un proyecto.

  4. Habilita Identity Platform y agrega el SDK de cliente a tu app. Consulta la Guía de inicio rápido para aprender a hacerlo.

Configura el proveedor

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

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

  3. Ingresa los siguientes detalles:

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

    2. El ID de cliente del proveedor.

    3. 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.

  4. 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.

  5. 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]/__/auth/handler.

  6. Haga clic en Save.

Usuarios que acceden

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

  • Usar un flujo de OAuth implícito. Este enfoque completa el protocolo de enlace de OAuth por ti.

  • Usar el token de ID del proveedor de OIDC. Este método 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..

    const provider = new firebase.auth.OAuthProvider('oidc.myProvider');
    
  2. Inicia el flujo de acceso. Puedes elegir usar una ventana emergente o un redireccionamiento.

    Para mostrar una ventana emergente, llama a signInWithPopup():

    firebase.auth().signInWithPopup(provider)
      .then((result) => {
        // 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.
      });
    

    Redirect

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

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

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

    // On return.
    firebase.auth().getRedirectResult()
      .then((result) => {
        // 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.
      });
    

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 permitir que un usuario acceda directamente con un token de ID de OIDC, haz lo siguiente:

  1. Inicializa una instancia OAuthProvider con el ID del proveedor que configuraste en la sección anterior. El ID del proveedor debe comenzar con oidc.. Luego, crea una OAuthCredential:

    const provider = new firebase.auth.OAuthProvider('oidc.myProvider');
    const credential = provider.credential(oidcIdToken, null);
    
  2. Llama a signInWithCredential() para permitir que el usuario acceda:

    firebase.auth().signInWithCredential(credential)
      .then((result) => {
        // user now has a odic.myProvider UserInfo in providerData.
      })
      .catch((error) => {
        // Handle error.
      });
    

Vincula cuentas de usuario

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

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

// Link with a popup.
firebase.auth().currentUser.linkWithPopup(provider)
    // currentUser.providerData now has an additional entry for this provider.
  }).catch((error) => {
    // Handle error.
  });

Vuelve a autenticar usuarios

Algunas operaciones sensibles, como la actualización del correo electrónico o la contraseña de un usuario, requieren que el usuario haya accedido recientemente. Para permitir que un usuario vuelva a acceder, llama a reauthenticateWithPopup() o a reauthenticateWithRedirect(). Por ejemplo:

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

// Reauthenticate with a popup.
firebase.auth().currentUser.reauthenticateWithPopup(provider)
  .then((result) => {
    // Get the updated ID token.
    return result.user.getIdTokenResult();
  })
  .then((idTokenResult) => {
    // idTokenResult.authTime should be updated to reflect recent sign-in status.
    // idTokenResult.token has the latest ID token.
  })
  .catch((error) => {
    // Handle error.
  });

¿Qué sigue?