En esta página, se describe la experiencia del usuario (UX) del botón Acceder con Google.
Renderización de botones
Un botón personalizado muestra la información del perfil de la primera sesión de Google que aprueba tu sitio web. Una sesión de Google aprobada tiene una cuenta correspondiente en tu sitio web que accedió con Acceder con Google anteriormente.
Si se muestra un botón personalizado, el usuario sabe lo siguiente:
- Hay al menos una sesión de Google activa.
- Hay una cuenta correspondiente en tu sitio web.
Un botón personalizado les brinda a los usuarios una indicación rápida del estado de la sesión, tanto en Google como en tu sitio web, antes de que hagan clic en él. Esto es útil, en especial, para los usuarios finales que visitan tu sitio web solo de forma ocasional. Es posible que olviden si se creó una cuenta o no, y de qué manera. Un botón personalizado le recuerda que ya usó Acceder con Google. Por lo tanto, ayuda a evitar la creación innecesaria de cuentas duplicadas en tu sitio web.
Para indicar el estado de la sesión, el botón personalizado se muestra de las siguientes maneras:
Una sesión: Solo hay una sesión del lado de Google. Esa sesión aprueba al cliente y hay una cuenta correspondiente en tu sitio web.
Varias sesiones: Hay varias sesiones del lado de Google. Esas sesiones aprueban al cliente. La flecha de la lista junto a la cuenta que se muestra indica la aprobación. Al menos una sesión tiene una cuenta correspondiente en tu sitio web.
Sin sesión: No hay ninguna sesión del lado de Google o ninguna de las sesiones aún aprobó al cliente.
El botón personalizado se muestra automáticamente cuando el estado de la sesión es adecuado, a menos que la configuración del botón no permita que se muestre. El botón personalizado no se muestra en los siguientes casos:
- El atributo
data-typeesicon. - El atributo
data-sizese establece enmediumosmall. - El atributo
data-widthse establece en un número menor que 200 px. - La cookie de terceros está bloqueada y no está habilitada la versión de FedCM del botón.
El nombre o la dirección de correo electrónico se muestran con puntos suspensivos cuando son demasiado largos para mostrarse dentro del botón.
Federated Credential Manager (FedCM)
Privacy Sandbox para la Web presenta cambios significativos en Google Identity Services y el acceso de los usuarios. Afecta al botón personalizado de Acceder con Google. Si bien el flujo de acceso no se ve afectado por el botón, si se bloquean las cookies de terceros, los usuarios recurrentes no verán el botón personalizado.
Con el flujo de botones de la API de Federated Credentials Management (FedCM), los usuarios podrían ver el botón personalizado de Acceder con Google en tu sitio. De forma predeterminada, FedCM está inhabilitado, pero puedes habilitarlo cambiando un atributo (HTML/JavaScript). Estos son algunos de los beneficios del botón FedCM:
Experiencia del usuario recurrente mejorada: El proceso de acceso de los usuarios recurrentes se optimiza porque los usuarios pueden reconocer sus cuentas existentes. Se demostró que este reconocimiento mejorado genera una tasa de clics (CTR) más alta. Además, a diferencia del flujo de botones sin FedCM habilitado, el flujo de botones de FedCM admite la función de selección automática: los usuarios recurrentes con una sesión activa de Google accederán automáticamente después de hacer clic en el botón, sin pasar por el mensaje del selector de cuentas.
Integración de funciones mejorada: Integramos las funciones de One Tap y Acceso automático, lo que permite que todas las funciones de Acceder con Google de la administración de credenciales federadas (FedCM) de un único usuario de confianza (RP) funcionen en conjunto. Chrome registrará y respetará los gestos del usuario en el flujo de botones de FedCM para completar la confirmación única del flujo de acceso automático con One Tap. Esto garantiza una experiencia fluida en todas las funciones.
Recorridos clave de los usuarios
Los recorridos de los usuarios varían según los siguientes estados.
Estado de la sesión en los sitios web de Google Los siguientes términos se usan para indicar diferentes estados de la sesión de Google cuando comienza el recorrido del usuario.
- Has-Google-session: Hay al menos una sesión activa en los sitios web de Google.
- Sin sesión de Google: No hay una sesión activa en los sitios web de Google.
Si la Cuenta de Google seleccionada aprobó tu sitio web cuando comienza el recorrido del usuario Los siguientes términos se usan para indicar diferentes estados de aprobación.
- Usuario nuevo: La cuenta seleccionada no aprobó tu sitio web.
- Usuario recurrente: La cuenta seleccionada ya aprobó tu sitio web.
Recorrido del usuario nuevo que tiene una sesión de Google
El botón Acceder con Google
La página del selector de cuentas
La nueva página de consentimiento del usuario
Después de que el usuario confirme, se compartirá un token de ID con tu sitio web.
Los usuarios pueden agregar una nueva sesión de Google haciendo clic en el botón Usar otra cuenta. Consulta la sección Recorrido del usuario sin sesión de Google.
La penúltima pantalla del flujo es la pantalla de carga, que redirecciona automáticamente a los usuarios a tu extremo de acceso sin que los usuarios realicen ninguna acción.
Recorrido del usuario recurrente que tiene una sesión de Google
El botón Acceder con Google
La página del selector de cuentas
Después de que el usuario elige una cuenta que ya usó, se comparte un token de ID con tu sitio web.
Los usuarios pueden agregar una nueva sesión de Google haciendo clic en el botón Usar otra cuenta. Consulta la sección Recorridos del usuario "Sin sesión de Google".
La penúltima pantalla del flujo es la pantalla de carga, que redirecciona automáticamente a los usuarios a tu extremo de acceso sin que los usuarios realicen ninguna acción.
Has-Google-session con recorrido del usuario que regresa seleccionado automáticamente
El botón Acceder con Google sin FedCM no tiene la función de selección automática.
Los usuarios recurrentes con una sesión activa de Google se seleccionarán automáticamente después de hacer clic en el botón, lo que omitirá el mensaje del selector de cuentas. Establece el atributo auto select como verdadero (HTML/JavaScript).
Recorrido del usuario nuevo sin sesión de Google
El botón Acceder con Google
La primera página para agregar una nueva sesión de Google.
La segunda página para agregar una nueva sesión de Google.
La nueva página de consentimiento del usuario
Después de que el usuario confirme, se compartirá un token de ID con tu sitio web.
La penúltima pantalla del flujo es la pantalla de carga, que redirecciona automáticamente a los usuarios a tu extremo de acceso sin que los usuarios realicen ninguna acción.
Recorrido del usuario recurrente sin sesión de Google
El botón Acceder con Google
La primera página para agregar una nueva sesión de Google.
La segunda página para agregar una nueva sesión de Google.
Después de que el usuario hace clic en el botón Siguiente, se comparte un token de ID con tu sitio web.
Recorridos clave de los usuarios de la cuenta de Family Link
Aún se aplican los recorridos clave generales de los usuarios de la sección anterior. A continuación, se muestra el flujo adicional que se presentaría para la Cuenta de Google de tu hijo o hija cuando acceda.
No-Google-session
El botón Acceder con Google
La primera página para agregar una nueva sesión de Google para niños (correo electrónico de la Cuenta de Google para niños)
La segunda página para agregar una nueva sesión de Google para tu hijo o hija (contraseña de la Cuenta de Google de tu hijo o hija)
La primera página para obtener la aprobación del padre o la madre para agregar una nueva sesión de Google para el hijo o la hija
La segunda página para obtener la aprobación del padre o la madre para agregar una nueva sesión de Google para niños.
La tercera página para obtener la aprobación del padre o la madre para agregar una nueva sesión de Google para niños.
La primera página para obtener la aprobación del padre o la madre para que un hijo o una hija acceda a la aplicación con su Cuenta de Google.
Segunda página para obtener la aprobación del padre o la madre para que un hijo o una hija acceda a la aplicación con su Cuenta de Google.
La tercera página para obtener la aprobación del padre o la madre para que un hijo o una hija acceda a la aplicación con su Cuenta de Google.
La página final para obtener la aprobación del padre o la madre para que un hijo o una hija acceda a la aplicación con su Cuenta de Google.
Después de que el progenitor hace clic en el botón Continuar, se comparte un token de ID con tu sitio web.
Has-Google-session
El botón Acceder con Google
La página del selector de cuentas
La primera página para obtener la aprobación del padre o la madre para que un hijo o una hija acceda a la aplicación con su Cuenta de Google.
Segunda página para obtener la aprobación del padre o la madre para que un hijo o una hija acceda a la aplicación con su Cuenta de Google.
La tercera página para obtener la aprobación del padre o la madre para que un hijo o una hija acceda a la aplicación con su Cuenta de Google.
La página final para obtener la aprobación del padre o la madre para que un hijo o una hija acceda a la aplicación con su Cuenta de Google.
Después de que el progenitor hace clic en el botón Continuar, se comparte un token de ID con tu sitio web.
Por el momento, el botón Acceder con Google con FedCM habilitado no es compatible con las cuentas de Family Link.
Información adicional sobre el flujo de botones de FedCM
Agrega el atributo
allow="identity-credentials-get"al marco superior si tu app web llama a la API de Button desde iframes de origen cruzado. Consulta el paso 7 para obtener más información.Configura correctamente la Política de Seguridad del Contenido (CSP) de tu sitio. Consulta el paso 8 para obtener más información.
El estado de inactividad y la configuración de acceso de terceros en Chrome no tienen ningún efecto en el flujo de botones de FedCM. El estado (como se muestra en las siguientes capturas de pantalla) solo afecta a la UX de One Tap.
