Procéder à la connexion des utilisateurs avec OIDC

Ce document explique comment utiliser Identity Platform pour connecter les utilisateurs via un fournisseur OpenID Connect (OIDC).

Avant de commencer

1. Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.

2. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

   Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

   Go to project selector

3. Make sure that billing is enabled for your Google Cloud project.

4. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

   Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

   Go to project selector

5. Make sure that billing is enabled for your Google Cloud project.

6. Activez Identity Platform et ajoutez le SDK client à votre application. Pour savoir comment procéder, consultez le Guide de démarrage rapide.

Configurer le fournisseur

1. Accédez à la page Fournisseurs d'identité dans la console Google Cloud.
   Accéder à la page "Fournisseurs d'identité"
   

2. Cliquez sur Ajouter un fournisseur, puis sélectionnez OpenID Connect dans la liste.

Flux de code d'autorisation

1. Saisissez les informations suivantes pour activer le flux de code d'autorisation :

   1. Sélectionnez Flux de code dans la section Choisir un type d'octroi.

   2. Le nom du fournisseur. Il peut s'agir de l'ID du fournisseur ou d'un nom personnalisé. Si vous saisissez un nom personnalisé, cliquez sur Modifier à côté de ID de fournisseur pour spécifier l'ID (qui doit commencer par oidc.).

   3. ID client du fournisseur.

   4. Émetteur du fournisseur. L'URL ressemble généralement à ceci : https://example.com. Identity Platform utilise cette URL pour localiser le document de découverte OIDC (généralement situé dans /.well-known/openid-configuration), qui spécifie les points de terminaison OAuth et les clés publiques du fournisseur.

      Remarque : Si votre fournisseur OIDC ne respecte pas la spécification OIDC pour la découverte, il ne fonctionnera pas avec Identity Platform.

   5. Code secret du client du fournisseur.

2. Ajoutez votre application à la liste des Domaines autorisés. Par exemple, si l'URL de connexion de votre application est https://example.com/login, ajoutez example.com.

3. Configurez l'URL de rappel Identity Platform en tant qu'URL de redirection avec votre fournisseur OIDC. L'URL doit ressembler à ceci : https://[PROJECT-ID].firebaseapp.com/__/auth/handler.

4. Cliquez sur Enregistrer.

Flux implicite

1. Saisissez les informations suivantes pour activer le flux implicite :

   1. Sélectionnez Flux implicite dans la section Choisir le type d'octroi.

   2. Le nom du fournisseur. Il peut s'agir de l'ID du fournisseur ou d'un nom personnalisé. Si vous saisissez un nom personnalisé, cliquez sur Modifier à côté de ID de fournisseur pour spécifier l'ID (qui doit commencer par oidc.).

   3. ID client du fournisseur.

   4. Émetteur du fournisseur. Cela doit ressembler à Identity Platform https://example.com. à l'aide de cette URL pour localiser le document de découverte OIDC (généralement situé à /.well-known/openid-configuration), qui spécifie les points de terminaison OAuth et les clés publiques du fournisseur.

      Remarque : Si votre fournisseur OIDC ne respecte pas la spécification OIDC pour la découverte, il ne fonctionnera pas avec Identity Platform.

2. Ajoutez votre application à la liste des Domaines autorisés. Par exemple, si l'URL de connexion de votre application est https://example.com/login, ajoutez example.com.

3. Configurez l'URL de rappel Identity Platform en tant qu'URL de redirection avec votre fournisseur OIDC. L'URL doit ressembler à ceci : https://[PROJECT-ID].firebaseapp.com/__/auth/handler.

4. Cliquez sur Enregistrer.

Procéder à la connexion des utilisateurs

Il existe deux façons de connecter des utilisateurs avec OIDC :

• À l'aide du flux OAuth. Cette méthode termine le handshake OAuth. Selon que vous avez sélectionné le flux de code d'autorisation ou le flux implicite lors de l'étape de configuration du fournisseur, le serveur GCIP choisit le flux approprié pour communiquer avec le fournisseur d'identité.

• À l'aide du jeton d'ID du fournisseur OIDC. Cette méthode suppose qu'un jeton OIDC disponible est déjà en votre possession.

Connecter les utilisateurs avec OAuth

Pour vous connecter à l'aide d'OAuth, procédez comme suit :

1. Créez une instance OAuthProvider avec l'ID de fournisseur que vous avez configuré à la section précédente. L'ID du fournisseur doit commencer par oidc..

   Version Web 9

   En savoir plus sur l'API Web modulaire pouvant être allégée par "tree shaking" et sur la mise à niveau depuis l'API avec espace de noms

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

   Version Web 8

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

2. Démarrez le flux de connexion. Vous pouvez choisir d'utiliser un pop-up ou une redirection.

   Fenêtre pop-up

   Version Web 9

   Apprendre en savoir plus sur l'API Web modulaire en arbre et les arbres mise à niveau à partir de l'API d'espace de noms.

   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

   Version Web 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

   Rediriger

   Pour rediriger vers une page de connexion, appelez signInWithRedirect() :

   Version Web 9

   Apprendre en savoir plus sur l'API Web modulaire en arbre et les arbres mise à niveau à partir de l'API d'espace de noms.

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

   Version Web 8

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

   Appelez ensuite getRedirectResult() pour obtenir les résultats lorsque l'utilisateur revient dans votre application:

   Version Web 9

   Apprendre en savoir plus sur l'API Web modulaire en arbre et les arbres mise à niveau à partir de l'API d'espace de noms.

   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

   Version Web 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

À la fin du flux, vous pouvez obtenir le jeton d'ID OIDC à l'aide du champ result.credential.idToken.

Connecter directement des utilisateurs

Pour connecter un utilisateur avec un jeton d'ID OIDC directement, procédez comme suit :

1. Initialisez une instance OAuthProvider avec l'ID de fournisseur que vous avez configuré à la section précédente. L'ID du fournisseur doit commencer par oidc.. Ensuite, créez un OAuthCredential et appelez signInWithCredential() pour connecter l'utilisateur.

   Version Web 9

   Apprendre en savoir plus sur l'API Web modulaire en arbre et les arbres mise à niveau à partir de l'API d'espace de noms.

   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

   Version Web 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

Associer des comptes utilisateur

Si un utilisateur s'est déjà connecté à votre application à l'aide d'une méthode différente (adresse e-mail/mot de passe, par exemple), vous pouvez associer son compte existant au fournisseur OIDC à l'aide de linkWithPopup() ou linkWithRedirect() : Par exemple, nous pouvons associer un compte Google :

Version Web 9

En savoir plus sur l'API Web modulaire pouvant être allégée par "tree shaking" et sur la mise à niveau depuis l'API avec espace de noms

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

Version Web 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

Étape suivante

• Procéder à la connexion des utilisateurs avec SAML
• Afficher un domaine personnalisé lors de la connexion
• Gérer les fournisseurs OIDC et SAML par programmation