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
- 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.
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Vérifiez que la facturation est activée pour votre projet Google Cloud.
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Vérifiez que la facturation est activée pour votre projet Google Cloud.
- 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
Accédez à la page Fournisseurs d'identité dans la console Google Cloud.
Accéder à la page "Fournisseurs d'identité"Cliquez sur Ajouter un fournisseur, puis sélectionnez OpenID Connect dans la liste.
Flux de code d'autorisation
Saisissez les informations suivantes pour activer le flux de code d'autorisation :
Sélectionnez Flux de code dans la section Choisir un type d'octroi.
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.
).ID client du fournisseur.
É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.Code secret du client du fournisseur.
Ajoutez votre application à la liste des Domaines autorisés. Par exemple, si l'URL de connexion de votre application est
https://example.com/login
, ajoutezexample.com
.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
.Cliquez sur Enregistrer.
Flux implicite
Saisissez les informations suivantes pour activer le flux implicite :
Sélectionnez Flux implicite dans la section Choisir le type d'octroi.
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.
).ID client du fournisseur.
É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.
Ajoutez votre application à la liste des Domaines autorisés. Par exemple, si l'URL de connexion de votre application est
https://example.com/login
, ajoutezexample.com
.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
.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 :
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 paroidc.
.Version Web 9
<ph type="x-smartling-placeholder">import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider("oidc.myProvider");
Version Web 8
const provider = new firebase.auth.OAuthProvider('oidc.myProvider');
Démarrez le flux de connexion. Vous pouvez choisir d'utiliser un pop-up ou une redirection.
Fenêtre pop-up
Version Web 9
<ph type="x-smartling-placeholder">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. // ... });
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. });
Rediriger
Pour rediriger vers une page de connexion, appelez
signInWithRedirect()
:Version Web 9
<ph type="x-smartling-placeholder">import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
Version Web 8
firebase.auth().signInWithRedirect(provider).catch((error) => { // Handle error. });
Appelez ensuite
getRedirectResult()
pour obtenir les résultats lorsque l'utilisateur revient dans votre application:Version Web 9
<ph type="x-smartling-placeholder">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. // ... });
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. // ... });
À 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 directement un utilisateur avec un jeton d'ID OIDC, procédez comme suit:
Initialisez une instance
OAuthProvider
avec l'ID de fournisseur que vous avez configuré à la section précédente. L'ID du fournisseur doit commencer paroidc.
. Créez ensuite unOAuthCredential
, puis appelezsignInWithCredential()
pour connecter l'utilisateur.Version Web 9
<ph type="x-smartling-placeholder">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. // ... });
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. // ... });
Associer des comptes utilisateur
Si un utilisateur s'est déjà connecté à votre application à l'aide d'une autre méthode (telle qu'une adresse e-mail ou un mot de passe), 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
<ph type="x-smartling-placeholder">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. // ... });
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. // ... });
É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