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. Connectez-vous à votre compte Google Cloud. Si vous débutez sur Google Cloud, créez un compte pour évaluer les performances de nos produits en conditions réelles. Les nouveaux clients bénéficient également de 300 $ de crédits gratuits pour exécuter, tester et déployer des charges de travail.

2. Dans Google Cloud Console, sur la page de sélection du projet, sélectionnez ou créez un projet Google Cloud.

   Remarque : Si vous ne comptez pas conserver les ressources créées dans cette procédure, créez un projet au lieu de sélectionner un projet existant. Après avoir suivi ces étapes, vous pouvez supprimer le projet. Cela entraîne la suppression de toutes les ressources qui lui sont associées.

   Accéder au sélecteur de projet

3. Vérifiez que la facturation est activée pour votre projet Google Cloud.

4. Dans Google Cloud Console, sur la page de sélection du projet, sélectionnez ou créez un projet Google Cloud.

   Remarque : Si vous ne comptez pas conserver les ressources créées dans cette procédure, créez un projet au lieu de sélectionner un projet existant. Après avoir suivi ces étapes, vous pouvez supprimer le projet. Cela entraîne la suppression de toutes les ressources qui lui sont associées.

   Accéder au sélecteur de projet

5. Vérifiez que la facturation est activée pour votre projet Google Cloud.

6. Activez Identity Platform et ajoutez le SDK client à votre application. Pour en savoir plus, 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

   Apprenez-en plus sur l'API Web modulaire avec possibilité d'activation dans des arborescences et sur la mise à niveau à partir de l'API en 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

   Apprenez-en plus sur l'API Web modulaire avec possibilité d'activation dans des arborescences et sur la mise à niveau à partir de l'API en 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

   Redirection

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

   Version Web 9

   Apprenez-en plus sur l'API Web modulaire avec possibilité d'activation dans des arborescences et sur la mise à niveau à partir de l'API en 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

   Ensuite, appelez getRedirectResult() pour obtenir les résultats lorsque l'utilisateur revient dans votre application:

   Version Web 9

   Apprenez-en plus sur l'API Web modulaire avec possibilité d'activation dans des arborescences et sur la mise à niveau à partir de l'API en 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 directement avec un jeton d'ID OIDC, procédez comme suit:

1. Initialisez une instance OAuthProvider avec l'ID de fournisseur que vous avez configuré dans 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

   Apprenez-en plus sur l'API Web modulaire avec possibilité d'activation dans des arborescences et sur la mise à niveau à partir de l'API en 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 autre méthode (par exemple, adresse e-mail/mot de passe), vous pouvez associer son compte existant au fournisseur OIDC à l'aide de linkWithPopup() ou linkWithRedirect(). Par exemple, nous pouvons associer son compte à un compte Google :

Version Web 9

Apprenez-en plus sur l'API Web modulaire avec possibilité d'activation dans des arborescences et sur la mise à niveau à partir de l'API en 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

Étapes suivantes

• 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