Bei Logto legen wir großen Wert darauf, unseren Onboarding-Prozess für unsere Kunden zu optimieren. Wir verstehen die Bedeutung einer möglichst einfachen und nahtlosen Benutzeranmeldung und -anmeldungserfahrung. In diesem Artikel teilen wir zwei kleine Tricks, die du verwenden solltest, um die Benutzeranmeldungserfahrung zu verbessern. ## Erster Bildschirm Werfen wir einen kurzen Blick auf den OIDC-Authentifizierungsprozess. ```mermaid sequenceDiagram actor Benutzer participant Client-App participant Authorization Server participant Anmeldeseite Benutzer ->> Client-App: Besuche die App Client-App ->> Authorization Server: Authentifizierungsanfrage Authorization Server -->> Client-App: Anmeldeseite anzeigen Benutzer ->> Anmeldeseite: Weiterleitung des Benutzers zur Anmeldeseite Anmeldeseite ->> Authorization Server: Anmeldung des Benutzers mit Anmeldedaten Authorization Server ->> Client-App: Authentifizierungsantwort ``` Wenn ein Benutzer eine Authentifizierungsanfrage von der Client-Anwendung sendet, wird eine OIDC-Authentifizierungssitzung in Logto initiiert. Der Benutzer wird dann zur von Logto gehosteten Anmeldeseite weitergeleitet, um seine Anmeldedaten einzugeben und seine Identität zu überprüfen. Sobald sich der Benutzer erfolgreich angemeldet hat, wird die Authentifizierungsantwort an die Client-Anwendung zurückgesendet. Standardmäßig wird dem Benutzer ein Anmeldebildschirm angezeigt.

Wenn der Benutzer kein Konto hat, kann er dann auf die Schaltfläche `Registrieren` klicken, um zum Registrierungsbildschirm zu wechseln.

Aber was ist, wenn der Benutzer mit der klaren Absicht zur Anwendung kommt, sich anzumelden? Du möchtest definitiv den Anmeldebildschirm überspringen und den Benutzer direkt auf einem gut gestalteten Registrierungsbildschirm landen lassen. Dies kann einfach erreicht werden, indem der Parameter `first_screen` zur Authentifizierungsanfrage hinzugefügt wird. ```sh curl --location \ --request GET 'https://[tenant-id].logto.app/oidc/auth?client_id=1234567890&...&first_screen=register' ``` Oder in einem unterstützten SDK: ```javascript logtoClient.signIn({ redirectUri: 'https://deine-app.com/callback', firstScreen: 'register', }); ``` Der Parameter `first_screen` kann zwei Werte annehmen: `signIn` oder `register`. Indem du den Parameter `first_screen` auf `register` setzt, kannst du den Anmeldebildschirm überspringen und den Benutzer direkt auf dem Registrierungsbildschirm landen lassen. Genau wie auf unserer [Logto](https://logto.io) Homepage. ![Loslegen](https://uploads.strapi.logto.io/1/get_started_72c5aedfeb.webp) Wenn der Benutzer auf die Schaltfläche `Loslegen` klickt, wird er direkt zum Registrierungsbildschirm weitergeleitet. ![Willkommen](https://uploads.strapi.logto.io/1/welcome_209e3eb44f.webp) ## Direkte Anmeldung Ein weiterer nützlicher Authentifizierungsparameter, den du kennen solltest, ist `direct_sign_in`. Dieser Parameter ermöglicht es dir, einen sozialen oder unternehmensbezogenen SSO-Authentifizierungsfluss direkt zu starten, indem der Anmeldebildschirm umgangen wird. Dies ist besonders nützlich, wenn du eigene soziale und unternehmensbezogene SSO-Einstiegspunkte hast und den Anmeldebildschirm von Logto überspringen möchtest. Zum Beispiel würde eine Unternehmens-SSO-Benutzerführung ohne den angegebenen Parameter `direct_sign_in` wie folgt aussehen: 1. Standard-Anmeldebildschirm wird angezeigt. 2. Die E-Mail-Adresse wird eingegeben. SSO

3. Single Sign-On wird erkannt und der Benutzer klickt dann auf die Schaltfläche `Single Sign-On`, um den SSO-Fluss zu starten. 4. Zusätzlich, wenn mehrere SSO-Anbieter unter derselben E-Mail-Domain konfiguriert sind, wird der Benutzer aufgefordert, den gewünschten SSO-Anbieter auszuwählen. SSO-Liste

Dieser Ablauf kann vereinfacht werden, wenn du den gewünschten SSO-Anbieter des Benutzers im Voraus kennst. Der Parameter `direct_sign_in` kann folgende Werte annehmen: - `social:`: Initiere direkt einen Authentifizierungsfluss eines Drittanbieter-Sozialanbieters. (z.B. `social:google`) - `sso:`: Initiere direkt einen Unternehmens-SSO-Authentifizierungsfluss. (z.B. `sso:1234567890`) Beachte, dass die angegebenen Connectoren und Anmeldemethoden ordnungsgemäß konfiguriert und aktiviert sein müssen in den Einstellungen der Anmeldeerfahrung. Füge den Parameter `direct_sign_in` deiner Authentifizierungsanfrage hinzu: ```sh curl --location \ --request GET 'https://[tenant-id].logto.app/oidc/auth?client_id=1234567890&...&direct_sign_in=sso:1234567890' ``` Oder in einem unterstützten SDK: ```javascript logtoClient.signIn({ redirectUri: 'https://deine-app.com/callback', directSignIn: 'social:google', }); ``` Mit dem Parameter `direct_sign_in` wird der Benutzer direkt zur Authentifizierungsseite des angegebenen Identitätsanbieters weitergeleitet. Dadurch wird die Anzahl der erforderlichen Schritte zur Durchführung des Authentifizierungsprozesses erheblich reduziert. ## Fazit Bei Logto nehmen wir das Benutzererlebnis sehr ernst. Durch die Verwendung der Parameter first_screen und direct_sign_in kannst du den Onboarding-Prozess für deine Kunden erheblich verbessern. Wenn du eine angepasste und optisch ansprechende Registrierungsseite erstellen möchtest, solltest du unbedingt unsere [custom-css](https://docs.logto.io/docs/recipes/customize-sie/custom-css/) Funktion erkunden. Für weitere Informationen schau dir die [Authentifizierungsparameter](https://docs.logto.io/docs/references/openid-connect/authentication-parameters/) an.