Zum Hauptinhalt springen

Debugge und teste dein benutzerdefiniertes UI lokal

Für Logto Cloud-Nutzer haben wir es einfach gemacht, dein eigenes UI zu Logto zu bringen („Bring your own UI“). Cloud-Nutzer können jetzt eine Zip-Datei mit den benutzerdefinierten UI-Assets in Konsole > Anmeldung & Konto > Branding > Bring your UI hochladen (Siehe die Seite Bring your UI für weitere Details.)

Beim Entwickeln solcher benutzerdefinierten UI-Seiten möchten Nutzer jedoch den Code lokal testen und debuggen, bevor sie ihn zu Logto Cloud hochladen. Dieser CLI-Befehl hilft dir, einen lokalen Tunnel einzurichten und die folgenden 3 Entitäten miteinander zu verbinden: deinen Logto Cloud Auth-Endpunkt, deine Anwendung und dein benutzerdefiniertes Anmelde-UI.

Warum brauche ich das?​

Standardmäßig wirst du, wenn du in deiner Anwendung auf den „Anmelden“-Button klickst, zur Anmeldeseite weitergeleitet, die am Logto-Endpunkt konfiguriert ist. Ein erfolgreicher Anmeldeablauf kann wie folgt dargestellt werden:

Da du nun aber dein eigenes benutzerdefiniertes Anmelde-UI entwickelst, benötigst du eine Möglichkeit, zu den auf deiner lokalen Maschine laufenden benutzerdefinierten Anmelde-UI-Seiten zu navigieren. Dafür ist ein lokaler Tunnel-Service erforderlich, der die ausgehenden Anfragen deiner Anwendung abfängt und sie zu deinen benutzerdefinierten Anmelde-UI-Seiten umleitet.

Zusätzlich musst du mit der Logto Experience API interagieren, um Benutzer zu authentifizieren und Sitzungen zu verwalten. Dieser Service hilft auch dabei, diese Experience API-Anfragen an Logto Cloud weiterzuleiten, um CORS-Probleme zu vermeiden.

Das folgende Sequenzdiagramm zeigt, wie ein erfolgreicher „Anmelden“-Ablauf mit deinem benutzerdefinierten UI und dem Tunnel-Service funktioniert:

Mit dem Tunnel-Service kannst du jetzt dein benutzerdefiniertes Anmelde-UI lokal entwickeln und testen, ohne die Assets jedes Mal zu Logto Cloud hochladen zu müssen, wenn du eine Änderung vornimmst.

Anleitung​

Schritt 1: Führe den Befehl aus​

Angenommen, deine Cloud-Tenant-ID ist foobar und du hast eine benutzerdefinierte Anmeldeseite, die auf deinem lokalen Dev-Server unter http://localhost:4000 läuft, dann kannst du den Befehl so ausführen:

logto-tunnel -p 9000 --experience-uri http://localhost:4000/ --endpoint https://foobar.logto.app/

Es funktioniert auch, wenn du eine benutzerdefinierte Domain in Logto konfiguriert hast:

logto-tunnel -p 9000 --experience-uri http://localhost:4000/ --endpoint https://your.custom.domain/

Alternativ unterstützt der Befehl auch statische HTML-Assets, ohne dass du sie zuerst auf einem Dev-Server ausführen musst. Stelle einfach sicher, dass sich eine index.html im angegebenen Pfad befindet.

logto-tunnel -p 9000 --experience-path /path/to/your/static/files --endpoint https://foobar.logto.app/

Schritt 2: Aktualisiere die Endpunkt-URI in deiner Anwendung​

Starte abschließend deine Anwendung und setze deren Logto-Endpunkt stattdessen auf die Tunnel-Service-Adresse http://localhost:9000/.

Nehmen wir eine React-Anwendung als Beispiel:

import { LogtoProvider, LogtoConfig } from '@logto/react';

// endpoint: 'https://foobar.logto.app/', // ursprünglicher Logto Cloud-Endpunkt
const config: LogtoConfig = {
  endpoint: 'http://localhost:9000/', // Tunnel-Service-Adresse
  appId: '<your-application-id>',
};

const App = () => (
  <LogtoProvider config={config}>
    <YourAppContent />
  </LogtoProvider>
);

Wenn du Social Sign-in verwendest, musst du auch die Redirect-URI in den Einstellungen deines Social-Providers auf die Tunnel-Service-Adresse aktualisieren.

http://localhost:9000/callback/<connector-id>

Wenn alles korrekt eingerichtet ist, solltest du beim Klick auf den „Anmelden“-Button in deiner Anwendung zu deiner benutzerdefinierten Anmeldeseite weitergeleitet werden, anstatt zur integrierten Logto-UI – zusammen mit einer gültigen Sitzung (Cookies), die dir ermöglicht, weiter mit der Logto Experience API zu interagieren.

Viel Spaß beim Coden!

Automatisiere die Bereitstellung deines benutzerdefinierten Anmelde-UIs mit GitHub Actions Workflow