Français
  • asp-net-core
  • c-sharp
  • tutorial
  • auth
  • authentication
  • oauth
  • oidc
  • identity

Construire l'authentification ASP.NET Core avec Logto

Apprenez comment construire un flux d'authentification utilisateur avec ASP.NET Core en intégrant le SDK Logto.

Gao
Gao
Founder

Introduction

  • Logto est une alternative moderne à Auth0 pour construire une infrastructure d'identité client avec un effort minimal. Il prend en charge diverses méthodes de connexion, y compris le nom d'utilisateur, l'e-mail, le numéro de téléphone et les connexions sociales populaires comme Google et GitHub.
  • ASP.NET Core est un framework open source, cross-platform, à haute performance pour construire des applications modernes, basées sur le cloud et connectées à Internet.

Dans ce tutoriel, nous vous montrerons comment construire un flux d'authentification utilisateur avec ASP.NET Core en intégrant SDK Logto. Le tutoriel utilise C# comme langage de programmation.

Prérequis

Avant de commencer, assurez-vous d'avoir ce qui suit :

Créer une application Logto

Pour commencer, créez une application Logto avec le type "Web traditionnel". Suivez ces étapes pour créer une application Logto :

  1. Connectez-vous à la Console Logto.
  2. Dans la barre de navigation à gauche, cliquez sur Applications.
  3. Cliquez sur Créer une application.
  4. Dans la page ouverte, trouvez la section "Application web traditionnelle" et localisez la carte "ASP.NET Core".
  5. Cliquez sur Commencer la construction, et entrez le nom de votre application.
  6. Cliquez sur Créer.

Vous devriez alors voir un tutoriel interactif qui vous guide tout au long du processus d'intégration du SDK Logto avec votre application ASP.NET Core. Le contenu suivant peut être une référence pour une utilisation future.

Essayez le tutoriel interactif de Logto Cloud

Intégrer avec le SDK Logto

Installation

Notez que la version minimale prise en charge de ASP.NET Core est 6.0.

Ajouter le middleware d'authentification Logto

Ouvrez Startup.cs (ou Program.cs) et ajoutez le code suivant pour enregistrer le middleware d'authentification Logto :

La méthode AddLogtoAuthentication fera les actions suivantes :

  • Définir le schéma d'authentification par défaut sur LogtoDefaults.CookieScheme.
  • Définir le schéma de challenge par défaut sur LogtoDefaults.AuthenticationScheme.
  • Définir le schéma de déconnexion par défaut sur LogtoDefaults.AuthenticationScheme.
  • Ajouter les gestionnaires d'authentification cookie et OpenID Connect au schéma d'authentification.

Connexion

Ajoutez l'URI suivante à la liste Redirect URIs dans la page de détails de l'application Logto :

Pour vous connecter avec Logto, vous pouvez utiliser la méthode ChallengeAsync :

La méthode ChallengeAsync redirigera l'utilisateur vers la page de connexion Logto.

La propriété RedirectUri est utilisée pour rediriger l'utilisateur vers votre application web après l'authentification. Notez qu'elle diffère de l'URI de redirection que vous avez configurée dans la page de détails de l'application Logto :

  1. L'URI de redirection dans la page de détails de l'application Logto est l'URI vers laquelle Logto redirigera l'utilisateur après que l'utilisateur s'est connecté.
  2. La propriété RedirectUri est l'URI vers laquelle on est redirigé après que les actions nécessaires ont été prises dans le middleware d'authentification Logto.

L'ordre des actions est 1 -> 2. Pour plus de clarté, appelons l'URI de redirection dans la page de détails de l'application Logto l'URI de redirection Logto et la propriété RedirectUri l'URI de redirection de l'application.

L'URI de redirection Logto a une valeur par défaut de /Callback, que vous pouvez laisser telle quelle s'il n'y a pas d'exigence particulière. Si vous voulez la changer, vous pouvez définir la propriété CallbackPath pour LogtoOptions :

N'oubliez pas de mettre à jour la valeur dans la page de détails de l'application Logto en conséquence.

Se déconnecter

Ajoutez l'URI suivante à la liste Post sign-out redirect URIs dans la page de détails de l'application Logto :

Pour se déconnecter avec Logto, vous pouvez utiliser la méthode SignOutAsync :

La méthode SignOutAsync effacera le cookie d'authentification et redirigera l'utilisateur vers la page de déconnexion Logto.

La propriété RedirectUri est utilisée pour rediriger l'utilisateur vers votre application web après la déconnexion. Notez qu'elle diffère de l'URI de redirection post-déconnexion que vous avez configurée dans la page de détails de l'application Logto :

  1. L'URI de redirection post-déconnexion dans la page de détails de l'application Logto est l'URI vers laquelle Logto redirigera l'utilisateur après que l'utilisateur s'est déconnecté.
  2. La propriété RedirectUri est l'URI vers laquelle on est redirigé après que les actions nécessaires ont été prises dans le middleware d'authentification Logto.

L'ordre des actions est 1 -> 2. Pour plus de clarté, appelons l'URI de redirection post-déconnexion dans la page de détails de l'application Logto l'URI de redirection post-déconnexion Logto et la propriété RedirectUri l'URI de redirection post-déconnexion de l'application.

L'URI de redirection post-déconnexion Logto a une valeur par défaut de /SignedOutCallback, que vous pouvez laisser telle quelle s'il n'y a pas d'exigence particulière. Si vous voulez la changer, vous pouvez définir la propriété SignedOutCallbackPath pour LogtoOptions :

N'oubliez pas de mettre à jour la valeur dans la page de détails de l'application Logto en conséquence.

Implémenter des boutons de connexion/déconnexion (Pages Razor)

Premièrement, ajoutez les méthodes de gestion à votre PageModel, par exemple :

Ensuite, ajoutez les boutons à votre page Razor (html) :

<p>Est authentifié : @User.Identity?.IsAuthenticated</p>
<form method="post">
  @if (User.Identity?.IsAuthenticated == true)
  {
    <button type="submit" asp-page-handler="SignOut">Deconnexion</button>
  } else {
    <button type="submit" asp-page-handler="SignIn">Connexion</button>
  }
</form>

Il affichera le bouton "Se connecter" si l'utilisateur n'est pas authentifié, et affichera le bouton "Se déconnecter" si l'utilisateur est authentifié.

Point de contrôle : Exécutez l'application web

Maintenant, vous pouvez exécuter l'application web et essayer de vous connecter/déconnecter avec Logto :

  1. Ouvrez l'application web dans votre navigateur, vous devriez voir "Est authentifié : False" et le bouton "Se connecter".
  2. Cliquez sur le bouton "Se connecter", et vous devriez être redirigé vers la page de connexion Logto.
  3. Après vous être connecté, vous devriez être redirigé vers l'application web, et vous devriez voir "Est authentifié : True" et le bouton "Se déconnecter".
  4. Cliquez sur le bouton "Se déconnecter", et vous devriez être redirigé vers la page de déconnexion Logto, puis redirigé vers l'application web.

Si vous rencontrez des problèmes lors de l'intégration, n'hésitez pas à nous contacter par e-mail à [email protected] ou rejoignez notre serveur Discord !

Lectures complémentaires

Essayez Logto aujourd'hui