Bring deine eigene Anmeldeoberfläche zu Logto Cloud

Hintergrund#

Logto bietet eine sofort einsatzbereite Anmeldeerlebnisoberfläche, die alle Logto-Funktionen abdeckt, darunter Anmeldung, Registrierung, Passwortwiederherstellung, Single Sign-On (SSO) und mehr. Benutzer können auch das Aussehen der Anmeldeerlebnisoberfläche mit unserer Funktion "Benutzerdefinierte CSS" anpassen.

Einige Benutzer möchten jedoch weiterhin ihr Anmeldeerlebnis tiefgreifend anpassen (sowohl UI als auch Authentifizierungsabläufe), um ihr Branding und spezifische Geschäftsanforderungen anzupassen. Wir haben euch gehört! Und wir freuen uns, ankündigen zu können, dass die Funktion "Bring deine eigene UI" jetzt in Logto Cloud verfügbar ist.

In diesem Tutorial führen wir dich durch die Schritte, um deine eigene benutzerdefinierte Anmeldeoberfläche zu Logto Cloud zu erstellen und bereitzustellen.

Voraussetzungen#

Bevor du beginnst, stelle sicher, dass du Folgendes hast:

• Ein Logto Cloud-Konto mit einem Abonnementplan
• Eine Anwendung, die in Logto integriert ist (Schnellstart)
• Logto Tunnel CLI installiert
• Grundkenntnisse in HTML, CSS und JavaScript

Zur Vereinfachung werden wir in den folgenden Schritten die klassische Anmeldemethode "Benutzername & Passwort" verwenden. Denke daran, deine Anmeldemethode in der Logto-Konsole zu ändern.

Erstelle deine benutzerdefinierte Anmeldeoberfläche#

Die Mindestanforderung für eine Anmeldeoberfläche ist eine index.html-Datei mit einem Anmeldeformular, das mindestens ein Benutzername-Eingabefeld, ein Passwort-Eingabefeld und einen Absende-Button enthält. Ich habe ChatGPT verwendet, um ein Beispiel-HTML zu generieren, und dabei kam diese hübsche pinke Anmeldeseite heraus.

Ich habe die CSS-Stile der Einfachheit halber weggelassen, und so sieht das einfache HTML aus:

Du kannst auch mit einem Boilerplate deines bevorzugten Frontend-Frameworks wie Create React App, Next.js oder Vue CLI starten.

Da Logto Open Source ist, wird empfohlen, das Logto Experience Projekt zu klonen und den Code entsprechend deinen Bedürfnissen anzupassen. Dies ist die voll funktionsfähige Logto-eingebaute Anmeldeerlebnisoberfläche, geschrieben in React und TypeScript.

Logto Tunnel CLI einrichten#

Logto Tunnel CLI ist ein Tool, das nicht nur deine HTML-Seiten bereitstellt, sondern dir auch ermöglicht, mit Logtos Experience API von deinen HTML-Seiten in der lokalen Entwicklungsumgebung aus zu interagieren.

Angenommen, deine index.html-Seite befindet sich unter /path/to/your/custom-ui, und deine Logto-Tenant-ID ist foobar, kannst du den Befehl auf diese Weise ausführen:

Oder, wenn du ein UI-Framework verwendest, das einen integrierten Entwicklungsserver hat und deine Seite unter http://localhost:4000 bereitgestellt wird, kannst du den Befehl so ausführen:

Nach Ausführen des Befehls wird der Tunnel-Dienst auf deinem lokalen Rechner http://localhost:9000/ gestartet.

Anmeldung aus deiner Anwendung auslösen#

Gehe zu der Anwendung, die du zuvor erstellt hast, und ändere den Logto-Endpunkt von https://foobar.logto.app/ in http://localhost:9000/ in deiner Logto-SDK-Konfiguration.

Nehmen wir unser React-Beispielprojekt als Beispiel:

Klicke auf den "Anmelden"-Button in deiner Anwendung. Anstatt die eingebaut Logto-Anmeldeoberfläche zu sehen, solltest du jetzt zu deiner benutzerdefinierten Anmeldeseite weitergeleitet werden.

Interaktion mit Logto Experience API#

In diesem Schritt werden wir mit der Logto Experience API in deiner benutzerdefinierten UI interagieren. Erstelle zuerst eine script.js-Datei und füge den Verweis in deiner index.html hinzu.

Füge den folgenden Code in deine script.js-Datei ein.

Dieses Skript wird den Anmeldeablauf mit Benutzername und Passwort mit Hilfe dieser APIs abschließen:

• PUT /api/experience - Start des Anmeldeinteraktion
• POST /api/experience/verification/password - Überprüfung des Benutzernamens und Passworts
• POST /api/experience/identification - Benutzeridentifikation für die aktuelle Interaktion
• POST /api/experience/submit - Einreichung der Anmeldeinteraktion

Weitere Details findest du in den Logto Experience API-Dokumenten.

Teste deine benutzerdefinierte Anmeldeseite#

1. Gehe zu deiner Anwendung und klicke auf den "Anmelden"-Button.
2. Du solltest zu deiner benutzerdefinierten Anmeldeseite unter http://localhost:9000/ weitergeleitet werden.
3. Gib Benutzername und Passwort ein und klicke auf den "Absenden"-Button.
4. Wenn alles korrekt eingerichtet ist, solltest du zurück zu deiner Anwendung weitergeleitet werden, mit authentifizierten Benutzerinformationen.

Deine benutzerdefinierte Anmeldeoberfläche zu Logto Cloud bereitstellen#

Sobald du die Entwicklung und den Test deiner benutzerdefinierten Anmeldeoberfläche lokal abgeschlossen hast, kannst du sie auf Logto Cloud bereitstellen. Erstelle einfach eine ZIP-Datei deines benutzerdefinierten UI-Ordners und lade sie im Abschnitt "Benutzerdefinierte UI" in deiner Logto-Konsole hoch.

Nachdem du hochgeladen hast, speichere die Änderungen, und deine benutzerdefinierte Anmeldeoberfläche wird in deinem Logto Cloud-Mandanten live geschaltet und ersetzt das eingebaute Logto-Anmeldeerlebnis.

Zuletzt gehe zurück zu deiner Anwendung und ändere die Endpunkt-URI zurück zu deinem Logto Cloud-Endpunkt: https://foobar.logto.app/. Dieses Mal kannst du den Logto-Tunnel-Dienst stoppen, und deine Anwendung sollte jetzt direkt mit der benutzerdefinierten online gehosteten UI funktionieren.

Fazit#

In diesem Tutorial haben wir dich durch den Prozess der Implementierung und Bereitstellung deiner eigenen benutzerdefinierten Anmeldeoberfläche zu Logto Cloud geführt.

Mit dieser Funktion kannst du jetzt deine Anmeldeoberfläche und Authentifizierungsabläufe tiefgreifend anpassen, um dein Branding und spezifische Geschäftsanforderungen zu erfüllen.

Viel Spaß beim Programmieren! 🚀