Erstellen Sie die Angular-Authentifizierung mit Logto
Lernen Sie, wie Sie einen Benutzer-Authentifizierungsablauf mit Angular durch die Integration der Angular OIDC-Clientbibliothek erstellen.
Founder
Erste Schritte
Einführung
- Logto ist eine Open-Source-Alternative zu Auth0 für den Aufbau von Identitätsinfrastrukturen. Es unterstützt verschiedene Anmeldemethoden, einschließlich Benutzername, E-Mail, Telefonnummer und beliebte soziale Anmeldungen wie Google und GitHub.
- Angular ist ein von Google erstelltes und gepflegtes Webentwicklungs-Framework.
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.
Voraussetzungen
Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:
- Ein Logto-Konto. Wenn Sie noch keins haben, können Sie sich kostenlos registrieren.
- An Angular-Entwicklungsumgebung und ein Projekt.
Erstellen Sie eine Logto-Anwendung
Um loszulegen, erstellen Sie eine Logto-Anwendung mit dem Typ "Single-Page-App". Befolgen Sie diese Schritte, um eine Logto-Anwendung zu erstellen:
- Melden Sie sich bei der Logto-Konsole an.
- Klicken Sie in der linken Navigationsleiste auf Anwendungen.
- Klicken Sie auf Anwendung erstellen.
- Suchen Sie auf der geöffneten Seite den Abschnitt "Single-Page-App" und finden Sie die Karte "Angular".
- Klicken Sie auf Mit dem Bauen beginnen und geben Sie den Namen Ihrer Anwendung ein.
- Klicken Sie auf 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.
Integrieren Sie Logto in Ihr Projekt
Installation
Installieren Sie das Logto JS Core SDK und die Angular OIDC Client-Bibliothek:
Anwendung konfigurieren
Fügen Sie in Ihrem Angular-Projekt den Auth-Provider in Ihre app.config.ts ein:
Anmelden und Abmelden implementieren
Konfigurieren Sie die Umleitungs-URIs
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:
Abonnieren Sie den Authentifizierungsstatus und zeigen Sie Benutzerinformationen an
Der OidcSecurityService bietet eine bequeme Möglichkeit, den Authentifizierungsstatus zu abonnieren:
Und verwenden Sie es im Template:
Checkpoint: Führen Sie die Anwendung aus
Jetzt können Sie die Anwendung ausführen und versuchen, sich mit Logto an- und abzumelden:
- Öffnen Sie die Anwendung in Ihrem Browser, Sie sollten die Schaltfläche "Anmelden" sehen.
- Klicken Sie auf die Schaltfläche "Anmelden" und Sie sollten zur Logto-Anmeldeseite weitergeleitet werden.
- Nachdem Sie sich angemeldet haben, sollten Sie zurück zur Anwendung weitergeleitet werden und die Benutzerdaten und die Schaltfläche "Abmelden" sehen.
- Klicken Sie auf die Schaltfläche "Abmelden" und Sie sollten zur Logto-Abmeldeseite weitergeleitet werden und dann zurück zur Anwendung mit einem abgemeldeten Zustand.
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!