Zum Hauptinhalt springen

Bring your UI

Logto ermöglicht es dir, deine eigene Benutzeroberfläche mitzubringen, um die integrierte Anmeldeerfahrungsoberfläche vollständig zu ersetzen, zusätzlich zu den vorgefertigten UI-Anpassungsoptionen. Diese Funktion ermöglicht es dir, eine ZIP-Datei mit deinen benutzerdefinierten UI-Assets (HTML, CSS, JavaScript, Bilder usw.) hochzuladen, sie auf den Servern von Logto Cloud zu hosten und sie als Anmeldeerfahrung für deine Mandantenbenutzer zu verwenden.

hinweis:

Diese Funktion erfordert, dass deine benutzerdefinierte Benutzeroberfläche mit Single Page Application (SPA) kompatibel ist, und es wird empfohlen, immer einen Produktions-Build für optimale Leistung zu verwenden.

Erkunde die benutzerdefinierte UI-Funktion in der Logto-Konsole​

Starte mit dem offiziellen Projekt​

Der schnellste Weg, eine benutzerdefinierte Anmelde-UI zu initiieren, besteht darin, das Logto Experience-Projekt zu klonen. Dies ist die integrierte Logto-Anmeldeerfahrungs-UI, die alle Funktionen und Logtos Best Practices abdeckt. Du kannst sie an deine Bedürfnisse anpassen.

Nachdem du den Code ausgecheckt hast, führe einfach den folgenden Befehl aus, um das Projekt zu bauen:

pnpm install && pnpm build
hinweis:

Das gesamte Logto-Projekt ist ein pnpm-Monorepo. Wenn du das Experience-Paket eigenständig (ohne pnpm) ausführen möchtest, ersetze workspace: Abhängigkeiten in package.json durch spezifische Versionsnummern (wie ^1.0.0).

Nach Abschluss des Builds findest du alle kompilierten Assets im dist-Verzeichnis. Erstelle dann ein ZIP-Archiv des dist-Verzeichnisses - dieses Archiv wird später zum Hochladen auf Logto Cloud verwendet.

Anforderungen an benutzerdefinierte UI-Assets​

Bevor du deine benutzerdefinierten UI-Assets hochlädst, stelle sicher, dass sie die folgenden Anforderungen erfüllen:

  • Die hochgeladenen Assets sollten als einzelne ZIP-Datei gepackt sein.
  • Die ZIP-Datei sollte eine index.html-Datei im Stammverzeichnis enthalten.
  • Die ZIP-Datei sollte nicht größer als 20 MB sein.
  • Die ZIP-Datei sollte keine Datei enthalten, die größer als 10 MB ist.
  • Die ZIP-Datei sollte insgesamt nicht mehr als 200 Dateien enthalten.

Lade deine benutzerdefinierten UI-Assets hoch​

hinweis:

Gehe vorsichtig vor, wenn du diese Funktion in der Produktion verwendest, da sie sofort die Anmeldeerfahrung deiner Benutzer beeinflusst.

  1. Navigiere zu Konsole > Anmeldeerfahrung > Branding > Bring your UI.
  2. Klicke, um deine im vorherigen Schritt erstellte ZIP-Datei auszuwählen oder ziehe sie per Drag & Drop, und der Upload-Prozess startet automatisch.
  3. Sobald der Upload abgeschlossen ist, speichere die Änderungen, und deine benutzerdefinierte UI wird sofort bereitgestellt.
  4. Das "Anmeldevorschau"-Fenster wird deaktiviert, wenn du deine benutzerdefinierte Anmelde-UI verwendest. Du kannst jedoch weiterhin auf die Schaltfläche "Live-Vorschau" klicken, um deine benutzerdefinierte Anmeldeseite in einem neu geöffneten Browser-Tab zu testen.

Entwickle deine benutzerdefinierte UI​

Interagiere mit Experience API​

Deine benutzerdefinierte UI muss mit der Experience API interagieren, um verschiedene Aktionen wie Anmelden, Registrieren, Passwort zurücksetzen, soziale Konten binden, MFA aktivieren und mehr durchzuführen. Um die Benutzerflüsse und Implementierungsdetails besser zu verstehen, empfehlen wir, unser Experience API Design RFC zu überprüfen, das umfassende technische Spezifikationen und Beispiele bietet.

Du musst auch auf andere Anmeldeerfahrungskonfigurationen zugreifen, wie z. B. Branding-Farben, Firmenlogo, Favicon, Passwort-Richtlinien, lokalisierte Sprachphrasen und sogar benutzerdefiniertes CSS, über den Anmeldeerfahrungs-API-Endpunkt.

Beispielprojekte​

Wir bieten eine Sammlung von Beispielprojekten, um dir zu helfen, schnell zu verstehen und mit der Implementierung benutzerdefinierter UIs zu beginnen. Bitte schaue dir das Logto Experience-Projekt GitHub-Repo für Details an.

Darüber hinaus werden wir weiterhin daran arbeiten, mehr vereinfachte und szenariobasierte Beispielprojekte bereitzustellen, um die häufigsten Anwendungsfälle abzudecken. Bleib dran für unsere zukünftigen Updates!

Lokale Entwicklung und Debugging​

Für die lokale Entwicklung und das Debugging bieten wir das Logto Tunnel CLI-Tool an, um:

  • Experience API-Anfragen von deinem lokalen Rechner an den Logto Cloud-Endpunkt zu leiten.
  • Deine benutzerdefinierte UI-Implementierung lokal zu testen.

Dies ermöglicht es Benutzern, benutzerdefinierte UIs lokal zu testen und zu debuggen, bevor sie auf Logto Cloud hochgeladen werden.

Bitte schaue dir Debugge und teste deine benutzerdefinierte UI lokal für weitere Details an.

Lade deine benutzerdefinierten UI-Assets mit dem CLI hoch​

Zusätzlich zum Hochladen über die Konsole kannst du auch das Logto CLI verwenden, um benutzerdefinierte UI-Assets hochzuladen. Dies ist besonders nützlich für automatisierte Bereitstellungs-Workflows.

Bitte schaue dir Lade benutzerdefinierte UI-Assets mit CLI hoch für weitere Details an.

Wiederherstellung zur integrierten Logto-Anmeldeerfahrung​

Wenn du zur integrierten Logto-Anmeldeerfahrung zurückkehren möchtest, klicke einfach auf die Löschen-Schaltfläche auf der Bring your UI-Karte. Nach dem Speichern der Änderungen wird die Anmeldeerfahrungs-UI auf die Standardeinstellung von Logto zurückgesetzt.

RFCS: Experience API

 Experience samples Bring your own sign-in UI to Logto Cloud