UX del botón Acceder con Google

En esta página, se describe la experiencia del usuario (UX) del botón Acceder con Google.

Renderización de botones

En un botón personalizado, se muestra la información del perfil de la primera sesión de Google que aprueba tu sitio web. Una sesión aprobada de Google tiene una cuenta correspondiente en tu sitio web que accedió con Acceder con Google anteriormente.

Si se muestra un botón personalizado, el usuario sabrá 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 del lado de Google como en tu sitio web, antes de que hagan clic en el botón. Esto es especialmente útil para los usuarios finales que visitan tu sitio web solo de vez en cuando. Es posible que olviden si se creó una cuenta o no, y de qué manera. Un botón personalizado le recuerda que ya se 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 aprobación se indica con la flecha de lista junto a la cuenta que se muestra. Al menos una sesión tiene una cuenta correspondiente en tu sitio web.

  

• Sin sesión: No hay sesión del lado de Google o ninguna de las sesiones aprobó al cliente aún.

  

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-type es icon.
• El atributo data-size se establece en medium o small.
• El atributo data-width se establece en un número inferior a 200 px.
• La cookie de terceros está bloqueada y la versión de FedCM del botón no está habilitada.

El nombre o la dirección de correo electrónico se muestran con puntos suspensivos cuando son demasiado largos para aparecer dentro del botón.

Credential Manager federado (FedCM)

Privacy Sandbox para la Web introduce cambios significativos en los servicios de identidad de Google y el acceso de los usuarios. Afecta el botón personalizado de Acceder con Google. Si bien el flujo de acceso no se ve afectado con 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án 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 de FedCM:

• Mejora de la experiencia del usuario recurrente: El proceso de acceso para usuarios recurrentes se optimizó porque los usuarios pueden reconocer sus cuentas existentes. Se demostró que esta mejora en el reconocimiento genera una mayor tasa de clics (CTR). 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 de Google activa accederán automáticamente después de hacer clic en el botón, lo que omitirá el mensaje del Selector de cuentas.

• Integración de funciones mejoradas: Integramos las funciones de One Tap y Acceso automático, lo que permite que todas las funciones de Acceder con Google de Federated Credential Management (FedCM) de una sola parte que confía (RP) funcionen en conjunto. Chrome registrará y respetará los gestos del usuario en el flujo del botón de FedCM para completar la reconfirmación única del flujo de acceso automático de One Tap. Esto garantiza una experiencia fluida en todas las funciones.

Recorridos clave de los usuarios

Los recorridos del usuario 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.
  • No-Google-session: No hay ninguna sesión activa en los sitios web de Google.

• Indica 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 con sesión de Google

Recorrido del usuario recurrente con sesión de Google

Has-Google-session con el recorrido del usuario que regresa con selección automática

Recorrido del usuario nuevo sin sesión de Google

Recorrido del usuario recurrente sin sesión de Google

Recorridos clave del usuario de la cuenta de Family Link

Los recorridos generales del usuario clave de la sección anterior siguen siendo válidos. A continuación, se muestra el flujo adicional que se presentaría para la Cuenta de Google del menor cuando acceda.

Información adicional sobre el flujo del botón de FedCM

• Agrega el atributo allow="identity-credentials-get" al marco superior si tu app web llama a la API de Button desde elementos iframe 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 tiempo de espera y la configuración de acceso de terceros en Chrome no afectan el flujo del botón de FedCM. El estado (como se muestra en las siguientes capturas de pantalla) solo afecta la UX de One Tap.