Zum Hauptinhalt springen

Benutzererfahrung mit Live-Vorschau testen

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 oben rechts auf die Schaltfläche „Live-Vorschau“ 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 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 ist, wirst du auf eine Erfolgsseite weitergeleitet, die deine Kennungen und ID anzeigt.

Dev-Panel​

Nach einer erfolgreichen Anmeldung über die Logto 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, um die anwendungsspezifische Anmeldeerfahrung und Richtlinien zum Ressourcenschutz zu testen.
  • Zusätzliche Anmeldeparameter: Füge zusätzliche Authentifizierungsparameter hinzu, 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.
  • Berechtigung (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 Berechtigung an und trage die entsprechende API-Kennung im darunterliegenden Feld Ressource ein.
  • Ressource: Gib die API-Ressourcenkennungen (durch Leerzeichen getrennt) an, 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.

  • Ressource: Gib die spezifische API-Kennung (durch Leerzeichen getrennt) ein, wenn du Zugangstokens für API-Ressourcen auffrischen musst.
  • Organisations-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 notwendige 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.