Les applications modernes s'éloignent de plus en plus des mots de passe traditionnels et se tournent vers des méthodes d'authentification sans mot de passe qui sont à la fois plus sécurisées et plus simples pour les utilisateurs. Dans cet article, je vais montrer comment authentifier les utilisateurs dans une application ASP.NET Core générée par l'IA à l'aide de FoxIDs avec OpenID Connect et activer une expérience de connexion entièrement sans mot de passe à l'aide de codes à usage unique envoyés par e-mail.
Nous allons partir d'un environnement FoxIDs propre, créer une nouvelle application Web ASP.NET Core, la connecter à OpenID Connect et enfin activer la connexion à passwordless avec OTP par courrier électronique.
Création d'un environnement de développement FoxIDs
J'ai commencé par créer un nouvel environnement de développement vide dans FoxIDs. Un environnement propre simplifie la configuration de l'authentification à partir de zéro et garantit que vous pouvez reproduire ces étapes dans votre propre tenant.
Si vous n'avez jamais utilisé FoxIDs auparavant, vous pouvez créer un tenant gratuit sur :
Chaque tenant est livré avec deux environnements prêts à l'emploi pour que vous puissiez expérimenter librement.
Configurer l'authentification
Commencez par configuring comment les utilisateurs doivent se connecter. Dans ce cas, nous souhaitons que les utilisateurs se connectent sans mot de passe, en utilisant uniquement leur adresse e-mail et un mot de passe à usage unique (OTP) qui leur a été envoyé.
- Sélectionnez l'onglet Authentifications dans votre environnement FoxIDs.
- Cliquez sur Par défaut — Interface utilisateur de connexion utilisateur.
- Dans la section Authentification, désactivez Authentification par mot de passe et activez Sans mot de passe avec e-mail (mot de passe à usage unique).
- Cliquez sur Mettre à jour pour enregistrer les modifications.
Cela permet aux utilisateurs de créer un nouveau compte et offre une expérience sans mot de passe où ils s'authentifient simplement en entrant leur adresse e-mail et le OTP qu'ils reçoivent.
Générer l'application ASP.NET Core
Ensuite, nous avons besoin d'une application pour nous authentifier. Vous pouvez utiliser l'invite AI pour générer une nouvelle application ASP.NET Core Razor Pages ciblant .NET 10 ou ajouter OpenID Connect à une application existante.
Lisez l'article « Authentification sans mot de passe dans ASP.NET Core avec FoxIDs et OTP par courrier électronique » si vous souhaitez créer l'application ASP.NET Core à la main.
Pour cette procédure pas à pas, je génère une simple application ASP.NET Core dans VS Code avec Codex. Vous pouvez également utiliser Copilot.
Vous êtes un développeur expert ASP.NET Core.
Objectif : créer (ou mettre à jour) une application Web ASP.NET Core qui authentifie les utilisateurs avec FoxIDs à l'aide de OpenID Connect (flux de code d'autorisation), en utilisant l'authentification par cookie pour la session locale et OIDC comme schéma de défi.
### Mode (choisissez-en un)
- MODE = "NEW_APP" -> créer une nouvelle application Razor Pages
- MODE = "EXISTING_APP" -> modifier la solution actuelle sans casser les routes/pages existantes
MODE : {{MODE}}
### Détails de l'application
- ProjectName : {{PROJECT_NAME}} (utilisé uniquement si MODE = "NEW_APP")
- TargetFramework : net10.0 (ou conserver l'existant si plus récent)
- URL locale HTTPS (doit correspondre à l'adresse de base de l'URI de redirection FoxIDs) : {{APP_BASE_URL}} (exemple : https://localhost:7283/)
### Configuration FoxIDs OIDC
Ne codez pas en dur Authority, ClientId ou ClientSecret dans le code ou dans cette invite.
Plutôt:
- Lisez-les à partir des clés de configuration :
- "IdentitySettings:Authority"
- "IdentitySettings:ClientId"
- "IdentitySettings:ClientSecret"
- La réponse finale doit clairement expliquer à l'utilisateur où et comment définir ces valeurs de configuration (par exemple dans appsettings.json, les variables d'environnement ou les secrets utilisateur).
### Exigences de mise en œuvre
1) Ajoutez l'authentification dans Program.cs :
- Configurez l'authentification :
- DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme
- DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme
- Ajoutez une authentification par cookie.
- Ajoutez l'authentification OpenID Connect :
- Authority à partir de la configuration : "IdentitySettings:Authority"
- ClientId à partir de la configuration : "IdentitySettings:ClientId"
- ClientSecret à partir de la configuration : "IdentitySettings:ClientSecret"
- ResponseType = "code"
- SaveTokens = true
- Scopes : "openid", "profile", "email", "offline_access"
- MapInboundClaims = false
- TokenValidationParameters :
- NameClaimType = "sub"
- RoleClaimType = "role"
- Ajoutez OpenIdConnectEvents avec :
- OnAuthenticationFailed : uniquement dans Development, renvoie une réponse simple en texte brut avec le message d'exception pour le débogage. N’exposez jamais les détails d’exception ou PII en production.
- Assurez-vous que le middleware est enregistré :
- app.UseAuthentication() est appelé avant app.UseAuthorization().
2) Ajouter le câblage de configuration :
- Ajoutez une section `IdentitySettings` dans appsettings.json contenant uniquement des valeurs d'espace réservé non secrètes, par exemple :
- "Authority" : "https://your-foxids-authority/"
- "ClientId" : "your-client-id"
- Lisez "IdentitySettings:ClientSecret" à partir de la configuration, mais stockez sa valeur dans les secrets utilisateur .NET pour le développement local ou dans une variable d'environnement ou dans un magasin de secrets sécurisé en production.
- Si MODE = "EXISTING_APP", fusionnez cette section dans la configuration existante sans écraser les paramètres non liés.
- Ajoutez des commentaires ou un texte explicatif dans la réponse finale qui :
- Ces valeurs doivent être remplacées par l'utilisateur par leurs valeurs réelles FoxIDs Authority, ClientId et ClientSecret.
- Les secrets ne doivent pas être écrits dans appsettings.json ni validés dans le contrôle de code source.
3) Ajoutez des points de terminaison de connexion/déconnexion :
- Créez `Controllers/AuthController.cs` avec un contrôleur MVC standard :
- Utilisez le modèle d'itinéraire `[controller]/[action]`.
- Action de connexion (GET) :
- Si l'utilisateur est déjà authentifié, redirigez vers "/".
- Sinon, émettez un Challenge en utilisant le OpenIdConnectDefaults.AuthenticationScheme avec RedirectUri = "/".
- Action de déconnexion (POST, avec [ValidateAntiForgeryToken]) :
- Si l'utilisateur n'est pas authentifié, redirigez vers "/".
- Sinon, SignOut de :
- CookieAuthenticationDefaults.AuthenticationScheme, et
- OpenIdConnectDefaults.AuthenticationScheme
avec un RedirectUri = "/".
4) Ajouter une connexion partielle à l'interface utilisateur :
- Créez `Pages/Shared/_LoginPartial.cshtml`.
- Comportement:
- Si l'utilisateur est authentifié :
- Afficher un bouton « Se déconnecter » qui publie sur `Auth/Logout` avec un jeton anti-contrefaçon.
- Si l'utilisateur n'est pas authentifié :
- Afficher un lien « Connexion » pointant vers `Auth/Login`.
5) Ajouter un partiel à la mise en page :
- Mettez à jour `Pages/Shared/_Layout.cshtml` pour inclure :
- `<partial name="_LoginPartial" />` dans la zone de la barre de navigation, de préférence aligné sur le côté droit de la barre de navigation.
- Ne supprimez pas le contenu de la mise en page existante.
6) Comportement de la page d'accueil (pour l'affichage des claims) :
- Si MODE = "NEW_APP", ou si la page d'accueil existante est effectivement vide (uniquement passe-partout ou aucun contenu significatif) :
- Implémentez une page d'accueil simple qui :
- Accueille l'utilisateur.
- Si l'utilisateur est authentifié, affiche une liste ou un tableau des claims de l'utilisateur (type et valeur).
- Si l'utilisateur n'est pas authentifié, affiche un message du type « Vous n'êtes pas connecté » et une astuce pour cliquer sur le lien de connexion.
- Si MODE = "EXISTING_APP" et que la page d'accueil a déjà un contenu significatif :
- Ne modifiez pas la page d'accueil existante pour ajouter l'affichage des claims.
- Laissez le contenu de la page d’accueil existante intact.
### Attentes de résultats
1) Modifications du code et des fichiers :
- Répertoriez tous les fichiers créés ou modifiés.
- Pour chaque fichier, affichez le contenu complet du fichier (ou une différence très claire si le fichier est volumineux).
- Assurez-vous que le projet peut être construit et exécuté avec `dotnet run` (ou la commande habituelle pour le framework cible choisi).
2) Placement et conseils de configuration :
- Indiquez clairement où les valeurs de configuration Authority, ClientId et ClientSecret sont lues dans le code (section IdentitySettings).
- Expliquez à l'utilisateur :
- Qu'ils doivent définir ces valeurs après la génération du code.
- Comment définir Authority et ClientId dans appsettings.json.
- Comment définir ClientSecret dans les secrets utilisateur localement ou dans une variable d'environnement ou dans un magasin de secrets sécurisé en production.
3) Informations sur le point de terminaison de l'application :
- Dans votre réponse finale à l'utilisateur, indiquez explicitement :
- L'URL du point de terminaison local sur laquelle l'application écoute (par exemple : `{{APP_BASE_URL}}` ou l'URL utilisée par le modèle).
- Une instruction courte et claire indiquant à l'utilisateur :
- "Configurez vos FoxIDs Authority et ClientId dans la section IdentitySettings. Stockez ClientSecret dans les secrets utilisateur localement ou dans une variable d'environnement ou un magasin secret sécurisé en production, afin qu'il puisse être lu au moment de l'exécution sans être validé. "
4) Garde-corps :
- N'introduisez pas de refactorisation sans rapport.
- Ne supprimez aucune fonctionnalité existante au-delà de ce qui est strictement requis pour intégrer OIDC à FoxIDs.
- Gardez la solution centrée sur :
- Ajout d'un cookie + authentification OIDC,
- AuthController,
- Connexion partielle,
- Modifications minimes de la page d'accueil comme décrit.
Maintenant, implémentez tout ce qui précède.
La réponse AI doit vous indiquer où configurer le Authority, l'ID client et le secret client.
Essayez maintenant d'exécuter l'application pour trouver le point de terminaison.
Mon exemple d'application s'exécute localement sur https://localhost:7154/
Vous pouvez trouver l'exemple de code généré par l'IA dans : https://github.com/ITfoxtec/dotnet.samples/tree/main/WebAppPasswordLessEmailAI
Configurer l'application Web dans FoxIDs
Maintenant que nous connaissons l'adresse locale de l'application Web, nous pouvons l'enregistrer dans FoxIDs afin qu'elle puisse authentifier les utilisateurs via OpenID Connect.
- Sélectionnez l'onglet Applications dans votre environnement FoxIDs.
- Choisissez Nouvelle application, puis sélectionnez Application Web — OpenID Connect.
- Dans Nom, saisissez un nom, par exemple : Application Web ASP.NET.
- Dans URI de redirection, ajoutez l'adresse de base de l'application : https://localhost:7154/ Par défaut, FoxIDs permet la redirection vers n'importe quelle page suivante sous cette URL de base. Si vous préférez une validation plus stricte, vous pouvez exiger des URI de redirection absolus.
- Cliquez sur Créer.
FoxIDs affiche désormais les détails de connexion de votre nouvelle application, notamment :
- Authority
- Identifiant client
- ** Secret client **
Copiez le Authority et le Client ID dans la section IdentitySettings du projet. Stockez le Client Secret dans les secrets utilisateur .NET localement ou dans une variable d'environnement sécurisée ou un magasin de secrets en production.
Configurer l'authentification dans l'application ASP.NET
Une fois l'application FoxIDs créée, l'étape suivante consiste à configurer l'authentification dans le projet ASP.NET Core.
Ajoutez les détails de connexion non secrets FoxIDs à appsettings.json :
{
"IdentitySettings": {
"Authority": "https://foxids.com/{tenant}/{environment}/{application}/",
"ClientId": "your-client-id"
},
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*"
}
Stockez le secret client localement sans l'ajouter à appsettings.json :
dotnet user-secrets init
dotnet user-secrets set "IdentitySettings:ClientSecret" "your-client-secret"
Remplacez les exemples de valeurs par ceux de votre propre environnement FoxIDs et ne validez jamais le véritable secret client.
Se connecter
Cliquez sur Connexion et vous êtes redirigé vers l'écran de connexion FoxIDs.
Sélectionnez Créer un utilisateur.
Remplissez le formulaire Créer un utilisateur avec votre adresse e-mail (ou une adresse e-mail test à laquelle vous avez accès), votre prénom et votre nom de famille, puis cliquez sur Créer.
Saisissez le mot de passe à usage unique (OTP) que vous avez reçu par e-mail, puis cliquez sur Connexion.
Vous êtes connecté et les claims de votre utilisateur test s’affichent.
Ensuite, essayez de vous déconnecter et de vous reconnecter pour bénéficier du flux de connexion sans mot de passe en utilisant l'e-mail OTP.