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:

  2. Quita cualquier uso del valor opt_out_or_no_session que se muestra en el objeto PromptMomentNotication.

    Para mejorar la privacidad del usuario, la devolución de llamada google.accounts.id.prompt ya no muestra resultados relacionados con la configuración del usuario o el estado de la sesión.

  3. Actualiza los flujos de usuarios y el código del sitio web para controlar las notificaciones retrasadas de los eventos de isDisplayMoment().

    Para mejorar la privacidad del usuario, las notificaciones de momentos en pantalla se retrasan de manera intencional una cantidad de tiempo aleatoria cuando está habilitado FedCM. Las notificaciones se pueden recibir hasta 1 minuto después de que ocurre el evento en sí. Cuando uses isDisplayMoment para mostrar mensajes o activar la interacción del usuario de manera condicional, considera cuidadosamente la variable de duración en tu diseño de UX.

  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 las 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 se superponga parte del contenido.

    Cambia el diseño de la página para mejorar la experiencia del usuario cuando se oculte la información importante.

  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.

  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.

  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.