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 proyectos

  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. En la página del selector de proyectos de Google Cloud Console, selecciona o crea un proyecto de Google Cloud.

    Ir al selector de proyectos

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

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

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. Se verá de la siguiente manera: https://example.com. Identity Platform usa esta URL para ubicar el documento de descubrimiento de OIDC (que se suele encontrar en /.well-known/openid-configuration), que especifica los extremos y las claves públicas del OAuth del proveedor.

    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.

  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. Haga clic en Save.

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

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

    Redireccionamiento

    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?