Passer au contenu principal
L’extension Account Link invite les utilisateurs qui ont pu créer un deuxième compte par erreur à lier ce nouveau compte à leur ancien compte lors de leur première connexion. L’utilisateur peut choisir de lier les deux comptes ou de les garder séparés si la création du deuxième compte était intentionnelle.

Comment fonctionne l’extension ?

L’extension se déclenche après l’authentification lorsque l’adresse courriel de l’utilisateur qui vient de s’authentifier correspond à l’adresse courriel d’un compte utilisateur existant associé à un autre . Par exemple, si un utilisateur se connecte avec son compte Facebook en utilisant l’adresse courriel john@acme.com, puis s’authentifie plus tard avec Google en utilisant la même adresse courriel, une page semblable à la suivante s’affichera :
Dashboard - Extensions - Account Link - Extension Example
L’extension ne lie pas automatiquement les utilisateurs qui ont la même adresse courriel, même si ces adresses sont vérifiées, car des adresses courriel vérifiées ne suffisent pas à prouver que l’utilisateur peut actuellement s’authentifier auprès des deux comptes. Si l’utilisateur sélectionne Continuer, il sera redirigé vers Facebook pour s’authentifier. Si l’utilisateur a déjà une session ouverte, Facebook le redirigera vers l’application et les comptes seront automatiquement liés. Sinon, il devra s’authentifier avec ses identifiants Facebook. Une fois redirigé vers Auth0 par Facebook, le compte Facebook sera lié au compte Google. Ce processus garantit que l’utilisateur possède bien les identifiants nécessaires pour s’authentifier auprès des deux comptes, ce qui permet de les lier de façon sécuritaire.

Limites

Notez que l’extension ne prend pas en charge les connexions , les flux lancés au moyen de l’autorisation de périphérique, ni les protocoles et WS-Federation. Pour les connexions non prises en charge par l’extension Account Link, consultez Liaison de comptes – implémentation côté serveur et Liaison de comptes initiée par l’utilisateur – implémentation côté client pour d’autres options.

Installer et configurer l’extension

Accédez à Auth0 Dashboard > Extensions, puis sélectionnez Auth0 Account Link. La fenêtre Installer l’extension s’ouvre. L’extension créera une nouvelle application nommée auth0-account-link pour un usage interne, ainsi qu’une nouvelle règle pour rediriger les utilisateurs vers l’extension s’ils se connectent avec un nouveau compte dont le courriel correspond à celui d’un compte existant.
Si vous effectuez une rotation du Secret client de l’application associée à l’extension Account Link, vous devez désinstaller l’extension, la réinstaller et la reconfigurer avec le nouveau secret de l’application.
Pour tester, créez un exemple d’application monopage React à l’aide de 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” et “Allowed Web Origins”. Connectez-vous à http://localhost:3000 et sélectionnez une connexion. Entrez une adresse courriel déjà associée à un utilisateur vérifié avec un autre type de connexion. Pour lier le compte, sélectionnez Continuer. Une fois connecté, vérifiez les détails de l’utilisateur dans le pour confirmer que les comptes utilisateur sont liés.

Configurer l’extension

Modifier le nom de l’application

Nous vous recommandons de remplacer le nom de l’application par défaut utilisée pour l’extension par un nom descriptif et facile à comprendre pour vos clients, comme Account Linking, puisqu’il apparaîtra sur la page de connexion lorsqu’ils se connecteront à leur compte principal.

Mettre à jour la page de connexion

Par défaut, le d’Auth0 permet à un utilisateur de se connecter et de s’inscrire, comme on s’y attendrait. Toutefois, lorsque la liaison de comptes vous demande d’authentifier votre compte principal pour le lier au nouveau compte, offrir une option d’inscription peut prêter à confusion. Pour en savoir plus sur ce que vous pouvez faire avec Universal Login, consultez Auth0 Universal Login. Pour éviter cela, nous envoyons un paramètre de requête pour indiquer à la page de connexion qu’elle doit masquer l’option S’inscrire. Pour que ce paramètre de requête prenne effet, vous devez toutefois personnaliser la page de connexion.
  1. Accédez à Auth0 Dashboard > Branding > Universal Login, puis sélectionnez la vue Login.
  2. Activez le commutateur Customize Login Page pour activer l’éditeur personnalisé ci-dessous. Dans l’éditeur, nous allons ajouter une nouvelle ligne à la configuration de Lock.
  3. Au bas de l’objet de configuration du widget Lock, ajoutez la ligne suivante (après le paramètre closable) : allowSignUp: !config.extraParams.prevent_sign_up,
    Dashboard - Branding - Universal Login - Paramètre Login - Exemple de code de page hébergée de liaison de comptes
  4. Enregistrez vos modifications et essayez de lier un compte. Vous remarquerez que l’option S’inscrire n’est plus présente, ce qui évite toute confusion supplémentaire pour vos utilisateurs.
    Exemple de page hébergée de liaison de comptes
Le masquage du lien d’inscription n’est pas pris en charge dans l’expérience Universal Login.

Personnaliser le thème

Lors de l’installation (ou à tout moment par la suite en cliquant sur l’icône Settings de l’extension Account Link), vous pouvez ajouter l’URL d’une feuille de style personnalisée si vous souhaitez donner à la page de l’extension une apparence légèrement différente de celle du thème par défaut.
Personnalisation du thème Account Link

Panneau d’administration

Vous pouvez personnaliser votre page de connexion pour la liaison de comptes et votre widget à l’aide du panneau d’administration de l’extension.
  1. Accédez à Dashboard > Extensions > Installed Extensions > Auth0 Account Link.
  2. Vous serez redirigé vers le site d’administration. Vous pourrez y modifier le code HTML de votre page hébergée et certains paramètres du widget de liaison de comptes, comme le titre, le logo, la couleur et la langue.
    Ne supprimez pas {{ ExtensionCSS }}, {{ CustomCSS }}, {{ Auth0Widget }} ou {{ ExtensionScripts }} du code HTML du site. Cela empêchera l’extension d’afficher le widget de liaison de comptes.

Domaines personnalisés

Si vous utilisez un , vous devrez définir la configuration de la règle customDomain avec le domaine personnalisé (par exemple, auth.custom.com).
  1. Accédez à Auth0 Dashboard > Auth Pipeline > Rules.
  2. Par défaut, la ligne 27 de la règle est : issuer: auth0.domainVous devrez la remplacer par : issuer: "myCustomDomain.com" Veillez à omettre la partie protocole de l’URL.

En savoir plus