En esta página, se describe cómo implementar funciones relacionadas con la forma en que los usuarios acceden o salen con Google One Tap.
Cómo permitir que los usuarios accedan automáticamente
Google One Tap admite el acceso automático, lo que proporciona una experiencia del usuario (UX) fluida, ya que quita los pasos manuales que los usuarios deben realizar cuando regresan a tu sitio. Los usuarios no necesitan recordar qué Cuenta de Google seleccionaron durante su última visita, lo que disminuye las posibilidades de que se creen cuentas duplicadas innecesarias en tu plataforma.
El acceso automático está diseñado para complementar nuestro botón de Acceder con Google y los diálogos de One Tap. Está diseñado para usarse en todo tu sitio, con el registro manual o el cambio de cuentas que se produce solo después de que el usuario sale de tu sitio por primera vez.
Para que se produzca el acceso automático, se deben cumplir las siguientes condiciones:
- Los usuarios deben acceder primero a su Cuenta de Google.
- otorgó previamente su consentimiento para compartir el perfil de su cuenta con tu app
- Cuando se usa FedCM, solo se realizó un intento de acceso en los últimos 10 minutos. Se muestra One Tap cuando se producen intentos de acceso repetidos durante este período.
- Cuando se usa FedCM, Chrome requiere que los usuarios vuelvan a confirmar que quieren acceder al sitio web con la Cuenta de Google en cada instancia de Chrome, incluso si el usuario aprobó el sitio web antes del lanzamiento de FedCM. Este cambio puede afectar el porcentaje de conversiones en tu sitio existente que usa One Tap. En la actualización de Chrome M121, la mejora del acceso automático mitiga el problema de la disminución del porcentaje de conversiones.
En las páginas en las que está habilitado el acceso automático y si se cumplen estas condiciones, la credencial del token de ID del usuario se devuelve automáticamente sin ninguna interacción del usuario. Si no se cumplen estas condiciones, y aunque el acceso automático esté habilitado en la página, el usuario se dirigirá de forma predeterminada al flujo de One Tap para acceder o dar su consentimiento. Si un usuario tiene varias Cuentas de Google y visita tu sitio, primero debe acceder a una sola Cuenta de Google y otorgar su consentimiento para esa cuenta.
Puedes medir el porcentaje de éxito del acceso automático con el valor auto en el campo select_by del objeto CredentialResponse que se muestra cuando se controla la respuesta en una devolución de llamada de JavaScript (callback o data-callback).
select_by no se incluye en las solicitudes HTTP POST que se envían a login_uri o data-login_uri.
Para habilitar el acceso automático, agrega data-auto_select="true" a tu código, como se muestra en el siguiente fragmento:
<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>
Salir
Cuando un usuario sale de tu sitio web, se lo puede dirigir a una página en la que se muestra automáticamente un mensaje de Acceso con un toque de Google. Para esta configuración, se debe prohibir la selección automática. De lo contrario, el usuario volverá a acceder automáticamente, lo que generará una experiencia del usuario de bucle infinito.
Usa FedCM
Para mejorar la experiencia del usuario, hay un período de inactividad de 10 minutos entre cada intento de acceso automático. Durante este período, se muestra el mensaje de One Tap. Los usuarios deben hacer clic de forma explícita en One Tap para acceder.
Sin FedCM
Para prohibir la selección automática después de que un usuario salga de su cuenta, agrega el nombre de clase g_id_signout a todos tus vínculos y botones de salida. Consulta el siguiente fragmento de código:
<div class="g_id_signout">Sign Out</div>
El siguiente fragmento de código de JavaScript también se puede usar para salir:
const button = document.getElementById('signout_button');
button.onclick = () => {
google.accounts.id.disableAutoSelect();
}
Para evitar una UX de bucle infinito, el estado de salida de la cuenta del usuario se almacena en una cookie llamada
g_state que establece la biblioteca de Google Identity Services. De forma predeterminada, el dominio de la cookie se establece en el dominio de la página actual. Si One Tap se muestra en el dominio superior y los subdominios, la cookie de estado debe ser visible en todos tus dominios. Usa el atributo data-state_cookie_domain para establecer el dominio de la cookie g_state en tu dominio superior. Por ejemplo, agrega
data-state_cookie_domain="example.com" al elemento g_id_onload para un
dominio superior de example.com y un subdominio llamado webapp.example.com.
Si tienes un servicio que supervisa todas las cookies que se usan en tu dominio,
debes notificarle sobre la cookie g_state.
Si no quieres cargar la biblioteca cliente en tus páginas posteriores al acceso, usa estas soluciones para evitar una UX de bucle muerto después de que se produzca el cierre de sesión:
- Cuando salgan de la cuenta, redirecciona a los usuarios a una página (por ejemplo,
https://example.com/logged_out) en la que no se muestre One Tap o en la que el acceso automático esté siempre inhabilitado. - Cuando se salga de la sesión, agrega un parámetro a la URL. Por ejemplo,
logged_out=1. Cuando renderices One Tap con la API de JavaScript, verifica ese parámetro de URL e inhabilita el acceso automático cuando esté presente.
Recorridos clave del usuario
La página de acceso automático
Usa FedCM
Los usuarios pueden cerrar el mensaje de One Tap haciendo clic en el botón X. Por motivos de accesibilidad, se comparte un token de ID con tu sitio web, incluso si los usuarios hacen clic en el botón X.
Para mejorar la experiencia del usuario, hay un período de inactividad de 10 minutos entre cada intento de acceso automático. Durante este período, se muestra el mensaje de One Tap. Los usuarios deben hacer clic de forma explícita en One Tap para acceder.
Sin FedCM
Si los usuarios no hacen clic en el botón Cancelar en un plazo de 5 segundos, se compartirá un token de ID con tu sitio web.
Cuando se cancela el acceso, según la cantidad de sesiones activas de Google, se muestra la página del selector de cuentas o la página del usuario recurrente.
- Varias sesiones de Google
- Sesiones de Google únicas
