Zum Hauptinhalt springen

Debuggen und Testen deiner benutzerdefinierten UI lokal

Für Logto Cloud-Nutzer haben wir es einfach gemacht, deine eigene UI zu Logto zu bringen. Cloud-Nutzer können jetzt eine Zip-Datei mit den benutzerdefinierten UI-Assets in Konsole > Anmeldeerfahrung > Branding > Bring your UI hochladen (siehe die Seite Bring your UI für weitere Details).

Wenn du jedoch solche benutzerdefinierten UI-Seiten entwickelst, möchtest du den Code lokal testen und debuggen, bevor du ihn zu Logto Cloud hochlädst. Dieser CLI-Befehl hilft dir, einen lokalen Tunnel einzurichten und die folgenden 3 Entitäten miteinander zu verbinden: dein Logto Cloud Auth-Endpunkt, deine Anwendung und deine benutzerdefinierte Anmelde-UI.

Warum brauche ich das?​

Standardmäßig wirst du, wenn du in deiner Anwendung auf die Schaltfläche "Anmelden" klickst, zur Anmeldeseite navigiert, die am Logto-Endpunkt konfiguriert ist. Ein erfolgreicher Anmeldefluss kann wie folgt veranschaulicht werden:

Da du nun deine eigene benutzerdefinierte Anmelde-UI entwickelst, benötigst du eine Möglichkeit, zu den benutzerdefinierten Anmelde-UI-Seiten zu navigieren, die auf deiner lokalen Maschine laufen. Dies erfordert einen lokalen Tunneldienst, um die ausgehenden Anfragen von deiner Anwendung abzufangen und sie zu deinen benutzerdefinierten Anmelde-UI-Seiten umzuleiten.

Zusätzlich musst du mit Logtos Experience API interagieren, um Benutzer zu authentifizieren und Sitzungen zu verwalten. Dieser Dienst wird auch helfen, diese Experience API-Anfragen an Logto Cloud weiterzuleiten, um CORS-Probleme zu vermeiden.

Das folgende Sequenzdiagramm veranschaulicht, wie ein erfolgreicher "Anmelden"-Fluss mit deiner benutzerdefinierten UI und dem Tunneldienst funktioniert:

Mit dem Tunneldienst kannst du nun deine benutzerdefinierte Anmelde-UI lokal entwickeln und testen, ohne die Assets jedes Mal zu Logto Cloud hochladen zu müssen, wenn du eine Änderung vornimmst.

Anweisungen​

Schritt 1: Befehl ausführen​

Angenommen, deine Cloud-Tenant-ID ist foobar, und du hast eine benutzerdefinierte Anmeldeseite, die auf deinem lokalen Entwicklungsserver 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 sie zuerst auf einem Entwicklungsserver ausgeführt werden müssen. Stelle einfach sicher, dass sich eine index.html in dem von dir angegebenen Pfad befindet.

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

Schritt 2: Endpunkt-URI in deiner Anwendung aktualisieren​

Führe schließlich deine Anwendung aus und setze ihren Logto-Endpunkt auf die Tunnel-Service-Adresse http://localhost:9000/.

Nehmen wir eine React-Anwendung als Beispiel:

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

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

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

Wenn du soziale Anmeldung verwendest, musst du auch die Umleitungs-URI in deinen sozialen Anbieter-Einstellungen auf die Tunnel-Service-Adresse aktualisieren.

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

Wenn alles korrekt eingerichtet ist, solltest du, wenn du in deiner Anwendung auf die Schaltfläche "Anmelden" klickst, zu deiner benutzerdefinierten Anmeldeseite navigiert werden, anstatt zur integrierten UI von Logto, zusammen mit einer gültigen Sitzung (Cookies), die es dir ermöglicht, weiter mit der Logto Experience API zu interagieren.

Viel Spaß beim Programmieren!