Wie man eine Full-Stack Authentication App erstellt

Die meisten Webanwendungen benötigen eine Registrierungs- und Anmeldefunktion. Für Anfänger kann dies jedoch eine Herausforderung darstellen. Selbst erfahrene Entwickler bevorzugen die Verwendung externer Dienste, um die Authentifizierung von Anfang an zu handhaben. Wenn wir von einem Full-Stack-Authentifizierungsfluss sprechen, bedeutet dies, dass sowohl die Benutzeranmeldung und -registrierung auf dem Frontend als auch die Sicherung der Backend-API eingerichtet werden müssen. Sie müssen also an beiden Teilen arbeiten.

Dieser Beitrag führt Sie durch den Aufbau einer Full-Stack-Authentifizierungsanwendung mit Apache APISIX, Authgear und OpenID Connect (OIDC). Den Quellcode des Projekts finden Sie auf GitHub. Für einen schnellen Start mit der Anwendung klonen Sie einfach das Repository und führen den Code-Beispiel aus, indem Sie die Schritte in der README.md-Datei befolgen.

Lernziel

Dieser Inhalt soll zeigen, wie man die Authentifizierung sowohl auf dem Backend als auch auf dem Frontend einrichtet. Darüber hinaus ist er sowohl für Anfänger als auch für erfahrene Entwickler gedacht, die Full-Stack-Entwickler werden möchten.

Die Rolle von APISIX, Authgear und OIDC in der Authentifizierung

Bevor wir in die Anleitung eintauchen, stellen wir kurz die Tools vor, die wir verwenden werden.

• OIDC (OpenID Connect) ist eine einfache Identitätsschicht, die auf dem OAuth 2.0-Protokoll aufbaut. Es ermöglicht Drittanbieteranwendungen, Benutzer zu überprüfen und grundlegende Profilinformationen auf standardisierte Weise zu erhalten.

• APISIX ist eines der beliebtesten Open-Source-API-Gateways. Es wurde nicht nur für das API-Management entwickelt, sondern auch, um die Sicherheit und den Schutz dieser APIs zu gewährleisten. Eine der herausragendsten Funktionen in seinem Sicherheitsarsenal ist die Unterstützung für OIDC über sein Plugin.

• Authgear ist eine hoch anpassbare Identity-as-a-Service (IDaaS)-Plattform für Web- und Mobile-Anwendungen. Ihre Benutzer können sich über eine integrierte Benutzeroberfläche bei Ihrer Anwendung anmelden (Sie müssen keine Benutzeroberfläche für die Registrierung und den Anmeldefluss erstellen), was ihnen eine sichere, standardbasierte Anmeldeerfahrung bietet, die Sie mit Ihrem eigenen Branding und verschiedenen Authentifizierungsmethoden wie E-Mail, Social Logins, Passwortlos, Biometrische Anmeldungen, Einmalpasswort (OTP) mit SMS/WhatsApp und Multi-Faktor-Authentifizierung (MFA) anpassen können. Es verwendet OpenID Connect (OIDC) und OAuth 2.0, um zu identifizieren, wer ein Benutzer ist, und die Autorisierung für geschützte Ressourcen zu gewähren.

Der Authentifizierungs-Workflow

Hier ist ein hochrangiges Architekturdiagramm, wie der Authentifizierungsprozess aussieht:

Die im Diagramm gezeigten Schritte werden im Folgenden detailliert erklärt:

In dem obigen Diagramm ist der Client jede Webanwendung, das API-Gateway ist APISIX, der Identitätsanbieter ist Authgear und der Upstream ist eine Backend-API.

1. Eine Webanwendung kann verschiedene Formen annehmen, von Single Page Apps (SPA), die mit React, Vue oder Angular erstellt wurden, bis hin zu Standard-Webanwendungen, die mit Frameworks wie Express, NextJS und ähnlichen Plattformen erstellt wurden. Die Webanwendung ist unsere Client-Anwendung mit Frontend, die eine Anfrage an einen Identitätsanbieter (Authgear) mit einer Client-ID und einem Client-Geheimnis sendet, um ein Zugriffstoken wie JSON Web Tokens (JWT) zu erhalten.
2. Wenn die angegebenen Anmeldeinformationen korrekt sind, antwortet Authgear mit einem JWT-Token an die Webanwendung. Sie können im Authgear-Portal beliebig viele Benutzer für Ihre Anwendung erstellen, und die Benutzer können sich über die von Authgear gehosteten UI-Seiten anmelden.
3. Nachdem das JWT-Token erhalten wurde, sendet der Client eine Anfrage an ein API-Gateway (APISIX) mit dem Zugriffstoken und den durch das Gateway geschützten Backend-APIs.
4. Bevor die Anfrage verarbeitet wird, muss APISIX sicherstellen, dass das bereitgestellte Token gültig ist, nicht abgelaufen ist und die richtigen Berechtigungen für die angeforderten Daten oder Dienste hat. Wenn APISIX das Token nicht lokal validieren kann, sendet es eine Token-Introspection-Anfrage an den Authgear-Autorisierungsserver. Diese Anfrage wird typischerweise an den introspection-Endpunkt des Servers gesendet.
5. Authgear empfängt die Introspection-Anfrage und verarbeitet sie. Der Server überprüft seine Aufzeichnungen, um die Gültigkeit des Tokens, dessen Ablauf und die zugehörigen Berechtigungen zu bestimmen, und nach der Bestimmung des Token-Zustands antwortet er APISIX.
6. Basierend auf der Token-Introspection-Antwort von Authgear kann APISIX dann eine fundierte Entscheidung treffen. Wenn das Token gültig ist, leitet es die Anfrage an die Backend-API weiter, andernfalls lehnt es die Anfrage des Clients mit einem nicht autorisierten HTTP-Statuscode ab.
7. APISIX sendet die Antwort von der Backend-API mit den angeforderten Ressourcen.

Full-Stack-Authentifizierungsanwendung mit APISIX, Authgear und OIDC.

Für das Demo-Projekt haben wir Docker verwendet, um 3 Komponenten (Backend, API-Gateway und Frontend) mit einem einzigen Befehl zu installieren und auszuführen. Wir haben ExpressJS für die Frontend-Webanwendung verwendet und unsere Single Page App unter localhost:3000 gehostet. Das APISIX-Gateway kann unter localhost:9080 aufgerufen werden, während unsere Backend-API (es kann jede API sein, die Sie mit Python, Java, NodeJS usw. erstellen) unter localhost:9081 eingerichtet ist.

Voraussetzungen

Bevor Sie beginnen, benötigen Sie Folgendes:

• Ein kostenloses Authgear-Konto. Registrieren Sie sich, falls Sie noch keines haben.
• Docker wird verwendet, um alle Dienste zu installieren.

Authgear konfigurieren

Um die Dienste von Authgear zu nutzen, müssen Sie eine Anwendung im Authgear-Dashboard einrichten und die OIDC-Client-Informationen von Authgear erhalten. Diese Einrichtung ermöglicht es Benutzern in Authgear, sich automatisch bei der Webanwendung anzumelden, sobald sie von Authgear authentifiziert wurden.

Schritt 1: Erstellen Sie eine Anwendung in Authgear

Um die Anwendung einzurichten, navigieren Sie zur Authgear-Portal-UI und wählen Sie Anwendungen in der linken Navigationsleiste. Verwenden Sie den interaktiven Selektor, um eine neue Authgear OIDC Client-Anwendung zu erstellen.

Schritt 2: Kopieren Sie die App-Anmeldeinformationen

Jeder Anwendung in Authgear wird eine alphanumerische, eindeutige CLIENT ID und ein CLIENT Secret zugewiesen, die Ihr Anwendungscode verwendet, um Authgear-APIs in der Webanwendung aufzurufen. Notieren Sie sich den generierten Authgear ISSUER (z.B. https://example-auth.authgear-apps.com), CLIENT ID, CLIENT SECRET aus der Ausgabe. Sie werden diese Werte im nächsten Schritt für die Webanwendungskonfiguration verwenden.

Schritt 3: Konfigurieren Sie die Redirect-URI

Eine Authorized Redirect URI Ihrer Anwendung ist die URL, zu der Authgear nach der Authentifizierung des Benutzers weiterleitet, damit das OpenID Connect Middleware den Authentifizierungsprozess abschließen kann. In unserem Fall wird es die Startseite für unser Frontend sein und unter http://localhost:3000 laufen.

Setzen Sie die folgende http://localhost:3000 entsprechend in das Feld Authorized Redirect URIs. ****Wenn dies nicht gesetzt ist, werden die Benutzer nach der Anmeldung nicht zu Ihrer Anwendung zurückgeleitet.

Schritt 4: Aktivieren Sie das Zugriffstoken

Aktivieren Sie außerdem die Option Issue JWT as an access token im Abschnitt Access Token der App-Konfiguration:

Schritt 5: Wählen Sie eine Anmelde-Methode

Nachdem Sie die Authgear-App erstellt haben, wählen Sie aus, wie sich die Benutzer auf der Anmeldeseite authentifizieren sollen. Navigieren Sie im Tab Authentifizierung zu Anmelde-Methoden, wo Sie eine Anmelde-Methode aus verschiedenen Optionen auswählen können, darunter per E-Mail, Mobiltelefon oder Social, nur mit einem Benutzernamen oder der von Ihnen angegebenen benutzerdefinierten Methode. Für diese Demo wählen wir den E-Mail+Passwortlos-Ansatz, bei dem unsere Benutzer aufgefordert werden, ein Konto zu registrieren und sich mit ihrer E-Mail anzumelden. Sie erhalten ein Einmalpasswort (OTP) an ihre E-Mail und bestätigen den Code, um die App zu nutzen.

Demo-Projekt einrichten und ausführen

Nachdem Authgear erfolgreich konfiguriert wurde, können wir das GitHub-Repo holen, Umgebungsvariablen konfigurieren und die Dienste ausführen:

Beginnen Sie damit, das Projekt auf Ihren lokalen Rechner zu klonen:

git clone https://github.com/Boburmirzo/apisix-authgear-oidc-full-stack-auth.git

Machen Sie das Projektverzeichnis zu Ihrem aktuellen Arbeitsverzeichnis:

cd apisix-authgear-oidc-full-stack-auth

Erstellen Sie im Stammverzeichnis Ihres Projekts, wo sich die Docker-Compose-YAML-Datei befindet, eine Datei .env mit den folgenden Umgebungsvariablen:

CLIENT_ID={AUTHGEAR_APP_CLIENT_ID}
CLIENT_SECRET={AUTHGEAR_APP_CLIENT_SECRET}
ISSUER={AUTHGEAR_ISSUER}
REDIRECT_URI=http://localhost:3000

Ersetzen Sie die Werte in den Klammern mit Ihren Authgear-App-Einstellungen aus dem Abschnitt Authgear konfigurieren oben, wie Issuer, ClientId, ClientSecret.

Nachdem Sie die Umgebungsdatei hinzugefügt haben, führen Sie den Befehl docker compose up aus dem Stammverzeichnis aus.

Authentifizierungsfluss testen

Für die Demo haben wir Docker verwendet, um 3 Komponenten (Backend, API-Gateway und Frontend) mit einem einzigen Befehl zu installieren und auszuführen. Wir haben ExpressJS für die Frontend-Webanwendung verwendet und unsere Single Page App unter localhost:3000 gehostet. Das APISIX-Gateway kann unter localhost:9080 aufgerufen werden, während unsere Backend-API (es kann jede API sein, die Sie mit Python, Java, NodeJS usw. erstellen) unter localhost:9081 eingerichtet ist.

Nachdem Sie sich mit Ihrer E-Mail registriert haben, erhalten Sie ein Einmalpasswort (OTP):

Sobald Sie authentifiziert sind, dürfen Sie API-Ressourcen anfordern und erhalten eine Antwort vom Backend-Dienst:

APISIX hat die OIDC-Authentifizierung mit Authgear durchgesetzt und einen sicheren und reibungslosen Authentifizierungsfluss mit einfacher Einrichtung bereitgestellt.

Nächste Schritte

Diese Kombination von Tools, die wir verwendet haben, gewährleistete Sicherheit und ermöglichte es Entwicklern, sich auf die Kernlogik des Geschäfts zu konzentrieren, anstatt auf die Komplexitäten des Authentifizierungsprozesses. Ab jetzt, da Sie die Authentifizierungsfunktion aktiviert haben, können Sie beginnen, Ihre Benutzeroberfläche für die Startseite zu erstellen, Daten von der API anzuzeigen und andere Seiten zu entwickeln.

Verwandte Ressourcen

Apache APISIX Autorisierungsrichtlinie: Schützen Sie Ihre APIs

SSO mit OIDC und Keycloak einrichten