Incorpora moduli di accesso o registrazione in modo sicuro sul tuo sito

Reindirizzare vs. Non-reindirizzare vs. Accesso incorporato#

OpenID Connect Fundation: In OpenID Connect (OIDC), i reindirizzamenti del browser a un Identity Provider (IdP) sono una parte fondamentale del processo di autenticazione. Questo avviene perché il Relying Party (RP) delega l'autenticazione dell'utente a un IdP. Una volta che l'utente fornisce le credenziali all'IdP, questo restituisce i token (come i token ID e di accesso) al RP tramite il browser. Questo meccanismo di reindirizzamento garantisce che le credenziali utente sensibili vengano gestite solo dall'IdP, non dal RP.

Secondo il criterio di OIDC, gli utenti devono essere reindirizzati a un Identity Provider (IdP) per completare l'autenticazione in modo sicuro. Questo garantisce che le credenziali sensibili siano gestite dall'IdP, non dall'applicazione (RP). L'accesso senza reindirizzamento può esporre le credenziali degli utenti, rendendole vulnerabili ad attacchi come furto di credenziali, phishing o dirottamento di sessione.

Quando si utilizza Logto basato su OIDC, gli utenti sono reindirizzati a un dominio Logto sicuro e verificato per completare il processo di accesso. Tuttavia, molti clienti desiderano incorporare login o widget di registrazione direttamente sul loro sito, noti come "accesso incorporato". Questa è una pratica comune per migliorare la conversione degli utenti integrando moduli di registrazione email o pulsanti di accesso sociale nel contesto del sito.

Accesso incorporato e reindirizzamento in conflitto? — Per nulla. Si completano a vicenda nel flusso di autenticazione.

Casi d'uso per l'accesso incorporato#

Ecco alcuni esempi per illustrare come l'accesso incorporato possa essere implementato in modo sicuro:

Caso 1: Incorpora il campo di registrazione email sulla homepage#

Molti siti web mostrano una semplice input email e un pulsante di registrazione (ad es. "Iscriviti," "Inizia ora," o "Prova gratuita") in modo prominente sulla homepage. Dopo aver inviato la loro email, gli utenti vengono reindirizzati a una nuova pagina per continuare il processo di registrazione.

Esempi:

• Stripe: "Inizia ora con un indirizzo email"

• Coinbase: "Registrati con email"

Caso 2: Incorpora tutte le opzioni di registrazione accanto ai contenuti#

Per blog o siti di contenuti, gli utenti anonimi possono navigare alcuni contenuti ma sono incoraggiati a registrarsi per l'accesso completo. I moduli di registrazione spesso appaiono accanto o sotto il contenuto.

Esempio:

• Medium: Visualizza un invito alla registrazione quando un utente vuole leggere l'articolo completo.

• X (Twitter): Sollecita gli utenti a registrarsi per accedere a timeline personalizzate e funzionalità.

In questi esempi, solo le opzioni iniziali di registrazione (inserimento email o pulsanti di accesso sociale) sono incorporate. L'utente viene quindi reindirizzato all'IdP per l'autenticazione sicura. Poiché sia Medium sia X agiscono come propri IdP, gestiscono l'autenticazione tramite modali anziché reindirizzamenti, offrendo un'esperienza utente simile in entrambi i casi.

Come incorporare le opzioni di registrazione sul tuo sito web?#

Usa i parametri di autenticazione di Logto direct_sign_in, first_screen, e login_hint per implementare la registrazione o l'accesso incorporato. Ecco due best practice:

Accesso diretto#

Visualizza pulsanti di accesso sociale (ad es. Google, Facebook, Apple) o pulsanti di accesso aziendale (ad es. Google Workspace, Azure AD, Okta) sul tuo sito e reindirizza gli utenti direttamente al provider pertinente. I formati supportati includono:

I formati attualmente supportati sono:

• social:<idp-name> (Utilizza un connettore sociale con il nome IdP specificato, es. social:google)
• sso:<connector-id> (Utilizza il connettore SSO aziendale specificato, es. sso:123456)

Scopri di più nella sezione Accesso diretto dei documenti Logto.

Prima schermata#

Oltre a saltare ai provider di identità di terze parti (ad es. accesso Google o Facebook), altri metodi di autenticazione devono essere reindirizzati alla schermata di accesso di Logto per continuare. In sostanza, tutti i flussi di autenticazione richiedono un reindirizzamento — o a un IdP di terze parti o a Logto come il tuo IdP di prima parte.

Questo parametro first_screen ti consente di personalizzare la prima schermata che gli utenti vedono quando iniziano il processo di autenticazione. Il valore per questo parametro può essere:

• sign_in: Permette agli utenti di accedere direttamente alla pagina di accesso.
• register: Permette agli utenti di accedere direttamente alla pagina di registrazione.
• single_sign_on: Permette agli utenti di accedere direttamente alla pagina del single sign-on (SSO).
• identifier:sign_in: Permette agli utenti di accedere direttamente a una pagina che mostra solo metodi di accesso basati su identificatori specifici.
• identifier:register: Permette agli utenti di accedere direttamente a una pagina che mostra solo metodi di registrazione basati su identificatori specifici.
• reset_password: Permette agli utenti di accedere direttamente alla pagina di reimpostazione della password.

Scopri di più nella sezione Prima schermata dei documenti Logto.

Suggerimento di accesso#

Come accennato in precedenza, non puoi raccogliere direttamente password degli utenti o codici di verifica email/SMS sul tuo sito web. Questi devono essere gestiti e verificati dall'IdP.

Tuttavia, puoi raccogliere indirizzi email o numeri di telefono degli utenti come identificatori e passarli al momento del reindirizzamento alla prima schermata appropriata (ad es. register o identifier:register). Per fare ciò, usa il parametro login_hint per inviare l'identificatore dal tuo sito web alla schermata di accesso di Logto. L'URL potrebbe apparire in questo modo: https://auth.example.com/identifier:[email protected].

Per ulteriori dettagli, consulta le Specifiche di Richiesta di Autenticazione di OIDC.

Conclusione#

Sfruttando i parametri di Logto direct_sign_in, first_screen e login_hint, puoi facilmente incorporare moduli di registrazione e accesso sul tuo sito web, garantendo un'esperienza utente sicura e amichevole massimizzando la conversione degli utenti.