Liaison de compte initiée par l’utilisateur : Mise en œuvre côté client

Auth0 supporte la liaison des comptes d’utilisateurs de différents fournisseurs d’identité. Une façon de mettre en œuvre cette fonctionnalité est d’autoriser l’utilisateur à lier explicitement les comptes. Dans ce scénario, l’utilisateur s’authentifie par l’intermédiaire de l’interface utilisateur de votre Application à page unique (SPA) et peut ensuite utiliser un lien ou un bouton pour lier un autre compte au premier. Lorsque l’utilisateur clique sur ce lien/bouton, votre application effectue un appel de sorte que lorsque l’utilisateur se connecte avec le deuxième fournisseur, le deuxième compte est lié au premier.

Lorsque vous lancez l’association de comptes, vous pouvez sélectionner l’identité à utiliser comme compte principal et celle qui sera utilisée comme compte secondaire. Ce choix dépend de l’ensemble d’attributs que vous souhaitez conserver dans le profil principal, car vous ne conserverez que les attributs du compte principal.

Créer un un modèle React d’application à page unique avec ce projet sur GitHub.

Dans ce projet, ouvrez le fichier auth_config.json dans votre éditeur de texte et mettez à jour les identifiants du domaine et le client_id avec vos informations.

Ajouter http://localhost:3000 au champs « URL de rappel autorisées », « URL de déconnexion autorisées », « Origines Web autorisées ».

1. Connectez l’utilisateur à votre application.

   L’utilisateur s’authentifie auprès de votre SPA en utilisant Connexion universelle, demandant un Jeton d’accès à Management API.

   Lors d’une connexion SPA typique, la fonction de rappel est traitée côté client par la même page, et un JWT est reçu après une authentification réussie. Pour en savoir plus, consultez le Démarrage rapide de l’application à page unique.

2. L’utilisateur initie la liaison de compte. Votre SPA doit fournir une interface utilisateur pour que l’utilisateur puisse établir un lien avec ses autres comptes. Par exemple, votre SPA pourrait contenir la page des paramètres d’un utilisateur :

   Lorsque l’utilisateur clique sur le bouton Lier le compte, votre application redirige l’utilisateur vers la page Connexion universelle lorsqu’il se connecte avec la connexion à laquelle il souhaite établir un lien. Après une authentification réussie, utilisez le jeton obtenu pour lier les comptes.

   Vous pouvez également ajouter un bouton pour chaque connexion (p. p.ex., 'Lier le compte Facebook', 'Lier le compte Google') et rediriger l’utilisateur vers /authorize avec le paramètre de connection défini (/authorize?connection=facebook).

   

3. Lier les comptes en appelant le Link a User Account endpoint (Point de terminaison Lier un compte d’utilisateur) de Management API Auth0

   Pour conserver et fusionner les métadonnées user_metadata du compte secondaire, vous devez les récupérer et les fusionner avec les métadonnées du compte principal avant d’appeler le point de terminaison de l’API. Une fois les comptes associés, les métadonnées du compte secondaire sont supprimées.

   Lorsque vous lancez l’association de comptes, vous pouvez sélectionner l’identité qui sera utilisée comme compte principal et celle qui sera utilisée comme compte secondaire. Ce choix dépend de l’ensemble des attributs que vous souhaitez conserver dans le profil principal.

4. Dans la fonction linkAccount, appelez Management API. Authentifiez-vous avec l’API à l’aide du JWT principal, qui est le Jeton d’accès, et liez en utilisant l’ID de l’utilisateur principal et le JWT secondaire, qui est le Jeton d’ID de l’utilisateur secondaire.

   const linkAccount = async () => {
     const accessToken = await auth0.getTokenSilently();
     const { sub } = await auth0.getUser();
     // authenticateUser should authenticate the user with the account to be linked
     // See the Github sample for more details
     const {
       __raw: targetUserIdToken,
       email_verified,
       email,
     } = await authenticateUser();
     if (!email_verified) {
       throw new Error(
         `Account linking is only allowed to a verified account. Please verify your email ${email}.`
       );
     }
     await fetch(`https://${config.domain}/api/v2/users/${sub}/identities`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
         Authorization: `Bearer ${accessToken}`,
       },
       body: JSON.stringify({
         link_with: targetUserIdToken,
       }),
     });
   };

   Was this helpful?

   Yes /No

• Associer des comptes d’utilisateurs
• Désassocier des comptes d’utilisateurs
• Association de comptes d’utilisateur : mise en œuvre côté serveur