Dieses Tutorial wird dich durch den Prozess führen, deine eigene benutzerdefinierte Anmeldeoberfläche zu Logto Cloud zu erstellen und bereitzustellen.
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.
Bevor du beginnst, stelle sicher, dass du Folgendes hast:
Zur Vereinfachung werden wir in den folgenden Schritten die klassische Anmeldemethode "Benutzername & Passwort" verwenden. Denke daran, deine Anmeldemethode in der Logto-Konsole zu ändern.
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 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.
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.
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 AnmeldeinteraktionPOST /api/experience/verification/password - Überprüfung des Benutzernamens und PasswortsPOST /api/experience/identification - Benutzeridentifikation für die aktuelle InteraktionPOST /api/experience/submit - Einreichung der AnmeldeinteraktionWeitere Details findest du in den Logto Experience API-Dokumenten.
http://localhost:9000/ weitergeleitet werden.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.
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! 🚀