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 FedCM está habilitado, el navegador muestra las solicitudes del usuario y no se usan cookies de terceros.

Descripción general

FedCM permite 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.

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

Actualizaciones sobre la función de acceso automático

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

Una respuesta que Google escuchó a los desarrolladores es sobre el requisito de gestos del usuario del 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 para algunos sitios web.

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

  1. El acceso automático de FedCM no requiere que los usuarios recurrentes vuelvan a confirmar su identidad. Si los usuarios vuelven a confirmar con la IU de FedCM, esa reconfirmación se considerará en el requisito de gestos del usuario para la era posterior a la política de 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 de Chrome más antigua (anterior a M121), incluso si tu sitio web elige habilitar FedCM.

Diferencias en el recorrido del usuario

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

Usuario nuevo con una sola sesión

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

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

Usuario que regresa a la plataforma después de una sola sesión (con el acceso automático inhabilitado)

Con FedCM, One Tap muestra el nombre de dominio 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 sesión única (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 inicio de sesión 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 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 durante la inicialización usando 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 cualquier código que dependa de los métodos relacionados con el momento de la visualización. 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 de momento descartada, isDismissedMoment(), y el método de motivo detallado relacionado, getDismissedReason(), no se modifican cuando FedCM está habilitado.

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 los mensajes de los usuarios. No se admiten posiciones personalizadas para One Tap en computadoras de escritorio.

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 oculte la 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

    Para mejorar la privacidad del usuario, cuando se llame 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 subiframes.

    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 Iframe A y B.

    Prepárate para las consultas sobre el mensaje de One Tap que no se muestra. Otros sitios con orígenes diferentes pueden incorporar tus páginas que alojan One Tap en 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. Se quitó 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 admita FedCM y que tienes una sesión de 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 muestre la 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 muestren las credenciales correctas a 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. El período de inactividad no se puede restablecer. 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 Chrome DevTools para ayudar con la adopción de APIs alternativas, como FedCM. Para ello, analiza tu sitio en busca de funciones afectadas y proporciona una lista de cambios recomendados.