Passer au contenu principal
Auth0 prend en charge la liaison de comptes d’utilisateur provenant de divers . Une façon de mettre en œuvre cette fonctionnalité consiste à permettre à l’utilisateur de lier explicitement des comptes. Dans ce scénario, l’utilisateur s’authentifie au moyen de l’interface utilisateur 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 ou ce bouton, votre application effectue un appel afin que, lorsque l’utilisateur se connecte avec le deuxième fournisseur, le deuxième compte soit lié au premier. Lorsque vous lancez 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, car seuls les attributs du compte principal seront conservés. Créez un exemple d’application monopage React à l’aide de ce projet sur GitHub. Dans ce projet, ouvrez le fichier auth_config.json dans votre éditeur de texte et mettez à jour le domaine et client_id avec vos informations. Ajoutez http://localhost:3000 dans les champs « Allowed Callback URLs », « Allowed Logout URLs », « Allowed Web Origins ».
  1. Connectez l’utilisateur à votre application.

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

     Dans le 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 guide de démarrage rapide pour application monopage.
  2. L’utilisateur lance la liaison de comptes. Votre SPA doit fournir une interface utilisateur permettant à l’utilisateur d’amorcer la liaison avec ses autres comptes. Par exemple, votre SPA pourrait contenir une page de paramètres utilisateur :

     Lorsque l’utilisateur clique sur le bouton Lier un compte, votre application le redirige vers la page Universal Login, où il se connecte avec la connexion 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 connexion (par ex. ‘Lier le compte Facebook’, ‘Lier le compte Google’) et rediriger l’utilisateur vers /authorize avec le paramètre connection défini (par ex. /authorize?connection=facebook).
    Exemple de page de profil avec liaison de comptes utilisateur
  3. Liez des 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 aux métadonnées du compte principal avant d’appeler le point de terminaison de l’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 identité sera utilisée comme compte principal et laquelle 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-vous auprès de l’API à l’aide du JWT principal, qui est le jeton d’accès, puis effectuez la liaison à l’aide de l’ID de l’utilisateur principal et du JWT secondaire, qui correspond à 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
  // Consultez 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 utilisateur. Cette fonctionnalité est en cours d’abandon. Vous devrez utiliser des jetons d’accès dans tous les cas. Le changement pour la dissociation de 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 n’est pas recommandée, et les utilisateurs concernés sont encouragés à migrer. Consultez le guide de migration : liaison de comptes avec des jetons d’accès vs. ID tokens pour en savoir plus.

​
En savoir plus