Zum Hauptinhalt springen

Benutzererfahrung mit Live-Vorschau testen

Du kannst die Live-Vorschau-Funktion nutzen, um deine Konfigurationen der Anmeldeerfahrung bequem zu testen.

Live-Vorschau​

Wenn du zu Konsole > Anmeldeerfahrung navigierst und auf die Schaltfläche "Live-Vorschau" in der oberen rechten Ecke klickst, öffnet sich ein neuer Browser-Tab mit einer voll funktionsfähigen Demo der Logto-Funktionen. Diese Demo zeigt unseren Designansatz für Anmelde- und Registrierungsabläufe. Sie ist hochgradig anpassbar und kann nahtlos in deine Anwendung integriert werden.

hinweis:

In dieser Vorschau solltest du zuerst ein Konto erstellen, um die Erfahrung zu testen. Du kannst dieses Konto später in Konsole > Benutzerverwaltung verwalten.

Wenn du versuchst, dich mit dem erstellten Benutzerkonto anzumelden und der Prozess erfolgreich ohne Probleme verläuft, wirst du zu einer Erfolgsseite weitergeleitet, die deine Kennungen und ID anzeigt.

Entwickler-Panel​

Nach einer erfolgreichen Anmeldung mit Logto’s Live-Vorschau landest du auf einem Dashboard mit zwei Hauptaktionen:

  • Abmelden der Live-Vorschau-Schaltfläche: Beendet die aktuelle Sitzung.
  • Entwickler-Panel öffnen-Schaltfläche: Startet Debugging-Tools zur Analyse deines Authentifizierungsablaufs.

Das Entwicklungs-Panel bietet Echtzeiteinblicke zur Fehlerbehebung bei der OIDC-Integration, zur Überprüfung von Tokens und Ansprüchen sowie zum Testen fortgeschrittener Identitätsszenarien.

Logto-Konfiguration​

Die Live-Vorschau basiert standardmäßig auf einer versteckten Demo-App mit einer einheitlichen Anmeldeerfahrung. Im Abschnitt Logto-Konfiguration kannst du Authentifizierungsparameter konfigurieren, die in Authentifizierungsanfragen enthalten sind, um dem Logto OIDC-Endpunkt Anweisungen zu geben, wie der Authentifizierungsprozess gehandhabt werden soll. Dazu gehört das Definieren deiner App-ID, das Zuweisen einer Organisations-ID, das Anfordern spezifischer Berechtigungen usw. Diese Einrichtung ähnelt der Initialisierung des LogtoClient mit dem LogtoProvider, der einen Logto-Kontext für deine Anwendung erstellt.

hinweis:

Denke daran, deine Konfigurationsänderungen zu speichern. Sie werden beim nächsten Anmelden mit der Live-Vorschau wirksam.

  • App-ID: Gib deine eindeutige App-ID an. Sie ist wichtig für das Testen der anwendungsspezifischen Anmeldeerfahrung und Ressourcenschutzrichtlinien.
  • Zusätzliche Anmeldeparameter: Gib zusätzliche Authentifizierungsparameter an, um den benutzerdefinierten Anmeldeprozess zu testen. Beispiele:
  • Prompt: Füge OIDC-Prompt-Werte (durch Leerzeichen getrennt) hinzu, um anzugeben, ob der Autorisierungsserver den Endbenutzer zur erneuten Authentifizierung und Zustimmung auffordern soll. Die definierten Werte sind:
    • login: Erzwingt die erneute Authentifizierung des Endbenutzers.
    • consent: Erfordert die Zustimmung des Benutzers, bevor Informationen mit dem Client geteilt werden.
    • none: Gibt an, dass keine Benutzeroberfläche angezeigt werden soll. Diese Option wird verwendet, um auf bereits bestehende Authentifizierungen oder Zustimmungen zu prüfen.
  • Berechtigung (Scope): Gib die Berechtigungen (durch Leerzeichen getrennt) für Anspruchsanfragen an. Zum Beispiel:
    • Um Benutzerdetails der Organisation anzufordern, verwende zwei Berechtigungen: urn:logto:scope:organizations urn:logto:scope:organization_roles
    • Um API-Berechtigungen anzufordern, gib die Berechtigungsnamen im Berechtigungsfeld an und trage die entsprechende API-Kennung im Ressourcenfeld unten ein.
  • Ressource: Gib die API-Ressourcenkennungen (durch Leerzeichen getrennt) ein, auf die deine Anwendung zugreifen muss. Dieses Feld ermöglicht es deiner App, spezifische Ressourcenzugangstokens anzufordern, wie erforderlich.

Auffrischungstoken-Zuteilung​

Dieser Abschnitt beschreibt, wie man Tokens auffrischt für verschiedene Zugriffstypen:

  • Ressource: Gib die spezifische API-Kennung (durch Leerzeichen getrennt) ein, wenn du das API-Ressourcenzugangstoken auffrischen musst.
  • Organisations-ID: Gib die Organisations-ID (durch Leerzeichen getrennt) ein, wenn du das Organisationstoken auffrischen musst.

Wenn sowohl eine Ressource als auch eine Organisations-ID angegeben sind, wird die Auffrischungsanfrage ein Zugangstoken zurückgeben, das API-Ressourcenschutz mit Organisationstemplate unterstützt.

hinweis:

Füge consent in den Prompt-Parameter für offline_access ein. Ein Auffrischungstoken wird nur ausgestellt, wenn der Prompt consent enthält.

Benutzerinformationen​

Überprüfe die Benutzerdaten, die aus deinem Authentifizierungsablauf abgerufen wurden:

  • ID-Token-Ansprüche abrufen: Rufe alle Ansprüche ab, die im ID-Token enthalten sind, wie at_hash, aud, auth_time, exp, iat, issu und zusätzliche Benutzerprofile. Dies ist nützlich zur Validierung des Tokens und zum Extrahieren notwendiger Benutzerinformationen.
  • Benutzerinformationen abrufen: Rufe nur die Benutzerprofilinformationen ab, indem du den Userinfo-Endpunkt abfragst.
hinweis:

Verwende die Entwicklertools von Chrome (F12 → Konsole), um Netzwerk-Anfragen zu inspizieren und die Tokens und Ansprüche zu überprüfen.