Migra a FedCM

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

Cuando FedCM está habilitado, el navegador muestra mensajes del usuario y no se usan cookies de terceros.

Descripción general

Privacy Sandbox para la Web y la eliminación de Chrome de las cookies de terceros de la Web introducen cambios significativos en los servicios de identidad de Google y en el acceso de los usuarios.

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

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.

Antes de comenzar

Verifica que el navegador y la versión del navegador sean compatibles con la API de FedCM. Si es necesario, actualiza a una versión más reciente.

Antes de probar los flujos de acceso con las cookies de terceros bloqueadas, abre chrome://flags y habilita la función experimental FedCmWithoutThirdPartyCookies. Este paso solo es necesario hasta que se convierta en el predeterminado. Además, debes habilitar la configuración de Acceso de terceros en Chrome.

Migra tu app web

Sigue estos pasos para habilitar FedCM, evaluar el impacto potencial 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:

• HTML, establece el atributo data-use_fedcm_for_prompt en true.

• JavaScript, establece use_fedcm_for_prompt en true en el objeto IdConfiguration.

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 Display Moment en el objeto PromptMomentNotication. Quita cualquier código que dependa de los métodos relacionados con el momento de 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 el momento de omisión, isSkippedMoment(), aún se llamaría desde la devolución de llamada google.accounts.id.prompt en el objeto PromptMomentNotication, no se proporcionaría un motivo detallado. Quita de tu código cualquier 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 se modifican cuando está habilitado 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 los mensajes del 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 los mensajes del usuario. Según el diseño de las páginas individuales, es posible que parte del contenido se superponga como posiciones personalizadas para One Tap en computadoras, por ejemplo, no se admite de ninguna manera, como el atributo de estilo, data-prompt_parent_id, intermediate_iframes, iframe personalizado y otras formas creativas.

Cambia el diseño de la página para mejorar la experiencia del usuario cuando se oculte información importante. No construyas 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 distintos proveedores de este navegador pueden ubicar la posición de la instrucción de forma un poco 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 llama a la API de One Tap desde iframes de origen cruzado, debes agregar el atributo allow="identity-credentials-get" en cada etiqueta iframe de los marcos superiores:

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

  Si tu app utiliza un iframe que contiene otro iframe, debes asegurarte de que el atributo se agregue a cada iframe, 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, además, 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 Iframe B.

  Nota: La API de Iframe intermedio admite iframes de origen cruzado de FedCM. No se necesita ningún atributo adicional. Sin embargo, si incorporas una página con la API de Iframe intermedio dentro de otro iframe, debes agregar el atributo allow="identity-credentials-get" a todos los iframes superiores. Habilita FedCM para probar y garantizar una configuración de política de permisos adecuada en todas las capas.

  Prepárate para las consultas que no se muestren en el mensaje de One Tap. Otros sitios con diferentes orígenes pueden incorporar tus páginas que alojan One Tap en sus iframes. Es posible que recibas una mayor cantidad de tickets de asistencia relacionados con que One Tap no aparezca de los usuarios finales ni de otros propietarios del sitio. Si bien solo los propietarios de los sitios pueden realizar las actualizaciones en sus páginas, puedes hacer lo siguiente para mitigar el impacto:

• Actualiza la documentación para desarrolladores a fin de incluir cómo configurar el iframe de forma correcta para llamar a tu sitio. Puedes incluir un vínculo a esta página en tu documentación.

• Si corresponde, actualiza la página de Preguntas frecuentes para desarrolladores.

• Informa a tu equipo de asistencia al cliente 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 realizar una transición fluida a FedCM.

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 una CSP. * Si no usas CSP en tu sitio web, no es necesario que realices ningún cambio. * Si tu CSP funciona para el One Tap actual y no usas connect-src, frame-src, script-src, style-src ni default-src, no es necesario que realices ningún cambio. * De lo contrario, sigue esta guía para configurar tu CSP. Sin la configuración adecuada de CSP, no se mostrará One Tap de FedCM en el sitio.

8. Se quitará la compatibilidad con Accelerated Mobile Pages (AMP) para el acceso.

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

Borra cualquier referencia a lo siguiente:

• elemento personalizado amp-onetap-google y

• <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 con HTML de tu sitio web. Ten en cuenta que el elemento Intermediate Iframe Support API relacionado no se verá afectado.