Moderne Anwendungen entfernen sich zunehmend von herkömmlichen Passwörtern und hin zu passwortlosen Authentifizierungsmethoden, die sowohl sicherer als auch für Benutzer einfacher sind. In diesem Beitrag zeige ich, wie man Benutzer in einer KI-generierten ASP.NET Core-Anwendung mithilfe von FoxIDs mit OpenID Connect authentifiziert und ein vollständig passwortloses Anmeldeerlebnis mithilfe von Per E-Mail übermittelten Einmalcodes ermöglicht.
Wir beginnen mit einer sauberen FoxIDs Umgebung, erstellen eine neue ASP.NET Core-Webanwendung, verbinden sie mit OpenID Connect und aktivieren schließlich die passwordless-Anmeldung mit der E-Mail-basierten OTP.
Erstellen einer FoxIDs Entwicklungsumgebung
Ich begann damit, eine neue leere Entwicklungsumgebung in FoxIDs zu erstellen. Eine saubere Umgebung erleichtert die Einrichtung der Authentifizierung von Grund auf und stellt sicher, dass Sie diese Schritte in Ihrem eigenen Tenant replizieren können.
Wenn Sie FoxIDs noch nicht verwendet haben, können Sie unter folgender Adresse einen kostenlosen Tenant erstellen:
Jeder Tenant wird mit zwei gebrauchsfertigen Umgebungen geliefert, sodass Sie frei experimentieren können.
Konfigurieren Sie die Authentifizierung
Beginnen Sie mit configuring, wie sich Benutzer anmelden sollten. In diesem Fall möchten wir, dass sich Benutzer ohne Passwort anmelden und nur ihre E-Mail-Adresse und ein ihnen zugesandtes Einmalpasswort (OTP) verwenden.
- Wählen Sie in Ihrer FoxIDs Umgebung die Registerkarte Authentifizierungen aus.
- Klicken Sie auf Standard – Benutzeroberfläche für die Benutzeranmeldung.
- Deaktivieren Sie im Abschnitt Authentifizierung die Passwortauthentifizierung und aktivieren Sie Passwortlos mit E-Mail (Einmalpasswort).
- Klicken Sie auf Aktualisieren, um die Änderungen zu speichern.
Dies ermöglicht Benutzern die Erstellung eines neuen Kontos und bietet ein passwortloses Erlebnis, bei dem sie sich einfach durch Eingabe ihrer E-Mail-Adresse und des erhaltenen OTP authentifizieren.
Generieren Sie die ASP.NET Core-Anwendung
Als nächstes benötigen wir eine Anwendung zur Authentifizierung. Sie können entweder die KI-Eingabeaufforderung verwenden, um eine neue Anwendung ASP.NET Core Razor Pages für .NET 10 zu generieren, oder OpenID Connect zu einer vorhandenen Anwendung hinzufügen.
Lesen Sie den Beitrag „Passwortlose Authentifizierung in ASP.NET Core mit FoxIDs und E-Mail-basierter OTP“, wenn Sie die ASP.NET Core-Anwendung manuell erstellen möchten.
Für diese exemplarische Vorgehensweise erstelle ich eine einfache ASP.NET Core-Anwendung in VS Code mit Codex. Sie können auch Copilot verwenden.
Sie sind ein erfahrener ASP.NET Core-Entwickler.
Ziel: Erstellen (oder aktualisieren) Sie eine ASP.NET Core-Webanwendung, die Benutzer mit FoxIDs unter Verwendung von OpenID Connect (Autorisierungscodefluss) authentifiziert, wobei Cookie-Authentifizierung für die lokale Sitzung und OIDC als Challenge-Schema verwendet werden.
### Modus (wählen Sie einen)
- MODE = "NEW_APP" -> Erstellen Sie eine neue Razor Pages-App
- MODE = "EXISTING_APP" -> Ändern Sie die aktuelle Lösung, ohne vorhandene Routen/Seiten zu beschädigen
MODE: {{MODE}}
### App-Details
- ProjectName: {{PROJECT_NAME}} (wird nur verwendet, wenn MODE = "NEW_APP")
- TargetFramework: net10.0 (oder vorhanden bleiben, falls neuer)
- Lokale HTTPS-URL (muss mit der FoxIDs Redirect-URI-Basisadresse übereinstimmen): {{APP_BASE_URL}} (Beispiel: https://localhost:7283/)
### FoxIDs OIDC Konfiguration
Kodieren Sie Authority, ClientId oder ClientSecret nicht fest im Code oder in dieser Eingabeaufforderung.
Stattdessen:
- Lesen Sie sie aus den Konfigurationsschlüsseln:
- "IdentitySettings:Authority"
- "IdentitySettings:ClientId"
- "IdentitySettings:ClientSecret"
- Die endgültige Antwort muss dem Benutzer klar erklären, wo und wie diese Konfigurationswerte festgelegt werden (z. B. in appsettings.json, Umgebungsvariablen oder Benutzergeheimnissen).
### Anforderungen an die Umsetzung
1) Authentifizierung in Program.cs hinzufügen:
- Authentifizierung konfigurieren:
- DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme
- DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme
- Cookie-Authentifizierung hinzufügen.
- Fügen Sie die OpenID Connect Authentifizierung hinzu:
- Authority aus der Konfiguration: "IdentitySettings:Authority"
- ClientId aus der Konfiguration: "IdentitySettings:ClientId"
- ClientSecret aus der Konfiguration: "IdentitySettings:ClientSecret"
- ResponseType = "code"
- SaveTokens = true
- Scopes: "openid", "profile", "email", "offline_access"
- MapInboundClaims = false
- TokenValidationParameters:
- NameClaimType = "sub"
- RoleClaimType = "role"
- Fügen Sie OpenIdConnectEvents hinzu mit:
- OnAuthenticationFailed: Geben Sie nur in Development eine einfache Klartextantwort mit der Ausnahmemeldung zum Debuggen zurück. Legen Sie niemals Ausnahmedetails oder PII in der Produktion offen.
- Stellen Sie sicher, dass die Middleware registriert ist:
- app.UseAuthentication() wird vor app.UseAuthorization() aufgerufen.
2) Konfigurationsverkabelung hinzufügen:
- Fügen Sie einen Abschnitt `IdentitySettings` in appsettings.json hinzu, der nur nicht geheime Platzhalterwerte enthält, zum Beispiel:
- "Authority": "https://your-foxids-authority/"
- "ClientId": "your-client-id"
- Lesen Sie "IdentitySettings:ClientSecret" aus der Konfiguration, speichern Sie seinen Wert jedoch in den Benutzergeheimnissen .NET für die lokale Entwicklung oder in einer Umgebungsvariablen oder einem sicheren Geheimspeicher in der Produktion.
- Wenn MODE = "EXISTING_APP", führen Sie diesen Abschnitt in die vorhandene Konfiguration ein, ohne nicht verwandte Einstellungen zu überschreiben.
- Fügen Sie der endgültigen Antwort Kommentare oder erläuternden Text hinzu, der:
- Diese Werte müssen vom Benutzer durch ihre tatsächlichen Werte FoxIDs Authority, ClientId und ClientSecret ersetzt werden.
- Geheimnisse dürfen nicht in appsettings.json geschrieben oder der Quellcodeverwaltung übergeben werden.
3) Anmelde-/Abmeldeendpunkte hinzufügen:
- Erstellen Sie `Controllers/AuthController.cs` mit einem Standard-Controller MVC:
- Verwenden Sie das Routenmuster `[controller]/[action]`.
- Anmeldeaktion (GET):
- Wenn der Benutzer bereits authentifiziert ist, leiten Sie ihn zu "/" weiter.
- Andernfalls geben Sie einen Challenge aus, indem Sie OpenIdConnectDefaults.AuthenticationScheme mit RedirectUri = "/" verwenden.
- Abmeldeaktion (POST, mit [ValidateAntiForgeryToken]):
- Wenn der Benutzer nicht authentifiziert ist, leiten Sie ihn zu "/" um.
- Ansonsten SignOut von:
- CookieAuthenticationDefaults.AuthenticationScheme und
- OpenIdConnectDefaults.AuthenticationScheme
mit einem RedirectUri = "/".
4) Teilweise UI-Anmeldung hinzufügen:
- Erstellen Sie `Pages/Shared/_LoginPartial.cshtml`.
- Verhalten:
- Wenn der Benutzer authentifiziert ist:
- Zeigen Sie eine Schaltfläche „Abmelden“ an, die mit einem Fälschungsschutz-Token an `Auth/Logout` sendet.
- Wenn der Benutzer nicht authentifiziert ist:
- Zeigen Sie einen „Anmelden“-Link an, der auf `Auth/Login` verweist.
5) Teilweise zum Layout hinzufügen:
- Aktualisieren Sie `Pages/Shared/_Layout.cshtml`, um Folgendes einzuschließen:
- `<partial name="_LoginPartial" />` im Navigationsleistenbereich, vorzugsweise auf der rechten Seite der Navigationsleiste ausgerichtet.
- Entfernen Sie keine vorhandenen Layoutinhalte.
6) Verhalten auf der Startseite (für die Claims-Anzeige):
- Wenn MODE = "NEW_APP" oder wenn die vorhandene Homepage praktisch leer ist (nur Boilerplate oder kein sinnvoller Inhalt):
- Implementieren Sie eine einfache Homepage, die:
- Begrüßt den Benutzer.
- Wenn der Benutzer authentifiziert ist, wird eine Liste oder Tabelle der Benutzer-Claims (Typ und Wert) angezeigt.
- Wenn der Benutzer nicht authentifiziert ist, wird eine Meldung wie „Sie sind nicht angemeldet“ und ein Hinweis zum Klicken auf den Anmeldelink angezeigt.
- Wenn MODE = "EXISTING_APP" und die Homepage bereits aussagekräftigen Inhalt hat:
- Ändern Sie die vorhandene Homepage nicht, um eine Claims-Anzeige hinzuzufügen.
- Lassen Sie den vorhandenen Homepage-Inhalt unverändert.
### Output-Erwartungen
1) Code- und Dateiänderungen:
- Listen Sie alle erstellten oder geänderten Dateien auf.
- Geben Sie für jede Datei den vollständigen Dateiinhalt aus (oder ein sehr klares Diff, wenn die Datei groß ist).
- Stellen Sie sicher, dass das Projekt mit `dotnet run` (oder dem üblichen Befehl für das ausgewählte Zielframework) erstellt und ausgeführt werden kann.
2) Konfigurationsplatzierung und Anleitung:
- Zeigen Sie deutlich, wo genau die Konfigurationswerte Authority, ClientId und ClientSecret im Code gelesen werden (Abschnitt IdentitySettings).
- Erklären Sie dem Benutzer:
- Dass sie diese Werte festlegen müssen, nachdem der Code generiert wurde.
- So legen Sie Authority und ClientId in appsettings.json fest.
- So legen Sie ClientSecret lokal in Benutzergeheimnissen oder einer Umgebungsvariablen oder einem sicheren Geheimspeicher in der Produktion fest.
3) Informationen zum Anwendungsendpunkt:
- Geben Sie in Ihrer abschließenden Antwort an den Benutzer ausdrücklich Folgendes an:
- Die lokale Endpunkt-URL, die die Anwendung überwacht (z. B. `{{APP_BASE_URL}}` oder die URL, die die Vorlage verwendet).
- Eine kurze, klare Anweisung, die dem Benutzer sagt:
- „Konfigurieren Sie Ihre FoxIDs Authority und ClientId im Abschnitt IdentitySettings. Speichern Sie ClientSecret in Benutzergeheimnissen lokal oder in einer Umgebungsvariablen oder einem sicheren Geheimspeicher in der Produktion, damit es zur Laufzeit gelesen werden kann, ohne festgeschrieben zu werden.“
4) Leitplanken:
- Führen Sie kein unabhängiges Refactoring ein.
- Entfernen Sie keine vorhandenen Funktionen, die über das hinausgehen, was für die Integration von OIDC mit FoxIDs unbedingt erforderlich ist.
- Konzentrieren Sie sich bei der Lösung auf Folgendes:
- Cookie + OIDC Authentifizierung hinzufügen,
- AuthController,
- Teilweise Anmeldung,
- Minimale Änderungen an der Startseite wie beschrieben.
Setzen Sie nun alle oben genannten Schritte um.
Die KI-Antwort sollte Ihnen mitteilen, wo Sie Authority, Client-ID und Client-Geheimnis konfigurieren müssen.
Versuchen Sie nun, die Anwendung auszuführen, um den Endpunkt zu finden.
Meine Beispielanwendung läuft lokal auf https://localhost:7154/
Den KI-generierten Beispielcode finden Sie unter: https://github.com/ITfoxtec/dotnet.samples/tree/main/WebAppPasswordLessEmailAI
Konfigurieren Sie die Webanwendung in FoxIDs
Da wir nun die lokale Adresse der Webanwendung kennen, können wir sie in FoxIDs registrieren, damit Benutzer über OpenID Connect authentifiziert werden können.
- Wählen Sie in Ihrer FoxIDs Umgebung die Registerkarte Anwendungen.
- Wählen Sie Neue Anwendung und dann Webanwendung – OpenID Connect.
- Geben Sie unter Name einen Namen ein, zum Beispiel: ASP.NET Webanwendung.
- Fügen Sie im Umleitungs-URI die Basisadresse der Anwendung hinzu: https://localhost:7154/ Standardmäßig ermöglicht FoxIDs die Weiterleitung zu jeder nachfolgenden Seite unter dieser Basis-URL. Wenn Sie eine strengere Validierung bevorzugen, können Sie absolute Weiterleitungs-URIs verlangen.
- Klicken Sie auf Erstellen.
FoxIDs zeigt jetzt die Verbindungsdetails für Ihre neue Anwendung an, einschließlich:
- Authority
- Kunden-ID
- Client-Geheimnis
Kopieren Sie Authority und Client-ID in den Abschnitt IdentitySettings des Projekts. Speichern Sie das Client-Geheimnis in den Benutzergeheimnissen .NET lokal oder in einer sicheren Umgebungsvariablen oder einem geheimen Speicher in der Produktion.
Konfigurieren Sie die Authentifizierung in der Anwendung ASP.NET
Nachdem die Anwendung FoxIDs erstellt wurde, besteht der nächste Schritt darin, die Authentifizierung im Projekt ASP.NET Core zu konfigurieren.
Fügen Sie die nicht geheimen Verbindungsdetails FoxIDs zu appsettings.json hinzu:
{
"IdentitySettings": {
"Authority": "https://foxids.com/{tenant}/{environment}/{application}/",
"ClientId": "your-client-id"
},
"Logging": {
"LogLevel": {
"Default": "Information",
"Microsoft.AspNetCore": "Warning"
}
},
"AllowedHosts": "*"
}
Speichern Sie den geheimen Clientschlüssel lokal, ohne ihn zu appsettings.json hinzuzufügen:
dotnet user-secrets init
dotnet user-secrets set "IdentitySettings:ClientSecret" "your-client-secret"
Ersetzen Sie die Beispielwerte durch diejenigen aus Ihrer eigenen FoxIDs Umgebung und übergeben Sie niemals das echte Client-Geheimnis.
Einloggen
Klicken Sie auf Anmelden und Sie werden zum FoxIDs Anmeldebildschirm weitergeleitet.
Wählen Sie Benutzer erstellen.
Füllen Sie das Formular Benutzer erstellen mit Ihrer E-Mail-Adresse (oder einer Test-E-Mail, auf die Sie Zugriff haben), Ihrem Vor- und Nachnamen aus und klicken Sie dann auf Erstellen.
Geben Sie das Einmalpasswort (OTP) ein, das Sie per E-Mail erhalten haben, und klicken Sie dann auf Anmelden.
Sie sind angemeldet und die Claims Ihres Testbenutzers werden angezeigt.
Versuchen Sie als Nächstes, sich abzumelden und erneut anzumelden, um den kennwortlosen Anmeldevorgang per E-Mail OTP zu erleben.