Bringe dein eigenes Anmelde-UI zu Logto Cloud

Hintergrund#

Logto bietet eine sofort einsatzbereite Anmeldeerfahrung, die alle Logto-Funktionen abdeckt, einschließlich Anmeldung, Registrierung, Passwort-Wiederherstellung, Single Sign-On (SSO) und mehr. Benutzer können das Erscheinungsbild der Anmeldeoberfläche auch mit unserer Funktion "Custom CSS" anpassen.

Dennoch möchten einige Benutzer ihre Anmeldeerfahrung (sowohl UI als auch Authentifizierungsabläufe) tiefgehend an ihre Marke und spezifischen Geschäftsanforderungen anpassen. Wir haben euch gehört! Und wir freuen uns, bekannt zu geben, dass die Funktion "Bringe dein eigenes UI" jetzt in Logto Cloud verfügbar ist.

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

Voraussetzungen#

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

• Ein Logto Cloud-Konto mit einem Abonnement-Plan
• Eine mit Logto integrierte Anwendung (Quick-starts)
• Logto tunnel CLI installiert
• Grundkenntnisse in HTML, CSS und JavaScript

Der Einfachheit halber werden wir in den folgenden Schritten die klassische Methode "Benutzername & Passwort" zur Anmeldung verwenden. Denke daran, deine Anmeldemethode in der Logto-Konsole zu ändern.

Erstelle dein benutzerdefiniertes Anmelde-UI#

Die Mindestanforderung für eine Anmeldeoberfläche ist eine index.html-Datei mit einem Anmeldeformular, das mindestens ein Benutzernamenfeld, ein Passwortfeld und einen Senden-Button enthält. Ich habe ChatGPT verwendet, um ein Beispiel-HTML zu generieren, und hier komme ich mit dieser süßen, rosa Anmeldeseite.

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

Du kannst auch mit einem Boilerplate von deinem bevorzugten Frontend-Framework starten, wie z. B. Create React App, Next.js oder Vue CLI.

Da Logto Open Source ist, ist eine weitere Empfehlung, das Logto Experience-Projekt zu klonen und den Code nach deinen Bedürfnissen anzupassen. Dies ist die komplette Logto-eingebaute Anmeldeerfahrung, geschrieben in React und TypeScript.

Einrichtung von Logto tunnel CLI#

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

Angenommen, deine index.html-Seite befindet sich unter /path/to/your/custom-ui, und deine Logto-Mandanten-ID ist foobar, kannst du den Befehl folgendermaßen ausführen:

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

Nachdem der Befehl ausgeführt wurde, wird der Tunneldienst auf deinem lokalen Rechner unter http://localhost:9000/ gestartet.

Auslösen der Anmeldung von deiner Anwendung aus#

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

Nehmen wir unser React-Beispielprojekt als Beispiel:

Klicke auf den "Anmelden"-Button in deiner Anwendung. Statt der eingebauten Logto-Anmeldeoberfläche solltest du jetzt zu deiner benutzerdefinierten Anmeldeseite weitergeleitet werden.

Interaktion mit der Logto Experience-API#

In diesem Schritt werden wir mit der Logto Experience-API in deinem benutzerdefinierten UI interagieren. Zunächst erstellen wir eine script.js-Datei und fügen die Referenz in deiner index.html hinzu.

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

Dieses Skript wird den Anmeldeprozess mit Benutzername und Passwort mit Hilfe dieser APIs vervollständigen:

• PUT /api/experience - Start der Anmeldeinteraktion
• POST /api/experience/verification/password - Überprüfung von Benutzername und Passwort
• POST /api/experience/identification - Identifikation des Benutzers für die aktuelle Interaktion
• POST /api/experience/submit - Absenden der Anmeldeinteraktion

Sieh dir die Logto Experience API-Dokumente für mehr Details an.

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 "Senden"-Button.
4. Wenn alles korrekt eingerichtet ist, solltest du zurück zu deiner Anwendung weitergeleitet werden, mit authentifizierten Benutzerinformationen.

Bereitstellung deiner benutzerdefinierten Anmelde-UI in Logto Cloud#

Nachdem du deine benutzerdefinierte Anmeldeoberfläche lokal entwickelt und getestet hast, kannst du sie in Logto Cloud bereitstellen. Erstelle einfach eine Zip-Datei von deinem benutzerdefinierten UI-Ordner und lade sie im Abschnitt "Custom UI" deiner Logto-Konsole hoch.

Nach dem Hochladen speichere die Änderungen, und deine benutzerdefinierte Anmeldeoberfläche wird in deinem Logto Cloud-Mandanten live geschaltet und ersetzt die eingebaute Logto-Anmeldeerfahrung.

Gehe schließlich zurück zu deiner Anwendung und ändere die Endpunkt-URI wieder auf deinen Logto-Cloud-Endpunkt: https://foobar.logto.app/. Dieses Mal kannst du den Logto-Tunneldienst beenden, und deine Anwendung sollte jetzt direkt mit dem online gehosteten benutzerdefinierten UI arbeiten.

Fazit#

In diesem Tutorial haben wir dich durch den Prozess der Implementierung und Bereitstellung deiner eigenen benutzerdefinierten Anmelde-UI in Logto Cloud geführt.

Mit dieser Funktion kannst du jetzt deine Anmelde-UI und Authentifizierungsabläufe tiefgreifend an deine Marke und spezifische Geschäftsanforderungen anpassen.

Viel Spaß beim Programmieren! 🚀