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.

    Accéder au sélecteur de projet

  3. Assurez-vous que la facturation est activée pour votre projet Cloud. Découvrez comment vérifier que la facturation est activée pour votre projet.

  4. 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 Cloud Console.
    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 Sélectionner le type de subvention.

    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.

    5. Code secret du client :

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

  4. Cliquez sur Enregistrer.

Flux implicite

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

    1. Sélectionnez Implicit Flow (Flux implicite) dans la section Choose grant type (Choisir le type de subvention).

    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.

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

  4. Cliquez sur Enregistrer.

Procéder à la connexion des utilisateurs

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

  • Utilisation du flux OAuth. Vous pouvez ainsi effectuer le handshake OAuth pour vous. Basé sur la sélection du flux de code d'autorisation ou du flux implicite de l'étape de configuration du fournisseur, le serveur GCIP choisit le flux souhaité pour communiquer avec le fournisseur d'identité.

  • À l'aide du jeton d'ID du fournisseur OIDC. De cette façon, nous supposons que vous disposez déjà d'un jeton OIDC.

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

    const provider = new firebase.auth.OAuthProvider('oidc.myProvider');
    
  2. Démarrez le flux de connexion. Vous pouvez choisir d'utiliser un pop-up ou une redirection.

    Pour afficher une fenêtre pop-up, appelez 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.
      });
    

    Redirection

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

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

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

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

À 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.. Créez ensuite un objet OAuthCredential :

    const provider = new firebase.auth.OAuthProvider('oidc.myProvider');
    const credential = provider.credential(oidcIdToken, null);
    
  2. Appelez signInWithCredential() pour connecter l'utilisateur :

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

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 avec linkWithPopup() ou linkWithRedirect(). Exemple :

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

Réauthentifier des utilisateurs

Certaines opérations sensibles, telles que la mise à jour de l'adresse e-mail ou du mot de passe d'un utilisateur, nécessitent que l'utilisateur se soit récemment connecté. Pour reconnecter un utilisateur, appelez la méthode reauthenticateWithPopup() ou reauthenticateWithRedirect(). Exemple :

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

Étape suivante