Migra a FedCM

Esta guía te ayuda a comprender los cambios en tu aplicación web que introduce la API de Federated Credential Management (FedCM).

Cuando se habilita FedCM, el navegador muestra mensajes para el usuario y no se usan cookies de terceros.

Descripción general

El FedCM habilita flujos de acceso más privados sin necesidad de usar cookies de terceros. El navegador controla la configuración del usuario, muestra instrucciones y solo se comunica con un proveedor de identidad, como Google, después de que el usuario otorga su consentimiento de forma explícita.

En la mayoría de los sitios web, la migración se realiza sin problemas a través de actualizaciones retrocompatibles de la biblioteca de JavaScript de Google Identity Services.

Actualizaciones sobre la función de acceso automático

La versión beta de la Administración de credenciales federadas (FedCM) para Google Identity Services se lanzó en agosto de 2023. Muchos desarrolladores probaron la API y brindaron comentarios valiosos.

Una de las respuestas que Google recibió de los desarrolladores se relaciona con el requisito de gestos del usuario para el flujo de acceso automático de FedCM. Para mejorar la privacidad, Chrome requiere que los usuarios confirmen que desean 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. Esta confirmación única se logra con un solo clic en el mensaje de One Tap para demostrar la intención del usuario de acceder. Este cambio puede provocar una interrupción inicial en los porcentajes de conversiones de acceso automático en algunos sitios web.

Recientemente, en la versión M121, Chrome realizó un cambio en la UX del flujo de acceso automático de FedCM. La nueva confirmación solo es necesaria cuando se restringen las cookies de terceros. Esto significa lo siguiente:

  1. El acceso automático de FedCM no requiere una nueva confirmación para los usuarios recurrentes. Si los usuarios vuelven a confirmar con la IU de FedCM, esta nueva confirmación se tendrá en cuenta para el requisito de gesto del usuario en la era posterior a 3PCD.

  2. El acceso automático de FedCM verificará el estado de la confirmación cuando los usuarios restrinjan manualmente las cookies de terceros hoy o de forma predeterminada en Chrome en el futuro.

Con este cambio, recomendamos que todos los desarrolladores de acceso automático migren a FedCM cuanto antes para reducir las interrupciones en los porcentajes de conversiones de acceso automático.

En el caso del flujo de acceso automático, GIS JavaScript no activará FedCM en una versión anterior de Chrome (anterior a M121), incluso si tu sitio web habilita FedCM.

Diferencias en el recorrido del usuario

Las experiencias de One Tap con y sin FedCM son similares, solo con diferencias menores.

Usuario nuevo de una sola sesión

Con FedCM, One Tap muestra el nombre de dominio de nivel superior en lugar del nombre de la aplicación.

Usa FedCM Sin FedCM
Usuario nuevo de sesión única con FedCM Usuario nuevo de sesión única sin FedCM

Usuario recurrente de una sola sesión (con el acceso automático inhabilitado)

Con FedCM, One Tap muestra el nombre de dominio de nivel superior en lugar del nombre de la aplicación.

Usa FedCM Sin FedCM
Recorrido del usuario que regresa en una sola sesión con FedCM (con el inicio de sesión automático inhabilitado) Recorrido del usuario que regresa en una sola sesión sin FedCM (con el acceso automático inhabilitado)

Usuario que regresa a la plataforma en una sola sesión (con el inicio de sesión automático habilitado)

Con FedCM, los usuarios pueden hacer clic en X para cancelar el acceso automático en un plazo de 5 segundos en lugar de hacer clic en el botón Cancelar.

Usa FedCM Sin FedCM
Recorrido del usuario que regresa en una sola sesión con FedCM (con el acceso automático habilitado) Recorrido del usuario que regresa en una sola sesión sin FedCM (con acceso automático habilitado)

Varias sesiones

Con FedCM, One Tap muestra el nombre de dominio de nivel superior en lugar del nombre de la aplicación.

Usa FedCM Sin FedCM
Usuario de varias sesiones que usa FedCM Usuario de varias sesiones sin FedCM

Antes de comenzar

Comprueba que la configuración y la versión de tu navegador admitan la API de FedCM. Te recomendamos que actualices a la versión más reciente.

  • La API de FedCM está disponible en Chrome 117 o versiones posteriores.

  • El parámetro de configuración Acceso de terceros está habilitado en Chrome.

  • Si la versión de tu navegador Chrome es 119 o anterior, abre chrome://flags y habilita la función experimental FedCmWithoutThirdPartyCookies. No es necesario realizar este paso con la versión 120 o posterior del navegador Chrome.

Migra tu app web

Sigue estos pasos para habilitar FedCM, evaluar el posible impacto de la migración y, si es necesario, realizar cambios en tu aplicación web existente:

1. Agrega una marca booleana para habilitar FedCM cuando se inicialice con lo siguiente:

2. Quita el uso de los métodos isDisplayMoment(), isDisplayed(), isNotDisplayed() y getNotDisplayedReason() en tu código.

Para mejorar la privacidad del usuario, la devolución de llamada google.accounts.id.prompt ya no muestra ninguna notificación de momento de visualización en el objeto PromptMomentNotication. Quita todo el código que dependa de los métodos relacionados con el momento de la pantalla. Son los métodos isDisplayMoment(), isDisplayed(), isNotDisplayed() y getNotDisplayedReason().

3. Quita el uso del método getSkippedReason() en tu código.

Si bien se seguiría llamando al momento de omisión, isSkippedMoment(), desde la devolución de llamada google.accounts.id.prompt en el objeto PromptMomentNotication, no se proporcionaría el motivo detallado. Quita de tu código todo el código que dependa del método getSkippedReason().

Ten en cuenta que la notificación del momento descartado, isDismissedMoment(), y el método de motivo detallado relacionado, getDismissedReason(), no cambian cuando se habilita FedCM.

4. Quita los atributos de estilo position de data-prompt_parent_id y intermediate_iframes.

El navegador controla el tamaño y la posición de las indicaciones para el usuario. No se admiten posiciones personalizadas para One Tap en computadoras.

5. Actualiza el diseño de la página si es necesario.

El navegador controla el tamaño y la posición de las instrucciones para el usuario. Según el diseño de las páginas individuales, es posible que se superponga parte del contenido, ya que las posiciones personalizadas para One Tap en computadoras de escritorio no se admiten de ninguna manera, como el atributo de estilo, data-prompt_parent_id, intermediate_iframes, el iframe personalizado y otras formas creativas.

Cambia el diseño de la página para mejorar la experiencia del usuario cuando se oculta información importante. No crees tu UX en torno al mensaje de One Tap, incluso si supones que está en la posición predeterminada. Debido a que la API de FedCM está mediada por el navegador, los diferentes proveedores de navegadores pueden colocar la posición de la instrucción de manera ligeramente diferente.

6. Agrega el atributo allow="identity-credentials-get" al marco superior si tu app web llama a la API de One Tap desde iframes de origen cruzado.

Un iframe se considera de origen cruzado si su origen no es exactamente el mismo que el origen superior. Por ejemplo:

  • Dominios diferentes: https://example1.com y https://example2.com
  • Diferentes dominios de nivel superior: https://example.uk y https://example.jp
  • Subdominios: https://example.com y https://login.example.com

Cuando se usa One Tap en un iframe de origen cruzado, es posible que los usuarios experimenten una experiencia confusa. El mensaje de One Tap muestra el nombre del dominio de nivel superior, no del iframe, como medida de seguridad para evitar el robo de credenciales. Sin embargo, los tokens de ID se emiten al origen del iframe. Revisa este problema de GitHub para obtener más detalles.

Debido a que esta discrepancia puede ser engañosa, usar solo One Tap en iframes de origen cruzado, pero en el mismo sitio, es un método compatible. Por ejemplo, una página en el dominio de nivel superior https://www.example.com que usa iframe para incorporar una página con One Tap en https://login.example.com. En el mensaje de One Tap, se mostrará "Acceder a example.com con google.com".

Todos los demás casos, como los diferentes dominios, no son compatibles. En su lugar, considera métodos de integración alternativos, como los siguientes:

  • Implementar el botón Acceder con Google
  • Implementa One Tap en el dominio de nivel superior
  • Usar los extremos de OAuth 2.0 de Google para una integración más personalizada
  • Si incorporas un sitio de terceros dentro de un iframe y no puedes modificar su implementación de One Tap, puedes evitar que aparezca el mensaje de One Tap dentro del iframe. Para ello, quita el atributo allow="identity-credentials-get" de la etiqueta de iframe en el marco superior. De esta manera, se suprimirá el mensaje y podrás dirigir a los usuarios directamente a la página de acceso del sitio incorporado.

Cuando se llama a la API de One Tap desde iframes de origen cruzado, debes agregar el atributo allow="identity-credentials-get" en cada etiqueta iframe del marco superior:

  <iframe src="https://your.cross-origin/onetap.page" allow="identity-credentials-get"></iframe>

Si tu app usa un iframe que contiene otro iframe, debes asegurarte de que el atributo se agregue a todos los iframes, incluidos todos los iframes secundarios.

Por ejemplo, considera la siguiente situación:

  • El documento superior (https://www.example.uk) contiene un iframe llamado "Iframe A", que incorpora una página (https://logins.example.com).

  • Esta página incorporada (https://logins.example.com) también contiene un iframe llamado "Iframe B", que incorpora una página (https://onetap.example2.com) que aloja One Tap.

    Para garantizar que One Tap se pueda mostrar correctamente, el atributo se debe agregar a las etiquetas de iframe A y B.

    Prepárate para las consultas sobre el mensaje de One Tap que no se muestra. Es posible que otros sitios con orígenes diferentes incorporen tus páginas que alojan One Tap dentro de sus iframes. Es posible que recibas una mayor cantidad de tickets de asistencia de los usuarios finales o de otros propietarios de sitios relacionados con el hecho de que no aparece la función One Tap. Si bien solo los propietarios del sitio pueden realizar las actualizaciones en sus páginas, puedes hacer lo siguiente para mitigar el impacto:

  • Actualiza la documentación para desarrolladores para incluir cómo configurar el iframe correctamente para llamar a tu sitio. Puedes vincular esta página en tu documentación.

  • Actualiza la página de preguntas frecuentes para desarrolladores si corresponde.

  • Informa a tu equipo de asistencia sobre este próximo cambio y prepárate para la respuesta a la consulta con anticipación.

  • Comunícate de forma proactiva con los socios, clientes o propietarios de sitios afectados para que la transición a FedCM sea fluida.

7. Agrega estas directivas a tu Política de Seguridad del Contenido (CSP).

Este paso es opcional, ya que no todos los sitios web eligen definir un CSP.

  • Si no se usa CSP en tu sitio web, no es necesario realizar cambios.

  • Si tu CSP funciona para el One Tap actual y no usas connect-src, frame-src, script-src, style-src ni default-src, no se necesitan cambios.

  • De lo contrario, sigue esta guía para configurar tu CSP. Sin la configuración correcta del CSP, no se mostraría FedCM One Tap en el sitio.

8. Quita la compatibilidad con Accelerated Mobile Pages (AMP) para el acceso.

La compatibilidad con el acceso de usuarios para AMP es una función opcional de GIS que tu app web pudo haber implementado. Si este es el caso,

Borra todas las referencias a lo siguiente:

  • Elemento personalizado amp-onetap-google 
  • <script async custom-element="amp-onetap-google" src="https://cdn.ampproject.org/v0/amp-onetap-google-0.1.js"></script>

    Considera redireccionar las solicitudes de acceso de AMP al flujo de acceso HTML de tu sitio web. Ten en cuenta que el Intermediate Iframe Support API relacionado no se ve afectado.

Prueba y verifica tu migración

Después de realizar los cambios necesarios según los pasos anteriores, puedes verificar que la migración se haya realizado correctamente.

  1. Confirma que tu navegador admite FedCM y que tienes una sesión de la cuenta de Google existente.

  2. Navega a las páginas de One Tap en tu aplicación.

  3. Confirma que se muestre el mensaje de One Tap y que se superponga de forma segura el contenido subyacente.

  4. Confirma que se devuelva una credencial correcta a tu extremo o método de devolución de llamada cuando accedas a tu aplicación con One Tap.

  5. Si el acceso automático está habilitado, verifica que la cancelación funcione y que se muestre la credencial correcta en tu extremo o método de devolución de llamada.

Período de inactividad de One Tap

Si haces clic en One Tap en la esquina superior derecha, se cerrará el mensaje y se ingresará al período de inactividad, que impedirá que se muestre temporalmente el mensaje de One Tap. En Chrome, si quieres que se vuelva a mostrar el mensaje de One Tap antes de que finalice el período de inactividad, puedes restablecer el estado de inactividad haciendo clic en el ícono de candado en la barra de direcciones y, luego, en el botón Restablecer permiso.

Período de inactividad del acceso automático

Cuando se prueba el acceso automático con un toque mediante FedCM, hay un período de inactividad de 10 minutos entre cada intento de acceso automático. No se puede restablecer el período de silencio. Deberás esperar 10 minutos o usar otra Cuenta de Google para realizar pruebas y volver a activar el acceso automático.

Recursos útiles

La herramienta de análisis de Privacy Sandbox (PSAT) es una extensión de las Herramientas para desarrolladores de Chrome que ayuda a adoptar APIs alternativas, como FedCM. Para ello, analiza tu sitio en busca de funciones afectadas y proporciona una lista de cambios recomendados.