UX con il pulsante Accedi con Google

Questa pagina descrive l'esperienza utente (UX) del pulsante Accedi con Google.

Rendering dei pulsanti

Un pulsante personalizzato mostra le informazioni del profilo della prima sessione Google che approva il tuo sito web. Una sessione Google approvata ha un account corrispondente sul tuo sito web che ha eseguito l'accesso utilizzando Accedi con Google in precedenza.

Se viene visualizzato un pulsante personalizzato, l'utente sa che:

• È presente almeno una sessione Google attiva.
• Esiste un account corrispondente sul tuo sito web.

Un pulsante personalizzato fornisce agli utenti un'indicazione rapida dello stato della sessione, sia sul lato di Google sia sul tuo sito web, prima che facciano clic sul pulsante. Ciò è particolarmente utile per gli utenti finali che visitano il tuo sito web solo occasionalmente. Potrebbe dimenticare se un account è stato creato o meno e in che modo. Un pulsante personalizzato ricorda loro che Accedi con Google è già stato utilizzato. Pertanto, contribuisce a evitare la creazione di account duplicati non necessari sul tuo sito web.

Per indicare lo stato della sessione, il pulsante personalizzato viene visualizzato nei seguenti modi:

• Una sessione:esiste una sola sessione lato Google. Questa sessione approva il cliente e sul tuo sito web è presente un account corrispondente.

  

• Più sessioni: ci sono più sessioni da parte di Google. Queste sessioni approvano il client. L'approvazione è indicata dalla freccia dell'elenco accanto all'account visualizzato. Almeno una sessione ha un account corrispondente sul tuo sito web.

  

• Nessuna sessione: non è presente alcuna sessione lato Google o nessuna delle sessioni ha ancora approvato il client.

  

Il pulsante personalizzato viene visualizzato automaticamente quando lo stato della sessione è idoneo, a meno che le impostazioni del pulsante non ne consentano la visualizzazione. Il pulsante personalizzato non viene visualizzato se:

• L'attributo data-type è icon.
• L'attributo data-size è impostato su medium o small.
• L'attributo data-width è impostato su un numero inferiore a 200 px.
• Il cookie di terze parti è bloccato e la versione FedCM del pulsante non è abilitata.

Il nome o l'indirizzo email viene troncato quando è troppo lungo per essere visualizzato all'interno del pulsante.

Federated Credential Manager (FedCM)

Privacy Sandbox per il web introduce modifiche significative ai servizi di identità Google e all'accesso degli utenti. Influisce sul pulsante personalizzato Accedi con Google. Il flusso di accesso non è interessato dal pulsante, ma con i cookie di terze parti bloccati, gli utenti di ritorno non vedranno il pulsante personalizzato.

Con il flusso del pulsante dell'API Federated Credentials Management (FedCM), gli utenti potrebbero vedere il pulsante Accedi con Google personalizzato sul tuo sito. Per impostazione predefinita, FedCM è disattivato, ma puoi attivarlo modificando un attributo (HTML/JavaScript). I vantaggi del pulsante FedCM includono:

• Miglioramento dell'esperienza degli utenti di ritorno: la procedura di accesso per gli utenti di ritorno è semplificata perché gli utenti possono riconoscere i propri account esistenti. È stato dimostrato che questo miglioramento del riconoscimento porta a una percentuale di clic (CTR) più elevata. Inoltre, a differenza del flusso del pulsante senza FedCM abilitato, il flusso del pulsante FedCM supporta la funzionalità di selezione automatica: gli utenti di ritorno con una sessione Google attiva eseguiranno l'accesso automaticamente dopo aver fatto clic sul pulsante, bypassando la richiesta di selezione dell'account.

• Integrazione delle funzionalità avanzate: abbiamo integrato le funzionalità One Tap e di accesso automatico, consentendo a tutte le funzionalità di accesso di Federated Credential Management (FedCM) con Google di una singola Relying Party (RP) di funzionare in modo coordinato. I gesti dell'utente nel flusso del pulsante FedCM verranno registrati e rispettati da Chrome per completare la riconferma una tantum per il flusso di accesso automatico One Tap. In questo modo, l'esperienza è fluida in tutte le funzionalità.

Percorsi utente chiave

I percorsi degli utenti variano in base ai seguenti stati.

• Stato della sessione sui siti web Google. I seguenti termini vengono utilizzati per indicare diversi stati della sessione Google all'inizio del percorso dell'utente.

  • Has-Google-session: è presente almeno una sessione attiva sui siti web di Google.
  • Nessuna sessione Google: non è presente alcuna sessione attiva sui siti web Google.

• Indica se l'Account Google selezionato ha approvato il tuo sito web all'inizio del percorso dell'utente. I seguenti termini vengono utilizzati per indicare diversi stati di approvazione.

  • Nuovo utente: l'account selezionato non ha approvato il tuo sito web.
  • Utente di ritorno: l'account selezionato ha già approvato il tuo sito web.

Percorso del nuovo utente con sessione Google

Percorso dell'utente di ritorno con sessione Google

Has-Google-session con selezione automatica del percorso utente di ritorno

Percorso del nuovo utente senza sessione Google

Percorso dell'utente di ritorno senza sessione Google

Percorsi utente chiave dell'account Family Link

I percorsi utente chiave generali della sezione precedente sono ancora validi. Di seguito viene mostrato il flusso aggiuntivo che verrà presentato per l'Account Google del bambino al momento dell'accesso.

Informazioni aggiuntive sul flusso del pulsante FedCM

• Aggiungi l'attributo allow="identity-credentials-get" al frame principale se la tua app web chiama l'API Button da iframe multiorigine. Per saperne di più, consulta il passaggio 7.

• Configura correttamente il Content Security Policy (CSP) del tuo sito. Per saperne di più, consulta il passaggio 8.

• Lo stato di raffreddamento e le impostazioni di accesso di terze parti in Chrome non influiscono sul flusso del pulsante FedCM. Lo stato (come mostrato negli screenshot seguenti) influisce solo sull'esperienza utente One Tap.