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

Découvrez comment proposer une UI côté client qui permet aux utilisateurs de se connecter à leurs autres comptes et de les lier à leur compte principal à l’aide d’une SPA.

Auth0 prend en charge la liaison de comptes d’utilisateur provenant de divers fournisseurs d’identité. Une façon d’implémenter cette fonctionnalité consiste à permettre à l’utilisateur de lier explicitement des comptes. Dans ce scénario, l’utilisateur s’authentifie au moyen de l’UI de votre application monopage (SPA), puis peut utiliser un lien ou un bouton pour lier un autre compte au premier. Lorsque l’utilisateur clique sur ce lien/bouton, votre application effectue une requête afin que, lorsqu’il ouvre une session avec le deuxième fournisseur, le deuxième compte soit lié au premier.

Lorsque vous amorcez la liaison de comptes, vous pouvez choisir quelle identité utiliser comme compte principal et laquelle utiliser comme compte secondaire. Ce choix dépend de l’ensemble d’attributs que vous souhaitez conserver dans le profil principal, puisque vous ne conserverez que les attributs du compte principal.

Créez une application monopage React d’exemple à l’aide de ce projet sur GitHub.

Dans ce projet, ouvrez le fichier auth_config.json dans votre éditeur de texte et remplacez le domaine et le client_id par les vôtres.

Ajoutez http://localhost:3000 dans les champs « Allowed Callback URLs », « Allowed Logout URLs » et « Allowed Web Origins ».

1. Connectez l’utilisateur à votre application.
   
   

   L’utilisateur s’authentifie auprès de votre SPA au moyen de Universal Login, en demandant un jeton d’accès pour la Management API.
   
   

   Dans un flux de connexion typique d’une SPA, le callback est géré 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 Quickstart pour application monopage.

2. L’utilisateur lance la liaison de comptes. Votre SPA doit fournir une interface utilisateur permettant à l’utilisateur de lancer une liaison avec ses autres comptes. Par exemple, votre SPA pourrait contenir la page de paramètres d’un utilisateur :
   
   

   Lorsque l’utilisateur clique sur le bouton Lier le compte, votre application le redirige vers la page Universal Login, où il se connecte avec la connection qu’il souhaite lier. Après une authentification réussie, utilisez le jeton obtenu pour lier les comptes.
   
   

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

   

3. Liez les comptes en appelant le point de terminaison Link a User Account de l’Auth0 Management API.

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

   Lorsque vous lancez la liaison de comptes, vous pouvez choisir quelle identity sera utilisée comme compte principal et laquelle sera utilisée comme compte secondaire. Ce choix dépendra de l’ensemble d’attributs que vous souhaitez conserver dans le profil principal.

4. Dans la fonction linkAccount, appelez la Management API. Authentifiez l’appel à l’API au moyen du JWT principal, qui est le jeton d’accès, puis effectuez la liaison au moyen de l’ID de l’utilisateur principal et du JWT secondaire, qui est l’ID Token de l’utilisateur secondaire.

   const linkAccount = async () => {
     const accessToken = await auth0.getTokenSilently();
     const { sub } = await auth0.getUser();
     // authenticateUser doit authentifier l’utilisateur avec le compte à lier
     // Voir l’exemple Github pour plus de détails
     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,
       }),
     });
   };
   

Liaison de comptes : jetons d’accès vs ID Tokens

Auparavant, dans certains cas, vous pouviez utiliser des ID Tokens pour lier et dissocier des comptes d’utilisateur. Cette fonctionnalité est en voie de dépréciation. Vous devrez utiliser des jetons d’accès dans tous les cas. Le changement concernant la dissociation des comptes est que vous ne pouvez plus utiliser un ID Token dans l’en-tête Authorization. Un jeton d’accès doit être utilisé à la place. La fonctionnalité est toujours offerte, mais elle n’est pas recommandée, et les utilisateurs concernés sont encouragés à effectuer la migration. Consultez le Guide de migration : liaison de comptes avec des jetons d’accès vs ID Tokens pour plus de détails.

​

En savoir plus

• Lier des comptes d’utilisateur
• Dissocier des comptes d’utilisateur
• Liaison de comptes d’utilisateur : mise en œuvre côté serveur