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 per la 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 quanto segue:

• Esiste almeno una sessione Google attiva.
• Sul tuo sito web è presente un account corrispondente.

Un pulsante personalizzato fornisce agli utenti un'indicazione rapida dello stato della sessione, sia da parte di Google sia sul tuo sito web, prima che facciano clic sul pulsante. Questo è particolarmente utile per gli utenti finali che visitano il tuo sito web solo occasionalmente. Potrebbe dimenticare se è stato creato un account o meno e in che modo. Un pulsante personalizzato gli ricorda che Accedi con Google è stato utilizzato in precedenza. In questo modo, 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: sono presenti più sessioni lato 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 è adatto, 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 visualizzato in forma ellittica quando sono troppo lunghi per essere visualizzati all'interno del pulsante.

Gestore delle credenziali federate (FedCM)

Privacy Sandbox per il web introduce modifiche significative ai Servizi di identità Google e all'accesso degli utenti. Ha impatto sul pulsante personalizzato Accedi con Google. Sebbene il flusso di accesso non sia interessato dal pulsante, con i cookie di terze parti bloccati, gli utenti di ritorno non vedranno il pulsante personalizzato.

Con il flusso di pulsanti dell'API Federated Credentials Management (FedCM), gli utenti potranno 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 utente di ritorno: la procedura di accesso degli utenti di ritorno è stata semplificata perché gli utenti possono riconoscere i propri account esistenti. È stato dimostrato che questo miglioramento del riconoscimento porta a un aumento della percentuale di clic (CTR). Inoltre, a differenza del flusso di pulsanti senza l'attivazione di FedCM, il flusso di pulsanti FedCM supporta la funzionalità di selezione automatica: gli utenti di ritorno con una sessione Google attiva accederanno automaticamente dopo aver fatto clic sul pulsante, ignorando la richiesta di Account Chooser.

• Integrazione delle funzionalità avanzate: abbiamo integrato le funzionalità One Tap e Accesso automatico, consentendo a tutte le funzionalità di accesso con Google di Federated Credential Management (FedCM) di un'unica terza parte attendibile (RP) di funzionare in modo coordinato. I gesti dell'utente nel flusso del pulsante FedCM verranno registrati e rispettati da Chrome per soddisfare la riconferma una tantum per il flusso di accesso automatico One Tap. In questo modo, viene garantita un'esperienza senza interruzioni in tutte le funzionalità.

Percorsi utente principali

I percorsi degli utenti variano in base ai seguenti stati.

• Stato della sessione sui siti web di 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 di 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 Has-Google-session

Percorso dell'utente di ritorno con sessione Google

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

Percorso del nuovo utente senza sessione Google

Percorso dell'utente di ritorno senza sessione Google

Percorsi utente per le chiavi dell'account Family Link

I percorsi degli utenti chiave generali della sezione precedente continuano a essere validi. Di seguito è riportato il flusso aggiuntivo che verrà presentato per l'Account Google di tuo figlio al momento dell'accesso.

Informazioni aggiuntive sul flusso dei pulsanti FedCM

• Aggiungi l'attributo allow="identity-credentials-get" al frame principale se la tua app web chiama l'API Button da iframe cross-origin. Per ulteriori informazioni, consulta il passaggio 7.

• Configura correttamente i criteri di sicurezza del contenuto (CSP) del tuo sito. Per ulteriori informazioni, consulta il passaggio 8.

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