Questa pagina descrive come implementare le funzionalità relative alla modalità di accesso o uscita degli utenti con One Tap di Google.
Accedere automaticamente agli utenti
One Tap di Google supporta l'accesso automatico, che offre un'esperienza utente (UX) senza interruzioni rimuovendo i passaggi manuali che gli utenti devono eseguire quando tornano al tuo sito. Gli utenti non devono ricordare quale Account Google hanno selezionato durante la loro ultima visita, riducendo le probabilità di creazione di account duplicati non necessari sulla tua piattaforma.
L'accesso automatico è progettato per integrare il pulsante Accedi con Google e le finestre di dialogo One Tap. È progettato per essere utilizzato su tutto il sito, con la registrazione manuale o il cambio di account che si verifica solo dopo che l'utente ha eseguito la disconnessione dal sito.
Affinché si verifichi l'accesso automatico, sono necessarie le seguenti condizioni:
- Gli utenti devono aver eseguito l'accesso al proprio Account Google.
- In precedenza hanno concesso l'autorizzazione a condividere il profilo del proprio account con la tua app.
- Quando utilizzano FedCM, hanno effettuato un solo tentativo di accesso negli ultimi 10 minuti. One Tap viene visualizzato quando si verificano tentativi di accesso ripetuti durante questa finestra.
- Quando utilizzano FedCM, Chrome richiede agli utenti di riconfermare di voler accedere al sito web con l'Account Google in ogni istanza di Chrome, anche se l'utente ha approvato il sito web prima del lancio di FedCM. Questa modifica potrebbe influire sul tasso di conversione del tuo sito esistente che utilizza One Tap. Nell'aggiornamento di Chrome M121, il miglioramento dell'accesso automatico attenua il problema del calo del tasso di conversione.
Per le pagine in cui è attivato l'accesso automatico e se queste condizioni sono soddisfatte, le credenziali del token ID dell'utente vengono restituite automaticamente senza alcuna interazione dell'utente. Se queste condizioni non sono soddisfatte, anche se l'accesso automatico è attivato nella pagina, l'utente utilizza il flusso One Tap predefinito per l'accesso o il consenso. Se un utente ha più Account Google e visita il tuo sito, deve prima accedere a un singolo Account Google e aver fornito il consenso per quell'account.
Puoi misurare il tasso di successo dell'accesso automatico utilizzando il auto valore nel
select_by campo dell'oggetto delle credenziali restituito.
Per attivare l'accesso automatico, aggiungi data-auto_select="true" al codice, come
mostrato nel seguente snippet:
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-auto_select="true">
</div>
Esci
Quando un utente esce dal tuo sito web, può essere indirizzato a una pagina in cui viene visualizzata automaticamente una richiesta One Tap di Google. Per questa configurazione, la selezione automatica deve essere vietata. In caso contrario, l'utente accede di nuovo automaticamente, il che porta a un'esperienza utente in loop.
Utilizzo di FedCM
Per migliorare l'esperienza utente, è previsto un periodo di silenzio di 10 minuti tra ogni tentativo di accesso automatico. Durante questo periodo di tempo, viene visualizzata la richiesta One Tap. Gli utenti devono fare clic esplicitamente su One Tap per accedere.
Senza FedCM
Per impedire la selezione automatica dopo che un utente ha eseguito la disconnessione, aggiungi il nome della classe g_id_signout a tutti i link e i pulsanti di disconnessione. Vedi il seguente snippet di codice:
<div class="g_id_signout">Sign Out</div>
Il seguente snippet di codice JavaScript può essere utilizzato anche per la disconnessione:
const button = document.getElementById('signout_button');
button.onclick = () => {
google.accounts.id.disableAutoSelect();
}
Per evitare un'esperienza utente in loop, lo stato di disconnessione dell'utente viene memorizzato in un cookie denominato g_state impostato dalla libreria dei servizi di identità Google. Per impostazione predefinita, il dominio del cookie è impostato sul dominio della pagina corrente. Se One Tap viene visualizzato nel dominio principale e nei sottodomini, il cookie di stato deve essere visibile in tutti i tuoi domini. Utilizza l'attributo data-state_cookie_domain per impostare il dominio del cookie g_state sul dominio principale. Ad esempio, aggiungi
data-state_cookie_domain="example.com" all'g_id_onload elemento per un
dominio principale di example.com e un sottodominio denominato webapp.example.com.
Se hai un servizio che monitora tutti i cookie utilizzati nel tuo dominio, devi comunicare al servizio l'esistenza del cookie g_state.
Se non vuoi caricare la libreria client nelle pagine post-accesso, utilizza queste soluzioni per evitare un'esperienza utente in loop dopo la disconnessione:
- Al momento della disconnessione, reindirizza gli utenti a una pagina (ad esempio,
https://example.com/logged_out) in cui One Tap non viene visualizzato o in cui l'accesso automatico è sempre disattivato. - Al momento dell'uscita, aggiungi un parametro all'URL. Ad esempio,
logged_out=1. Quando esegui il rendering di One Tap tramite l'API JavaScript, controlla il parametro dell'URL e disattiva l'accesso automatico se presente.
Percorsi utente chiave
La pagina di accesso automatico.
Utilizzo di FedCM
Gli utenti possono chiudere la richiesta One Tap facendo clic sul pulsante X. Per motivi di accessibilità, un token ID viene condiviso con il tuo sito web anche se gli utenti fanno clic sul pulsante X.
Per migliorare l'esperienza utente, è previsto un periodo di silenzio di 10 minuti tra ogni tentativo di accesso automatico. Durante questo periodo di tempo, viene visualizzata la richiesta One Tap. Gli utenti devono fare clic esplicitamente su One Tap per accedere.
Senza FedCM
Se gli utenti non fanno clic sul pulsante Annulla entro 5 secondi, un token ID viene condiviso con il tuo sito web.
Quando l'accesso viene annullato, in base al numero di sessioni Google attive, viene visualizzata la pagina di selezione dell'account o la pagina dell'utente di ritorno.
- Più sessioni Google
- Sessioni Google singole
