Lernen Sie, wie Sie einen Benutzer-Authentifizierungsablauf mit Angular durch die Integration der Angular OIDC-Clientbibliothek erstellen.
In diesem Tutorial zeigen wir Ihnen, wie Sie mit Angular einen Benutzerauthentifizierungsablauf durch die Integration des Logto SDK erstellen. Das Tutorial verwendet TypeScript als Programmiersprache.
Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:
Um loszulegen, erstellen Sie eine Logto-Anwendung mit dem Typ "Single-Page-App". Befolgen Sie diese Schritte, um eine Logto-Anwendung zu erstellen:
Dann sollten Sie eine interaktive Anleitung sehen, die Sie durch den Prozess der Integration des Logto SDK in Ihre Angular-Anwendung führt. Der folgende Inhalt kann als Referenz für die zukünftige Verwendung dienen.
Installieren Sie das Logto JS Core SDK und die Angular OIDC Client-Bibliothek:
Fügen Sie in Ihrem Angular-Projekt den Auth-Provider in Ihre app.config.ts ein:
Wechseln Sie zur Anwendungsdetailseite der Logto-Konsole. Fügen Sie eine Umleitungs-URI http://localhost:3000/callback hinzu.
Umleitungs-URI ist ein OAuth 2.0-Konzept, das impliziert, dass der Standort nach der Authentifizierung umgeleitet werden soll.
Fügen Sie ähnlich dazu http://localhost:3000/ in den Abschnitt "Post-Sign-out-Umleitungs-URI" hinzu.
Post-Sign-out-Umleitungs-URI ist ein OAuth 2.0-Konzept, das impliziert, dass der Standort nach dem Abmelden umgeleitet werden soll.
Klicken Sie dann auf "Speichern", um die Änderungen zu speichern.
In der Komponente, in der Sie die An- und Abmeldung implementieren möchten (beispielsweise app.component.ts), injizieren Sie den OidcSecurityService und verwenden Sie ihn zum An- und Abmelden.
Fügen Sie dann im Template Buttons zum Anmelden und Abmelden hinzu:
Der OidcSecurityService bietet eine bequeme Möglichkeit, den Authentifizierungsstatus zu abonnieren:
Und verwenden Sie es im Template:
Jetzt können Sie die Anwendung ausführen und versuchen, sich mit Logto an- und abzumelden:
Wenn Sie während der Integration auf Probleme stoßen, zögern Sie nicht, unserem Discord-Server beizutreten, um mit der Community und dem Logto-Team zu chatten!