Bij Logto leggen we sterk de nadruk op het verfijnen van ons onboardingproces voor onze klanten. We begrijpen het belang van het zo eenvoudig en naadloos mogelijk maken van de gebruikersaanmeld- en inlogervaring. In dit artikel delen we twee kleine trucjes die je kunt gebruiken om de aanmeldingservaring van de gebruiker te verbeteren. ## Eerste scherm Laten we kort kijken naar het OIDC-authenticatieproces. ```mermaid sequenceDiagram actor User participant Client App participant Authorization Server participant Login Page User ->> Client App: Bezoek de app Client App ->> Authorization Server: Vraag om authenticatie Authorization Server -->> Client App: Loginpagina tonen User ->> Login Page: Omleiden naar de loginpagina Login Page ->> Authorization Server: Gebruiker logt in met inloggegevens Authorization Server ->> Client App: Authenticatierespons ``` Wanneer een gebruiker een authenticatieverzoek indient vanuit de clientapplicatie, wordt een OIDC-authenticatiesessie gestart in Logto. De gebruiker wordt dan doorverwezen naar de door Logto gehoste loginpagina om zijn inloggegevens in te voeren en zijn identiteit te verifiëren. Zodra de gebruiker succesvol inlogt, wordt de authenticatierespons teruggestuurd naar de clientapplicatie. Standaard wordt er een inlogscherm gepresenteerd aan de gebruiker.

Als de gebruiker geen account heeft, kan hij op de knop `Registreren` klikken om naar het aanmeldingsscherm te schakelen. Aanmeldscherm

Maar wat als de gebruiker de applicatie benadert met de duidelijke intentie om zich aan te melden? Je wilt zeker het inlogscherm overslaan en de gebruiker direct op een goed ontworpen aanmeldingsscherm laten landen. Dit kan eenvoudig worden bereikt door de parameter `first_screen` aan je authenticatieverzoek toe te voegen. ```sh curl --location \ --request GET 'https://[tenant-id].logto.app/oidc/auth?client_id=1234567890&...&first_screen=register' ``` Of in een ondersteunde SDK: ```javascript logtoClient.signIn({ redirectUri: 'https://your-app.com/callback', firstScreen: 'register', }); ``` De parameter `first_screen` kan twee waarden aannemen: `signIn` of `register`. Door de parameter `first_screen` in te stellen op `register` kun je het inlogscherm overslaan en de gebruiker direct op het aanmeldingsscherm laten landen. Net zoals op onze [Logto](https://logto.io) startpagina. ![Aan de slag](https://uploads.strapi.logto.io/1/get_started_72c5aedfeb.webp) Wanneer de gebruiker op de knop `Aan de slag` klikt, wordt hij direct naar het aanmeldingsscherm geleid. ![Welkom](https://uploads.strapi.logto.io/1/welcome_209e3eb44f.webp) ## Directe inlog Een andere handige authenticatieparameter die je moet kennen is `direct_sign_in`. Deze parameter stelt je in staat om een sociale of enterprise SSO-authenticatiestroom direct te starten door het inlogscherm over te slaan. Dit is met name nuttig wanneer je je eigen sociale en enterprise SSO-ingangspunten hebt en het inlogscherm van Logto wilt overslaan. Bijvoorbeeld, zonder dat de parameter `direct_sign_in` is opgegeven, zou een enterprise SSO-gebruikersroute er als volgt uitzien: 1. Standaard inlogscherm wordt gepresenteerd. 2. Voert het e-mailadres in. SSO

3. Single sign-on gedetecteerd en de gebruiker klikt dan op de knop `Single Sign-On` om de SSO-stroom te starten. 4. Bovendien, als er meerdere SSO-providers zijn geconfigureerd onder hetzelfde e-maildomein, wordt de gebruiker gevraagd om de gewenste SSO-provider te selecteren. SSO lijst

Deze stroom kan worden vereenvoudigd als je van tevoren weet welke SSO-provider de gebruiker wenst. De parameter `direct_sign_in` kan de volgende waarden aannemen: - `social:`: Start direct een externe sociale authenticatiestroom. (bijv. `social:google`) - `sso:`: Start direct een enterprise SSO-authenticatiestroom. (bijv. `sso:1234567890`) Wees je ervan bewust dat de gespecificeerde connectoren en inlogmethoden correct moeten worden geconfigureerd en ingeschakeld in de instellingen van de inlogervaring. Voeg de parameter `direct_sign_in` toe aan je authenticatieverzoek: ```sh curl --location \ --request GET 'https://[tenant-id].logto.app/oidc/auth?client_id=1234567890&...&direct_sign_in=sso:1234567890' ``` Of in een ondersteunde SDK: ```javascript logtoClient.signIn({ redirectUri: 'https://your-app.com/callback', directSignIn: 'social:google', }); ``` Met de parameter `direct_sign_in` wordt de gebruiker direct doorgestuurd naar de authenticatiepagina van de opgegeven identiteitsprovider. Dit vermindert aanzienlijk het aantal stappen dat nodig is om het authenticatieproces te voltooien. ## Conclusie Bij Logto nemen we de gebruikerservaring zeer serieus. Door gebruik te maken van de parameters `first_screen` en `direct_sign_in`, kun je het onboardingproces voor je klanten aanzienlijk verbeteren. Als je een aangepast en visueel aantrekkelijk aanmeldingsscherm wilt maken, verken dan zeker onze [custom-css](https://docs.logto.io/docs/recipes/customize-sie/custom-css/) functie. Voor meer informatie, bekijk de [authenticatieparameters](https://docs.logto.io/docs/references/openid-connect/authentication-parameters/).