Moderne toepassingen wijken steeds meer af van traditionele wachtwoorden en gaan over op wachtwoordloze authenticatiemethoden die zowel veiliger als gemakkelijker zijn voor gebruikers. In dit bericht laat ik zien hoe je gebruikers kunt authenticeren in een door AI gegenereerde ASP.NET Core-applicatie met behulp van FoxIDs met OpenID Connect) en een volledig wachtwoordloze aanmeldingservaring mogelijk kunt maken met behulp van eenmalige codes geleverd via e-mail.

We beginnen vanuit een schone FoxIDs omgeving, maken een nieuwe ASP.NET Core-webapp, verbinden deze met OpenID Connect en schakelen ten slotte passwordless-aanmelding in met op e-mail gebaseerde OTP.

Een FoxIDs ontwikkelomgeving maken

Ik begon met het maken van een nieuwe lege ontwikkelomgeving in FoxIDs. Een schone omgeving maakt het eenvoudig om authenticatie helemaal opnieuw in te stellen en zorgt ervoor dat u deze stappen in uw eigen tenant kunt repliceren.

Lege FoxIDs omgeving

Als u FoxIDs nog niet eerder hebt gebruikt, kunt u een gratis tenant maken op:

https://www.foxids.com

Elke tenant wordt geleverd met twee kant-en-klare omgevingen, zodat u vrij kunt experimenteren.

Configureer verificatie

Begin met configuring hoe gebruikers moeten inloggen. In dit geval willen we dat gebruikers zonder wachtwoord inloggen, met alleen hun e-mailadres en een eenmalig wachtwoord (OTP) dat naar hen is verzonden.

  1. Selecteer het tabblad Authenticaties in uw FoxIDs omgeving.
  2. Klik op Standaard: gebruikersaanmeldingsinterface.
  3. In de sectie Authenticatie schakelt u Wachtwoordverificatie uit en schakelt u Wachtwoordloos met e-mail (eenmalig wachtwoord) in.
  4. Klik op Bijwerken om de wijzigingen op te slaan.
Configureer de authenticatieaanmeldingsmethode

Hierdoor kunnen gebruikers een nieuw account aanmaken en wordt een wachtwoordloze ervaring geboden waarbij ze zich eenvoudigweg verifiëren door hun e-mailadres en de OTP die ze ontvangen in te voeren.

Genereer de ASP.NET Core-toepassing

Vervolgens hebben we een applicatie nodig om te authenticeren. U kunt de AI-prompt gebruiken om een nieuwe ASP.NET Core Razor Pages-applicatie te genereren die is gericht op .NET 10, of OpenID Connect toevoegen aan een bestaande applicatie.

Lees het bericht "Wachtwoordloze authenticatie in ASP.NET Core met FoxIDs en op e-mail gebaseerde OTP" als u de ASP.NET Core-toepassing met de hand wilt maken.

Voor deze walkthrough genereer ik een eenvoudige ASP.NET Core-applicatie in VS Code met Codex. Je zou ook Copilot kunnen gebruiken.

Je bent een deskundige ASP.NET Core-ontwikkelaar.

Doel: Een ASP.NET Core-webapp maken (of bijwerken) die gebruikers met FoxIDs verifieert met behulp van OpenID Connect (autorisatiecodestroom), met behulp van cookie-authenticatie voor de lokale sessie en OIDC als het uitdagingsschema.

### Modus (kies er één)
- MODE = "NEW_APP" -> maak een nieuwe Razor Pages-app
- MODE = "EXISTING_APP" -> wijzig de huidige oplossing zonder bestaande routes/pagina's te verbreken

MODE: {{MODE}}

### App-details
- ProjectName: {{PROJECT_NAME}} (alleen gebruikt als MODE = "NEW_APP")
- TargetFramework: net10.0 (of blijf bestaan als het nieuwer is)
- Lokale HTTPS-URL (moet overeenkomen met FoxIDs Redirect-URI-basisadres): {{APP_BASE_URL}} (bijvoorbeeld: https://localhost:7283/)

### FoxIDs OIDC configuratie
Voer geen harde code Authority, ClientId of ClientSecret in de code of in deze prompt uit.
In plaats van:
- Lees ze via configuratiesleutels:
  - "IdentitySettings:Authority"
  - "IdentitySettings:ClientId"
  - "IdentitySettings:ClientSecret"
- Het uiteindelijke antwoord moet de gebruiker duidelijk uitleggen waar en hoe deze configuratiewaarden moeten worden ingesteld (bijvoorbeeld in appsettings.json, omgevingsvariabelen of gebruikersgeheimen).

### Implementatievereisten

1) Authenticatie toevoegen in Program.cs:
   - Authenticatie configureren:
     - DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme
     - DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme
   - Voeg cookie-authenticatie toe.
   - OpenID Connect authenticatie toevoegen:
     - Authority uit configuratie: "IdentitySettings:Authority"
     - ClientId uit configuratie: "IdentitySettings:ClientId"
     - ClientSecret uit configuratie: "IdentitySettings:ClientSecret"
     - ResponseType = "code"
     - SaveTokens = true
     - Scopes: "openid", "profile", "email", "offline_access"
     - MapInboundClaims = false
     - TokenValidationParameters:
       - NameClaimType = "sub"
       - RoleClaimType = "role"
   - OpenIdConnectEvents toevoegen met:
     - OnAuthenticationFailed: retourneert alleen in Development een eenvoudig antwoord in platte tekst met het uitzonderingsbericht voor foutopsporing. Stel uitzonderingsdetails of PII nooit bloot tijdens de productie.
   - Zorg ervoor dat de middleware is geregistreerd:
     - app.UseAuthentication() wordt aangeroepen vóór app.UseAuthorization().

2) Configuratiebedrading toevoegen:
   - Voeg een `IdentitySettings`-sectie toe aan appsettings.json die alleen niet-geheime tijdelijke aanduiding-waarden bevat, bijvoorbeeld:
     - "Authority": "https://your-foxids-authority/"
     - "ClientId": "your-client-id"
   - Lees "IdentitySettings:ClientSecret" vanuit de configuratie, maar sla de waarde ervan op in .NET gebruikersgeheimen voor lokale ontwikkeling of een omgevingsvariabele of veilige geheime opslag in productie.
   - Als MODE = "EXISTING_APP", voeg deze sectie dan samen met de bestaande configuratie zonder niet-gerelateerde instellingen te overschrijven.
   - Voeg opmerkingen of verklarende tekst toe aan het definitieve antwoord dat:
     - Deze waarden moeten door de gebruiker worden vervangen door hun echte FoxIDs Authority, ClientId en ClientSecret.
     - Geheimen mogen niet naar appsettings.json worden geschreven of vastgelegd in broncontrole.

3) Eindpunten voor inloggen/uitloggen toevoegen:
   - Maak `Controllers/AuthController.cs` met een standaard MVC-controller:
     - Gebruik routepatroon `[controller]/[action]`.
   - Inlogactie (GET):
     - Als de gebruiker al is geverifieerd, stuurt u hem door naar "/".
     - Anders geeft u een Challenge uit met de OpenIdConnectDefaults.AuthenticationScheme met RedirectUri = "/".
   - Uitlogactie (POST, met [ValidateAntiForgeryToken]):
     - Als de gebruiker niet is geverifieerd, wordt u doorgestuurd naar "/".
     - Anders SignOut van:
       - CookieAuthenticationDefaults.AuthenticationScheme, en
       - OpenIdConnectDefaults.AuthenticationScheme
met een RedirectUri = "/".

4) UI-aanmelding gedeeltelijk toevoegen:
   - Maak `Pages/Shared/_LoginPartial.cshtml` aan.
   - Gedrag:
     - Als de gebruiker is geverifieerd:
       - Toon een knop 'Afmelden' die naar `Auth/Logout` post met een antivervalsingstoken.
     - Als de gebruiker niet is geverifieerd:
       - Toon een link 'Inloggen' die verwijst naar `Auth/Login`.

5) Gedeeltelijk toevoegen aan lay-out:
   - Update `Pages/Shared/_Layout.cshtml` met het volgende:
     - `<partial name="_LoginPartial" />` in het navigatiebalkgebied, bij voorkeur uitgelijnd aan de rechterkant van de navigatiebalk.
   - Verwijder de bestaande lay-outinhoud niet.

6) Gedrag van de startpagina (voor weergave van claims):
   - Als MODE = "NEW_APP", of als de bestaande startpagina feitelijk leeg is (alleen boilerplate of geen betekenisvolle inhoud):
     - Implementeer een eenvoudige startpagina die:
       - Verwelkomt de gebruiker.
       - Als de gebruiker is geverifieerd, wordt er een lijst of tabel met de gebruikersclaims weergegeven (type en waarde).
       - Als de gebruiker niet is geverifieerd, wordt een bericht weergegeven zoals 'Je bent niet aangemeld' en een hint om op de inloglink te klikken.
   - Als MODE = "EXISTING_APP" en de startpagina al betekenisvolle inhoud bevat:
     - Wijzig de bestaande startpagina niet om claimsweergave toe te voegen.
     - Laat de bestaande inhoud van de startpagina intact.

### Outputverwachtingen

1) Code- en bestandswijzigingen:
   - Maak een lijst van alle bestanden die zijn gemaakt of gewijzigd.
   - Voer voor elk bestand de volledige bestandsinhoud uit (of een zeer duidelijke diff als het bestand groot is).
   - Zorg ervoor dat het project kan worden gebouwd en uitgevoerd met `dotnet run` (of de gebruikelijke opdracht voor het gekozen doelframework).

2) Configuratieplaatsing en begeleiding:
   - Laat duidelijk precies zien waar de configuratiewaarden Authority, ClientId en ClientSecret in de code worden gelezen (sectie IdentitySettings).
   - Leg aan de gebruiker uit:
     - Dat ze deze waarden moeten instellen nadat de code is gegenereerd.
     - Authority en ClientId instellen in appsettings.json.
     - Hoe ClientSecret lokaal in gebruikersgeheimen of een omgevingsvariabele of beveiligde geheime opslag in productie kan worden ingesteld.

3) Informatie over het eindpunt van de applicatie:
   - In uw laatste antwoord aan de gebruiker vermeldt u expliciet:
     - De lokale eindpunt-URL waarnaar de toepassing luistert (bijvoorbeeld: `{{APP_BASE_URL}}` of de URL die de sjabloon gebruikt).
     - Een korte, duidelijke instructie die de gebruiker vertelt:
       - "Configureer uw FoxIDs Authority en ClientId in de IdentitySettings-sectie. Bewaar ClientSecret lokaal in gebruikersgeheimen of in een omgevingsvariabele of een beveiligde geheime opslag in productie, zodat het tijdens runtime kan worden gelezen zonder dat het wordt vastgelegd."

4) Leuningen:
   - Voer geen ongerelateerde refactoring in.
   - Verwijder geen bestaande functies die verder gaan dan strikt noodzakelijk is om OIDC te integreren met FoxIDs.
   - Houd de oplossing gericht op:
     - Cookie toevoegen + OIDC authenticatie,
     - AuthController,
     - Inloggen gedeeltelijk,
     - Minimale wijzigingen aan de startpagina zoals beschreven.

Voer nu al het bovenstaande uit.

Het AI-antwoord zou u moeten instrueren waar u de Authority, Client ID en Client Secret moet configureren.

Probeer nu de applicatie uit te voeren om het eindpunt te vinden.

Mijn voorbeeldtoepassing draait lokaal op https://localhost:7154/

AI gegenereerde ASP.NET kernapplicatie met OpenID Connect

U kunt de door AI gegenereerde voorbeeldcode vinden in: https://github.com/ITfoxtec/dotnet.samples/tree/main/WebAppPasswordLessEmailAI

Configureer de webapplicatie in FoxIDs

Nu we het lokale adres van de webapplicatie kennen, kunnen we deze registreren in FoxIDs, zodat gebruikers kunnen worden geverifieerd via OpenID Connect.

  1. Selecteer het tabblad Applicaties in uw FoxIDs omgeving.
  2. Kies Nieuwe applicatie en selecteer vervolgens Webapplicatie — OpenID Connect.
  3. Voer bij Naam een naam in, bijvoorbeeld: ASP.NET webapplicatie.
  4. Voeg in de Redirect URI het basisadres van de applicatie toe: https://localhost:7154/ FoxIDs staat standaard toe dat u doorverwijst naar een volgende pagina onder deze basis-URL. Als u de voorkeur geeft aan striktere validatie, kunt u absolute omleidings-URI's vereisen.
  5. Klik op Maken.
Voeg app toe in FoxIDs

FoxIDs geeft nu de verbindingsgegevens voor uw nieuwe applicatie weer, waaronder:

  • Authority
  • Klant-ID
  • Cliëntgeheim
App gemaakt in FoxIDs

Kopieer de Authority en Client-ID naar de IdentitySettings-sectie van het project. Sla het Clientgeheim lokaal op in .NET gebruikersgeheimen of in een beveiligde omgevingsvariabele of geheime opslag in productie.

Configureer authenticatie in de ASP.NET applicatie

Nu de FoxIDs applicatie is gemaakt, is de volgende stap het configureren van authenticatie in het ASP.NET Core-project.

Voeg de niet-geheime FoxIDs verbindingsgegevens toe aan appsettings.json:

{
  "IdentitySettings": {
    "Authority": "https://foxids.com/{tenant}/{environment}/{application}/",
    "ClientId": "your-client-id"
  },
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*"
}

Sla het clientgeheim lokaal op zonder het toe te voegen aan appsettings.json:

dotnet user-secrets init
dotnet user-secrets set "IdentitySettings:ClientSecret" "your-client-secret"

Vervang de voorbeeldwaarden door die uit uw eigen FoxIDs omgeving en voer nooit het echte klantgeheim door.

Inloggen

Klik op Inloggen en u wordt doorgestuurd naar het inlogscherm van FoxIDs.

Selecteer Gebruiker aanmaken.

FoxIDs inlogscherm

Vul het formulier Gebruiker aanmaken in met uw e-mailadres (of een test-e-mailadres waartoe u toegang heeft), voornaam en achternaam en klik vervolgens op Aanmaken.

Maak een testgebruiker aan

Voer het eenmalige wachtwoord (OTP) in dat u per e-mail heeft ontvangen en klik vervolgens op Inloggen.

Inloggen met een eenmalig wachtwoord (OTP)

U bent ingelogd en de claims van uw testgebruiker worden weergegeven.

Ingelogd, claims tonen

Probeer vervolgens uit te loggen en opnieuw in te loggen om de wachtwoordloze inlogstroom te ervaren met behulp van e-mail OTP.