Erstellen Sie eine benutzerdefinierte Authentifizierung mit Appsmith und APISIX

Authentifizierungsabläufe sind ein grundlegender Bestandteil von Webanwendungen. Sie gewährleisten die Sicherheit und Privatsphäre der Benutzerdaten, während diese Ihre Anwendung nutzen. Obwohl es viele vorgefertigte Authentifizierungslösungen gibt, ermöglicht der Aufbau eines Authentifizierungssystems mithilfe einer Low-Code-UI-Entwicklungsplattform und einer API-Management-Lösung die einfache Erstellung sicherer Webanwendungen. Sie können eine Anwendung ohne Kenntnisse in Frontend- und Backend-Technologien und -Tools erstellen. Sie müssen weder Python, Java, HTML, CSS noch andere JavaScript-Frameworks beherrschen. In diesem Beitrag erfahren Sie, wie Sie einen benutzerdefinierten, einfachen Login-Flow und Seiten auf der Benutzeroberfläche erstellen, um Ihre Anwendung mit Appsmith, Apache APISIX und JWT zu sichern.

Appsmith ist eine leistungsstarke Low-Code-Entwicklungsplattform, mit der Benutzer einfach Webanwendungen und Dashboards erstellen können. Sie bietet eine visuelle Oberfläche und eine umfassende Sammlung vorgefertigter Komponenten, was sie sowohl für Entwickler als auch für Nicht-Entwickler zugänglich macht.

Lernziele

In diesem Artikel lernen Sie Folgendes:

• Entwerfen eines Authentifizierungsprozesses in einer Low-Code-Umgebung.
• Einrichten der Backend-Authentifizierungs-API mit APISIX.
• Erstellen von UI-Seiten mithilfe von Widgets in Appsmith.
• Aktivieren der tokenbasierten Authentifizierung.

Entwerfen der Authentifizierungsarchitektur

Bevor Sie mit der Implementierung beginnen, ist es wichtig, zunächst die Architektur Ihres Authentifizierungssystems für Ihre Anwendung zu entwerfen. Berücksichtigen Sie dabei Schlüsselkomponenten wie Benutzerregistrierung, Login, Passwort, Sitzungsverwaltung und JWT-Token-basierte Authentifizierung. Definieren Sie den Informationsfluss zwischen Appsmith und APISIX, um einen klaren und effizienten Authentifizierungs-Workflow zu gewährleisten.

Wir werden eine einfache mobile App erstellen, die drei Seiten hat: Registrierung, Login und Hauptseite. Die Aufgaben teilen sich in zwei Teile auf. Im ersten Teil werden wir die Backend-API mit dem Apache APISIX API-Gateway einrichten, das Authentifizierungsanfragen verarbeitet. Wir verwenden bestehende API-Gateway-Endpunkte, um die Benutzerregistrierung, den Login und die Token-Generierung zu ermöglichen. Im zweiten Teil verwenden wir die Drag-and-Drop-Oberfläche von Appsmith mit vorgefertigten UI-Komponenten, um die Registrierungs-, Login- und Hauptseiten zu erstellen, und verbinden sie schließlich mit der API, um Formularübermittlungen zu verarbeiten. Beginnen wir mit dem Aufbau dieser Komponenten in den folgenden Abschnitten.

Teil 1: Einrichten der Backend-Authentifizierungs-API

Wir beginnen mit der Einrichtung der Backend-API, die Authentifizierungsanfragen von der mobilen App verarbeitet. APISIX kann verwendet werden, um die Authentifizierung durchzusetzen und API-Endpunkte zu schützen. APISIX ermöglicht es Ihnen, Benutzeranmeldeinformationen zu validieren, Authentifizierungstoken auszustellen und den Zugriff auf Ihre APIs zu kontrollieren. Durch die Integration von APISIX in Ihr mobiles Authentifizierungssystem können Sie eine zusätzliche Sicherheitsebene hinzufügen und sicherstellen, dass nur authentifizierte Benutzer auf Ihre geschützten Ressourcen zugreifen können.

Voraussetzungen

• Docker wird verwendet, um den containerisierten etcd und APISIX zu installieren.
• curl wird verwendet, um Anfragen an die APISIX Admin API zu senden. Sie können auch Tools wie Postman verwenden, um mit der API zu interagieren.

Schritt 1: Apache APISIX installieren

APISIX kann einfach mit dem folgenden Quickstart-Skript installiert und gestartet werden:

curl -sL https://run.api7.ai/apisix/quickstart | sh

Schritt 2: Konfigurieren des Backend-Dienstes (Upstream)

Als Nächstes konfigurieren wir unseren Backend-Dienst. Für Demonstrationszwecke kann dies jeder API-Dienst sein, der unsere Backend-Logik bereitstellt. Sie können ihn auch durch Ihren eigenen Dienst ersetzen. Ich verwende einen öffentlichen Mock-Server http://httpbin.org/, der zufällige Antworten generiert. Der Einfachheit halber haben wir einen einzelnen Endpunkt, der die öffentliche IP-Adresse unserer Maschine zurückgibt: http://httpbin.org/ip.

Um Anfragen an den Backend-Dienst für die Mock-API weiterzuleiten, müssen Sie diesen konfigurieren, indem Sie einen Upstream-Server in Apache APISIX über die Admin API hinzufügen.

curl http://127.0.0.1:9180/apisix/admin/upstreams/1 -X PUT -d '
{
   "name":"Mock API upstream",
   "desc":"Register Mock API as the upstream",
   "nodes":{
      "httpbin.org:80":1
   }
}'

Schritt 3: Erstellen einer neuen Plugin-Konfiguration

In diesem Schritt konfigurieren wir ein Plugin (mithilfe des Plugin Config-Objekts) für eine Route, die wir im nächsten Schritt erstellen. APISIX aktiviert das JWT-Plugin, um unsere Endpunkte zu sichern. Bei jeder Anfrage an den Endpunkt überprüft es die JWT-Anmeldeinformationen im Anfrage-Header.

curl http://127.0.0.1:9180/apisix/admin/plugin_configs/1 -X PUT -d '
{
   "plugins":{
      "jwt-auth": {}
   }
}'

Schritt 4: Erstellen einer Route für die Backend-API

Wir erstellen ein neues Route-Objekt in APISIX, das alle GET-Anfragen an den URI /ip abfängt und die bestehenden Upstream- und Plugin-Konfigurationen verwendet, um den Routing-Mechanismus und die Authentifizierungsrichtlinien zu aktivieren. Es überprüft das JWT-Plugin im Header, und wenn es vorhanden und gültig ist, leitet es die Anfrage an unseren Mock-Server weiter. Andernfalls gibt es sofort einen Unauthorized-Fehler zurück, und die Anfrage erreicht den eigentlichen Dienst nicht.

curl -i http://127.0.0.1:9180/apisix/admin/routes/1 -X PUT -d '
{
   "name":"Mock API server route",
   "desc":"Create a new route in APISIX for the mock server endpoint",
   "methods":[
      "GET"
   ],
   "uri":"/ip",
   "upstream_id":"1",
   "plugin_config_id":1
}'

Schritt 5: Erstellen einer Route für die Signierung des JWT-Tokens

Wir haben die tokenbasierte Authentifizierung für unsere API implementiert. APISIX kann auch als Identitätsanbieter fungieren, um Token zu generieren und zu validieren. Dazu müssen Sie eine Route für einen neuen API-Endpunkt einrichten, der das Token mithilfe des public-api-Plugins signiert:

curl http://127.0.0.1:9180/apisix/admin/routes/login -X PUT -d '
{
    "uri": "/login",
    "plugins": {
        "public-api": {
            "uri": "/apisix/plugin/jwt/sign"
        }
    }
}'

Durch die Ausführung des obigen curl-Befehls haben wir eine neue Route namens login mit dem URI-Pfad /login registriert, die ein neues Token signiert, wenn ein bestehender Benutzer versucht, sich von der Login-Seite der mobilen App aus mit seiner E-Mail-Adresse anzumelden.

Teil 2: Erstellen von Benutzerregistrierungs- und Login-Formularen in Appsmith

Mit der Low-Code-Oberfläche von Appsmith können wir Benutzerregistrierungs- und Login-Formulare erstellen. Appsmith bietet eine breite Palette von vorgefertigten Widgets, die einfach angepasst werden können. Entwerfen Sie die Formulare mit Eingabefeldern für Benutzername, Passwort und alle zusätzlichen Informationen, die Sie im Dashboard benötigen.

Bevor Sie beginnen

Ich werde den Installationsprozess von Appsmith auf Ihrem Computer überspringen. Sie können auf der Appsmith-Website erfahren, wie Sie Appsmith mit Docker installieren. Stellen Sie sicher, dass Sie Appsmith installiert haben und darauf unter http://localhost zugreifen können. Wenn Sie Appsmith bereitstellen und ausführen, wird standardmäßig eine Anwendung mit dem Titel My first application hinzugefügt. Sie können diese Anwendung verwenden, um Ihre erste App zu erstellen.

Schritt 1: Erstellen einer Registrierungsseite

In unserem Fall registriert sich ein neuer Benutzer zunächst in der mobilen App auf der Registrierungsseite. Beginnen Sie mit der Erstellung einer neuen Seite namens RegistrationPage in Ihrer Anwendung. Fügen Sie Input-Widgets für E-Mail (benannt EmailInput), Benutzername (benannt UsernameInput) und Passwort (PasswordInput) hinzu. Fügen Sie außerdem Register (benannt RegisterButton) und Login (benannt LoginButton) Button-Widgets zum Zeichenbrett hinzu. Das Endergebnis sieht wie folgt aus:

Wenn ein Benutzer die Register-Schaltfläche mit den eingegebenen Details drückt, benötigen Sie eine Abfrage, um die Kommunikation mit dem APISIX Admin API-Endpunkt zu handhaben, um einen neuen API-Consumer im API-Gateway zu registrieren. Erstellen Sie eine API-Abfrage (benannt APISIX_Admin_Add_Consumer_API) mit dem APISIX-Consumers-Endpunkt-URI /apisix/admin/consumers. Platzieren Sie den Text der Input-Widgets in den Abfragekörper. Der Zugriff auf die Input-Widgets sollte ungefähr so aussehen:

Beachten Sie, dass wir die Adresse host.docker.internal anstelle von localhost verwenden, da APISIX in seinem eigenen Container in einem anderen Docker-Netzwerk als Appsmith läuft.

Nachdem die Abfrage an APISIX gesendet wurde, registriert sie den neuen Consumer, und das Consumer-Objekt verwendet das jwt-auth-Plugin mit Schlüssel und Geheimnis. Sie können testen, ob der Consumer erfolgreich im System registriert wurde, indem Sie den angegebenen Consumer anhand des Benutzernamens appsmithuser abrufen. Führen Sie diesen curl-Befehl aus:

curl http://127.0.0.1:9180/apisix/admin/consumers/appsmithuser

Bestehende Benutzer können direkt zur Login-Seite gehen. Siehe nächster Abschnitt.

Schritt 2: Erstellen einer Login-Seite

Gehen Sie zurück auf die Anwendungsleinwand, fügen Sie eine neue Seite namens Login-Seite hinzu und richten Sie das Login-Formular mit Input (für die Eingabe der E-Mail-Adresse des Benutzers) und Button (für den Login) Widgets ein.

Erstellen Sie dann eine API-Abfrage (benannt login_api) für den APISIX-Login-Route-URI-Pfad /login und setzen Sie den key-Parameter auf {{EmailInput.text}}. Wenn Sie die Abfrage testen und die Ausführungsschaltfläche drücken, sollte unser Authentifizierungs-API-Gateway-Endpunkt bei einer erfolgreichen Antwort ein gültiges Zugriffstoken zurückgeben. Im folgenden Beispiel ist der jwt-Schlüssel ein Token, das anzeigt, dass der Benutzer auf der APISIX-Seite authentifiziert wurde.

Um die login_api-Abfrage über die Login-Schaltfläche auszuführen, müssen Sie die onClick-Eigenschaft der Abfrage festlegen.

Es ist auch möglich, das JWT-Token im Appsmith-Store zu speichern und den Benutzer dann zur MainPage weiterzuleiten. Fügen Sie dazu den folgenden Code zur login_api-Aktion der Login-Seite in der onClick-Eigenschaft ein:

{{login_api.run(() => {
  const jwt = login_api?.data;
  if (jwt) {
    storeValue('jwt', jwt);
    navigateTo('MainPage', {});
  } else {
    showAlert('Login fehlgeschlagen!', 'error');
  }
})}}

Wenn der Benutzer die Authentifizierung mit APISIX nicht besteht, zeigen Sie eine Warnmeldung als Rückmeldung an, um den Benutzer darüber zu informieren, dass ein Fehler aufgetreten ist.

Schritt 3: Erstellen einer Hauptseite

Schließlich ist es an der Zeit, die MainPage der mobilen App zu konfigurieren, um angemeldeten Benutzern Zugriff zu gewähren und einige Daten anzuzeigen. Sie können dieselbe Leinwand verwenden, um Ihre UI aus Widgets zu erstellen. Sobald der Benutzer erfolgreich angemeldet ist, navigiert unsere Logik zur MainPage, und beim ersten Laden der Seite wird automatisch ein API-Aufruf an die Route http://127.0.0.1:9080/ip in APISIX mit der von Ihnen hinzugefügten Abfrage (benannt main_page_data_api) durchgeführt und die IP-Adresse vom Upstream-Server abgerufen (den wir in Teil 1 und Schritt 2 erstellt haben).

Sie werden im Authorization-Header den Wert {{appsmith.store.jwt}} bemerken, den jwt-Wert, den wir im vorherigen Schritt im Appsmith-Store gespeichert haben und der verwendet wird, um Ihrer Anwendung zu beweisen, dass der Benutzer erkannt wurde. Wenn der jwt-Wert nicht im Appsmith-Store vorhanden ist, zeigen wir dem Benutzer einen Unauthorized-Fehler an.

In meinem Fall habe ich zwei Text-Widgets zur MainPage hinzugefügt und den Textfeldwert des zweiten auf {{main_page_data_api.data}} gesetzt, was einfach die Ausgabedaten des main_page_data_api-Aufrufs sind. Siehe das Ergebnis.

Nächste Schritte

Sie können auch eine Unauthorized-Seite hinzufügen, um nicht autorisierte Benutzer auf diese Seite umzuleiten, den Fehler anzuzeigen und ihnen zu empfehlen, sich anzumelden oder zu registrieren, um ein neues Konto zu erstellen. Geben Sie Ihren Benutzern die Möglichkeit, sich mit einem Button-Widget von Ihrer App abzumelden, wenn sie fertig sind, was dazu beitragen kann, die Sicherheit Ihrer Daten zu erhöhen.

Fazit

Indem Sie die oben genannten Schritte befolgt haben, haben wir das personalisierte Authentifizierungssystem mit Appsmith und APISIX erstellt. Appsmith eignet sich für eine Vielzahl von Anwendungsfällen, von der Erstellung interner Tools und Admin-Dashboards bis hin zu Prototyping und der Entwicklung vollwertiger Anwendungen. Mit APISIX können Sie nicht nur die Authentifizierung für Ihre Benutzer durchsetzen, sondern auch zusätzliche Sicherheitsmaßnahmen wie Ratenbegrenzung, IP-Sperrung und Consumer-Einschränkungen einführen, um die Sicherheit unserer benutzerdefinierten Authentifizierungslösung zu gewährleisten.

Verwandte Ressourcen

• API-Gateway-Authentifizierung.
• Apache APISIX-Autorisierungsrichtlinie: Schützen Sie Ihre APIs.
• Tiefere Einblicke in die Authentifizierung in Microservices.