Intégrez les formulaires de connexion ou d'inscription de manière sécurisée sur votre site

Redirection vs. Non-redirection vs. Connexion intégrée#

OpenID Connect Foundation: Dans OpenID Connect (OIDC), les redirections du navigateur vers un fournisseur d'identité (IdP) sont une partie clé du processus d'authentification. Cela se produit parce que le tiers de confiance (RP) externalise l'authentification de l'utilisateur à un IdP. Une fois que l'utilisateur fournit des identifiants à l'IdP, il renvoie des jetons (comme des jetons d'ID et d'accès) au RP via le navigateur. Ce mécanisme de redirection garantit que les identifiants sensibles de l'utilisateur ne sont traités que par l'IdP, et non par le RP.

Selon le critère de l'OIDC, les utilisateurs doivent être redirigés vers un fournisseur d'identité (IdP) pour compléter en toute sécurité l'authentification. Cela garantit que les identifiants sensibles sont traités par l'IdP, pas par l'application (RP). La connexion sans redirection peut exposer les identifiants utilisateur, les rendant vulnérables à des attaques telles que le vol d'identifiants, le phishing ou le détournement de session.

Lorsque vous utilisez Logto basé sur OIDC, les utilisateurs sont redirigés vers un domaine Logto sécurisé et vérifié pour terminer le processus de connexion. Cependant, de nombreux clients souhaitent intégrer des widgets de connexion ou d'inscription directement sur leur site, connus sous le nom de « connexion intégrée ». C'est une pratique courante pour améliorer la conversion des utilisateurs en intégrant des formulaires d'inscription par email ou des boutons de connexion sociale dans le contexte du site.

La connexion intégrée et la connexion par redirection sont-elles en conflit ? — Pas du tout. Elles se complètent dans le flux d'authentification.

Cas d'utilisation pour la connexion intégrée#

Voici quelques exemples pour illustrer comment la connexion intégrée peut être mise en œuvre de manière sécurisée :

Cas 1 : Intégrer le champ d'inscription par email sur la page d'accueil#

De nombreux sites Web affichent un simple champ d'email et un bouton d'inscription (par exemple, « S'inscrire », « Commencer », ou « Essai gratuit ») de manière visible sur la page d'accueil. Après avoir soumis leur email, les utilisateurs sont redirigés vers une nouvelle page pour continuer le processus d'inscription.

Exemples :

• Stripe: « Commencez maintenant avec une adresse e-mail »

• Coinbase: « Inscrivez-vous avec votre email »

Cas 2 : Intégrer toutes les options d'inscription à côté du contenu#

Pour les blogs ou les sites de contenu, les utilisateurs anonymes peuvent parcourir certains contenus mais sont encouragés à se connecter pour un accès complet. Les formulaires d'inscription apparaissent souvent à côté ou en dessous du contenu.

Exemple :

• Medium : Affiche une invite d'inscription lorsqu'un utilisateur souhaite lire l'article complet.

• X (Twitter) : Invite les utilisateurs à s'inscrire pour accéder à des fils d'actualités personnalisés et à des fonctionnalités.

Dans ces exemples, seules les options initiales d'inscription (champ d'email ou boutons de connexion sociale) sont intégrées. L'utilisateur est ensuite redirigé vers l'IdP pour une authentification sécurisée. Comme Medium et X agissent tous deux en tant que leurs propres IdPs, ils gèrent l'authentification par le biais de fenêtres modales plutôt que par des redirections, offrant une expérience utilisateur similaire dans les deux cas.

Comment intégrer des options d'inscription sur votre site Web ?#

Utilisez les paramètres d'authentification de Logto direct_sign_in , first_screen , et login_hint pour implémenter l'inscription ou la connexion intégrée. Voici deux bonnes pratiques :

Connexion directe#

Affichez des boutons de connexion sociale (par exemple, Google, Facebook, Apple) ou des boutons de connexion d'entreprise (par exemple, Google Workspace, Azure AD, Okta) sur votre site et redirigez les utilisateurs directement vers le fournisseur pertinent. Les formats pris en charge incluent :

Les formats actuellement pris en charge sont :

• social:<idp-name> (Utilisez un connecteur social avec le nom d'IdP spécifié, par exemple social:google)
• sso:<connector-id> (Utilisez le connecteur SSO d'entreprise spécifié, par exemple sso:123456)

Pour en savoir plus, consultez la section de connexion directe dans les Documents Logto.

Premier écran#

Outre le fait d'éviter les fournisseurs d'identité tiers (par exemple, connexion Google ou Facebook), d'autres méthodes d'authentification doivent être redirigées vers l'écran de connexion de Logto pour continuer. Essentiellement, tous les flux d'authentification nécessitent une redirection - vers un IdP tiers ou vers Logto en tant que votre IdP de première partie.

Ce paramètre first_screen vous permet de personnaliser le premier écran que les utilisateurs voient lorsqu'ils commencent le processus d'authentification. La valeur de ce paramètre peut être :

• sign_in: Permettre aux utilisateurs d'accéder directement à la page de connexion.
• register: Permettre aux utilisateurs d'accéder directement à la page d'inscription.
• single_sign_on: Permettre aux utilisateurs d'accéder directement à la page de connexion unique (SSO).
• identifier:sign_in: Permettre aux utilisateurs d'accéder directement à une page affichant uniquement des méthodes de connexion basées sur un identifiant spécifique.
• identifier:register: Permettre aux utilisateurs d'accéder directement à une page affichant uniquement des méthodes d'inscription basées sur un identifiant spécifique.
• reset_password: Permettre aux utilisateurs d'accéder directement à la page de réinitialisation de mot de passe.

Pour en savoir plus, consultez la section Premier écran des Documents Logto.

Indication de connexion#

Comme mentionné plus tôt, vous ne pouvez pas collecter les mots de passe des utilisateurs ou les codes de vérification par email/SMS directement sur votre site Web. Ceux-ci doivent être traités et vérifiés par l'IdP.

Cependant, vous pouvez collecter les adresses email ou les numéros de téléphone des utilisateurs en tant qu'identifiants et les transmettre lors de la redirection vers le premier écran approprié (par exemple, register ou identifier:register). Pour cela, utilisez le paramètre login_hint pour envoyer l'identifiant de votre site Web à l'écran de connexion de Logto. L'URL pourrait ressembler à cela : https://auth.example.com/identifier:[email protected].

Pour plus de détails, consultez la Demande d'authentification des spécifications OIDC.

Conclusion#

En utilisant les paramètres direct_sign_in, first_screen, et login_hint de Logto, vous pouvez facilement intégrer des formulaires d'inscription et de connexion sur votre site Web, assurant une expérience utilisateur sécurisée et conviviale tout en maximisant la conversion des utilisateurs.