Zum Hauptinhalt springen

Teste die Benutzererfahrung mit der Live-Vorschau

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

Live-Vorschau​

Wenn du zu Konsole > Anmeldeerfahrung navigierst und auf die Schaltfläche „Live-Vorschau“ oben rechts klickst, öffnet sich ein neuer Browser-Tab mit einer voll funktionsfähigen Demo der Logto-Funktionen. Diese Demo zeigt unseren Ansatz für das Design von Anmelde- und Registrierungsabläufen. Sie ist hochgradig anpassbar und kann nahtlos in deine Anwendung integriert werden.

hinweis:

In dieser Vorschau solltest du zunächst 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 Vorgang erfolgreich und ohne Probleme verläuft, wirst du auf eine Erfolgsseite weitergeleitet, die deine Kennungen und deine ID anzeigt.

Dev-Panel​

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

  • Live-Vorschau abmelden: Beendet die aktuelle Sitzung.
  • Dev-Panel öffnen: Startet Debugging-Tools zur Analyse deines Authentifizierungsablaufs.

Das Entwicklungs-Panel bietet Echtzeit-Einblicke zur Fehlerbehebung bei OIDC-Integrationen, zur Überprüfung von Tokens und Ansprüchen (Claims) 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 mitzuteilen, wie der Authentifizierungsprozess ablaufen soll. Dazu gehört das Festlegen deiner App-ID, das Zuweisen einer Organisations-ID, das Anfordern bestimmter Berechtigungen (Scopes) usw. Diese Einrichtung ähnelt der Initialisierung des LogtoClient mit dem LogtoProvider, der einen Logto-Kontext für deine Anwendung herstellt.

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 app-spezifischen Anmeldeerfahrung und Richtlinien zum Ressourcenschutz.
  • 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 Authorization Server 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 Authentifizierung oder Zustimmung zu prüfen.
  • Scope: Gib die Berechtigungen (durch Leerzeichen getrennt) für Anspruchsanfragen an. Zum Beispiel:
    • Um Organisationsdetails des Benutzers anzufordern, verwende zwei Berechtigungen: urn:logto:scope:organizations urn:logto:scope:organization_roles
    • Um API-Berechtigungen anzufordern, gib die Berechtigungsnamen im Feld Scope an und trage die entsprechende API-Kennung im Feld Resource unten ein.
  • Resource: Gib die API-Ressourcenkennungen (durch Leerzeichen getrennt) ein, auf die deine Anwendung zugreifen muss. Dieses Feld ermöglicht es deiner App, bei Bedarf spezifische Zugangstokens für Ressourcen anzufordern.

Auffrischungstoken-Grant​

In diesem Abschnitt wird beschrieben, wie du Auffrischungstokens für verschiedene Zugriffstypen erneuerst.

  • Resource: Gib die spezifische API-Kennung (durch Leerzeichen getrennt) ein, wenn du Zugangstokens für API-Ressourcen auffrischen musst.
  • Organization ID: Gib die Organisations-ID (durch Leerzeichen getrennt) ein, wenn du Organisationstokens auffrischen musst.

Siehe Autorisierung für weitere Details zur Verwendung des Auffrischungstoken-Grants.

hinweis:

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

Benutzerinfo​

Ü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, um das Token zu validieren und die benötigten Benutzerinformationen zu extrahieren.
  • Benutzerinfo abrufen: Rufe nur die Benutzerprofilinformationen ab, indem du den Userinfo-Endpunkt abfragst.
hinweis:

Nutze die Entwicklertools von Chrome (F12 → Konsole), um Netzwerkanfragen zu überprüfen und Tokens sowie Ansprüche einzusehen.