Zum Hauptinhalt springen

Bring your UI

Logto ermöglicht es dir, dein eigenes UI 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 Logto Cloud-Servern zu hosten und sie als Anmeldeerfahrung für deine Mandantenbenutzer zu verwenden.

hinweis

Diese Funktion erfordert, dass dein benutzerdefiniertes UI 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 Sign-in Experience UI, die alle Funktionen und Logtos Best Practices abdeckt. Du kannst sie an deine Bedürfnisse anpassen.

Nachdem du den Code überprüft 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 in die 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 20 MB nicht überschreiten.
  • Die ZIP-Datei sollte keine Datei enthalten, die 10 MB überschreitet.
  • Die ZIP-Datei sollte insgesamt nicht mehr als 200 Dateien enthalten.

Lade deine benutzerdefinierten UI-Assets hoch​

hinweis

Sei vorsichtig, 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 auszufü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 Branding-Farben, Firmenlogo, Favicon, Passwortrichtlinien, lokalisierte Sprachphrasen und sogar benutzerdefiniertes CSS, über den Sign-in Experience 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 in die Logto Cloud hochgeladen werden.

Bitte sieh 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 sieh 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.

Verwandte Ressourcen​

RFCS: Experience API

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