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
- 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.
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Asegúrate de que la facturación esté habilitada para tu proyecto de Google Cloud.
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Asegúrate de que la facturación esté habilitada para tu proyecto de Google Cloud.
- 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
Ve a la página Proveedores de identidad en la consola de Google Cloud.
Ir a la página de proveedores de identidadHaz clic en Agregar un proveedor y selecciona OpenID Connect en la lista.
Flujo de código de autorización
Ingresa los siguientes detalles para habilitar el flujo de código de autorización:
Selecciona Flujo de código en la sección Elige el tipo de otorgamiento.
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.
).El ID de cliente del proveedor.
El emisor del proveedor. Esto debería verse 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 OAuth y las claves públicas del proveedor.El secreto del cliente del proveedor.
Agrega tu app a la lista de Dominios autorizados. Por ejemplo, si la URL de acceso de tu app es
https://example.com/login
, agregaexample.com
.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
.Haz clic en Guardar.
Flujo implícito
Ingresa los siguientes detalles para habilitar el flujo implícito:
Selecciona Flujo implícito en la sección Elige el tipo de otorgamiento.
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.
).El ID de cliente del proveedor.
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.
Agrega tu app a la lista de Dominios autorizados. Por ejemplo, si la URL de acceso de tu app es
https://example.com/login
, agregaexample.com
.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
.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:
Crea una instancia
OAuthProvider
con el ID del proveedor que configuraste en la sección anterior. El ID del proveedor debe comenzar conoidc.
.Web versión 9
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider("oidc.myProvider");
Web versión 8
const provider = new firebase.auth.OAuthProvider('oidc.myProvider');
Inicia el flujo de acceso. Puedes elegir usar una ventana emergente o un redireccionamiento.
Ventana emergente
Web versión 9
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. // ... });
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. });
Redireccionamiento
Para redireccionar a una página de acceso, llama a
signInWithRedirect()
:Web versión 9
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Web versión 8
firebase.auth().signInWithRedirect(provider).catch((error) => { // Handle error. });
Luego, llama a
getRedirectResult()
para obtener los resultados cuando el usuario regrese a tu app:Web versión 9
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. // ... });
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. // ... });
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:
Inicializa una instancia de
OAuthProvider
con el ID de proveedor que configuraste en la sección anterior. El ID del proveedor debe comenzar conoidc.
. Luego, crea unOAuthCredential
y llama asignInWithCredential()
para que el usuario acceda.Web versión 9
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. // ... });
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. // ... });
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 al proveedor de OIDC con linkWithPopup()
o linkWithRedirect()
:
Por ejemplo, podemos vincular con una Cuenta de Google:
Web versión 9
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. // ... });
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. // ... });
¿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