Acceso con Google con las APIs de FedCM

En esta guía, se analiza el impacto que tiene la baja de las cookies de terceros en el entorno Biblioteca de la plataforma de acceso Entre los temas, se incluyen el Cronograma y Próximos pasos para obtener una actualización retrocompatible de la biblioteca; cómo Realiza una evaluación de impacto y verifica que el acceso de los usuarios siga funcionen como se espera y, si es necesario, instrucciones para actualizar tu aplicación web. Opciones para administrar el período de transición y para Obtener ayuda también se abordan.

Estado de la biblioteca

Las aplicaciones web nuevas se bloquean y no pueden usar la plataforma obsoleta de Acceso con Google. mientras que las apps que la usan pueden continuar hasta nuevo aviso. R No se estableció la fecha de desactivación final (apagado) de la biblioteca. Consulta Baja de la asistencia y retiro para obtener más información.

El bloqueo de cookies de terceros de Privacy Sandbox de Chrome afecta a las aplicaciones web que usan la biblioteca de la plataforma de Acceso con Google. Para preservar el comportamiento existente, sin requerir el uso de cookies de terceros, una actualización retrocompatible se agregan las APIs de FedCM a esta biblioteca. Si bien la mayoría de los cambios no presentan inconvenientes, La actualización presenta diferencias en los mensajes de consentimiento del usuario, iframe permissions-policy y Política de Seguridad del Contenido (CSP). Estos cambios puede afectar su aplicación web y requerir cambios en el código y el sitio de la aplicación configuración.

Durante el período de transición, una opción de configuración controla si Las APIs de FedCM se usan durante el acceso del usuario.

Cronograma

Última actualización: Julio de 2024

Estos son las fechas y los cambios que afectan el comportamiento de acceso de los usuarios:

  • Marzo de 2023 Baja de la compatibilidad con la plataforma de Acceso con Google biblioteca.
  • Enero de 2024 Chrome bloquea el 1% de las cookies de terceros, el Acceso con Google de la biblioteca de la plataforma se le otorga una excepción temporal de la cookie de terceros el bloqueo mediante una prueba de baja.
  • Comienza el período de transición de julio de 2024 y comienza la biblioteca de la plataforma de Acceso con Google también se agregó compatibilidad con las APIs de FedCM. De forma predeterminada, Google controla el porcentaje de las solicitudes de acceso de los usuarios a través de FedCM durante este período. Las apps web pueden Anula de forma explícita este comportamiento con el parámetro use_fedcm.
  • Adopción obligatoria (fecha por determinar) de las APIs de FedCM por parte de Google Biblioteca de la plataforma de acceso, después de la cual se ignora el parámetro use_fedcm y todas las solicitudes de acceso de los usuarios usan FedCM.

Después de pasar a las APIs de FedCM, la biblioteca de la plataforma de Acceso con Google ya no se por el bloqueo de cookies de terceros. Actualizaciones sobre cookies de terceros consulta el cronograma de Privacy Sandbox de Chrome.

Próximos pasos

Existen tres opciones que puedes seguir:

  1. Realiza una evaluación del impacto y, si es necesario, actualiza tu aplicación web. Este enfoque evalúa si las funciones que requieren cambios en tu app web en uso. Las instrucciones se proporcionan en la siguiente sección de esta guía.
  2. Transfiere a la biblioteca de Google Identity Services (GIS). Avancemos a las últimas funciones la biblioteca de acceso admitida. Para ello, sigue estos pasos: estas instrucciones.
  3. No hacer nada. Tu aplicación web se actualizará automáticamente cuando La biblioteca de Acceso con Google se traslada a las APIs de FedCM para el acceso de los usuarios. Este es el menos trabajo, pero existe el riesgo de que los usuarios no puedan acceder a tu aplicación web.

Realizar una evaluación del impacto

Sigue estas instrucciones para determinar si tu app web se puede actualizar sin problemas a través de una actualización retrocompatible o si los cambios son necesarios para evitar que los usuarios no puedan acceder cuando la biblioteca de la plataforma de Acceso con Google esté completamente adopta las APIs de FedCM.

Configuración

Las APIs del navegador y la versión más reciente de la biblioteca de la plataforma de Acceso con Google están necesario para usar FedCM durante el acceso del usuario.

Antes de continuar:

  • Actualiza a la versión más reciente de Chrome para computadoras. Chrome para Android requiere la versión M128 o posterior y no se puede probar con versiones anteriores.

  • Abre chrome://flags y establece los siguientes atributos con estos valores:

    • #fedcm-authz: habilitado si tu sitio usa una Política de Seguridad del Contenido que bloquea a https://accounts.google.com/gsi/ottoken.
    • #tracking-protection-3pcd habilitado
    • #third-party-cookie-deprecation-trial Inhabilitada
    • #tpcd-metadata-grants Inhabilitado
    • #tpcd-heuristics-grants Inhabilitado

    y reinicia Chrome.

  • Establece use_fedcm en true cuando inicialices la plataforma de Acceso con Google biblioteca en tu aplicación web. Por lo general, la inicialización se ve así:

    • gapi.client.init({use_fedcm: true}) o
    • gapi.auth2.init({use_fedcm: true}) o
    • gapi.auth2.authorize({use_fedcm: true}).

  • Invalidar versiones almacenadas en caché de la biblioteca de la plataforma de Acceso con Google. Por lo general, este paso no es necesario, ya que se actualiza la versión más reciente de la biblioteca. descargados directamente en el navegador incluyendo api.js, client.js o platform.js en una etiqueta <script src> (la solicitud puede usar cualquiera de estas nombres de paquetes para la biblioteca).

  • Confirma la configuración de OAuth para tu ID de cliente de OAuth:

    1. Abrir la página Credenciales de Google API Console

    2. Verifica que el URI de tu sitio web esté incluido en Orígenes autorizados de JavaScript. El URI incluye el esquema y solo el nombre de host completamente calificado. Por ejemplo, https://www.example.com

    3. De manera opcional, las credenciales se pueden mostrar con un redireccionamiento a un extremo que alojas, en lugar de hacerlo a través de una devolución de llamada de JavaScript. Si este es el caso, Verifica que tus URI de redireccionamiento se incluyan en URI de redireccionamiento autorizados. Los URI de redireccionamiento incluyen el esquema, el nombre de host completamente calificado y la ruta de acceso y debe cumplir con las reglas de validación de URI de redireccionamiento. Por ejemplo, https://www.example.com/auth-receiver.

Prueba

Después de seguir las instrucciones de la configuración, sigue estos pasos:

Ubica la solicitud a la biblioteca de Acceso con Google

Verifica si los cambios en permissions-policy y en la Política de Seguridad del Contenido necesario inspeccionando la solicitud de la biblioteca de la plataforma de Acceso con Google. Para ello, localiza la solicitud con el nombre y el origen de la biblioteca:

  • En Chrome, abre el panel Red de Herramientas para desarrolladores y vuelve a cargar la página.
  • Usa los valores en las columnas Domain y Name para ubicar la biblioteca. solicitud:
    • El dominio es apis.google.com y
    • El nombre es api.js, client.js o platform.js. El objetivo específico El valor de Name depende del paquete de bibliotecas solicitado por el documento.

Por ejemplo, filtra por apis.google.com en la columna Dominio y platform.js en la columna Name.

Verifica la política de permisos de iframe

Es posible que tu sitio use la biblioteca de la plataforma de Acceso con Google dentro de un origen cruzado iframe. Si es así, se requiere una actualización.

Después de seguir la solicitud para ubicar la biblioteca de Acceso con Google, selecciona la solicitud de la biblioteca de Acceso con Google en Herramientas para desarrolladores Red y busca el encabezado Sec-Fetch-Site en la Sección Encabezados de la solicitud en la pestaña Encabezados. Si el valor del encabezado es:

  • same-siteo same-origin, entonces no se aplicarán las políticas de origen cruzado y no se aplicarán se necesitan cambios.
  • Si se utiliza un iframe, es posible que se necesiten cambios de cross-origin.

Para confirmar si hay un iframe presente, sigue estos pasos:

  • Selecciona el panel Elements en las Herramientas para desarrolladores de Chrome.
  • Usa Ctrl-F para buscar un iframe en el documento.

Si se encuentra un iframe, inspecciona el documento para comprobar si hay llamadas a gapi.auth2. directivas o script src que carguen la biblioteca de Acceso con Google dentro del iframe. Si este es el caso, haz lo siguiente:

Repite este proceso para cada iframe del documento. Los iframes se pueden anidar, asegúrate de agregar la directiva allow a todos los iframes superiores circundantes.

Revisa la Política de Seguridad del Contenido

Si tu sitio usa una Política de Seguridad del Contenido, es posible que debas actualizar tu CSP para permitir el uso de la biblioteca de Acceso con Google.

Después de seguir la solicitud para ubicar la biblioteca de Acceso con Google, selecciona la solicitud de la biblioteca de Acceso con Google en Herramientas para desarrolladores Red y busca el encabezado Content-Security-Policy en la Sección Encabezados de respuesta de la pestaña Encabezados.

Si no se encuentra el encabezado, no es necesario realizar ningún cambio. De lo contrario, comprueba si Estas directivas de la CSP se definen en el encabezado de la CSP y las actualizan de la siguiente manera:

  • Agregando https://apis.google.com/js/, https://accounts.google.com/gsi/, y https://acounts.google.com/o/fedcm/ a cualquier connect-src, default-src o frame-src.

  • Agregando a https://apis.google.com/js/bundle-name.js a script-src directiva. Reemplaza bundle-name.js por api.js, client.js o platform.js basado en el paquete de biblioteca que solicita el documento.

Verifica si hay cambios en el mensaje del usuario

Hay algunas diferencias en el comportamiento de las instrucciones del usuario, FedCM agrega un diálogo modal. que muestra el navegador y actualiza los requisitos de activación del usuario.

Imagen del diálogo modal de FedCM

Revisa el diseño de tu sitio para confirmar que se pueda superponerse de manera segura y oscurecer temporalmente el cuadro de diálogo modal del navegador Si esta pero este no es el caso, es posible que debas ajustar el diseño o la posición de algunos elementos. de tu sitio web.

Activación de usuarios

La FedCM incluye requisitos actualizados para la activación del usuario. Presionar un botón o hacer clic en un vínculo son ejemplos de gestos del usuario que permiten que terceros para hacer solicitudes de red o almacenar datos. Con FedCM, el navegador solicita el consentimiento del usuario en los siguientes casos:

  • un usuario accede primero a una aplicación web con una nueva instancia del navegador
  • Se llama a GoogleAuth.signIn.

Actualmente, si el usuario ya accedió a su sitio web, puede obtener la información de acceso del usuario cuando se inicializa la biblioteca de Acceso con Google mediante gapi.auth2.init, sin más interacciones del usuario.

Debido a la baja de las cookies de terceros, esto ya no es posible, a menos que usuario haya completado el flujo de acceso de FedCM al menos una vez.

Si habilitas FedCM y llamas a GoogleAuth.signIn, la próxima vez usuario visita tu sitio web, gapi.auth2.init puede obtener la información de acceso información importante durante la inicialización sin la interacción del usuario.

Casos de uso habituales

La documentación para desarrolladores sobre la biblioteca de Acceso con Google incluye guías y código de muestra para casos de uso comunes. En esta sección, se analiza cómo la FedCM afecta su el comportamiento de los usuarios.

  • Integra el Acceso con Google en tu aplicación web

    En esta demo, un elemento <div> y una clase renderizan el botón. para los usuarios que ya accedieron, el evento onload de la página devuelve credenciales. Se requiere la interacción del usuario para acceder y establecer una nueva sesión.

    La clase g-signin2 que llama a la inicialización de la biblioteca gapi.load y gapi.auth2.init.

    Un gesto del usuario, un evento onclick de elemento <div>, llama a auth2.signIn. durante el acceso o auth2.signOut al salir.

  • Crea un botón personalizado de Acceso con Google

    En la demostración uno, se usan atributos personalizados para controlar el aspecto de el botón de acceso y, para los usuarios que ya accedieron, el evento de la página onload devuelve credenciales de usuarios. Se requiere la interacción del usuario para acceder y establecer una nueva sesión.

    La inicialización de la biblioteca se realiza a través de un evento onload para el La biblioteca platform.js y gapi.signin2.render muestra el botón.

    Un gesto del usuario, cuando presiona el botón de acceso, llama a auth2.signIn.

    En la demostración dos, se muestran un elemento <div>, estilos CSS y un gráfico personalizado que se usa para controlar la apariencia del botón de acceso. La interacción del usuario es para acceder y establecer una nueva sesión.

    La inicialización de la biblioteca se realiza cuando se carga el documento mediante una función de inicio. que llama a gapi.load, gapi.auth2.init y gapi.auth2.attachClickHandler

    Un gesto del usuario, un evento onclick de elemento <div>, llama a auth2.signIn. usando auth2.attachClickHandler durante el acceso o auth2.signOut en salir.

  • Supervisa el estado de la sesión del usuario

    En esta demo, se usa presionar un botón para que los usuarios accedan y salgan. Se requiere la interacción del usuario para acceder y establecer una nueva sesión.

    La inicialización de la biblioteca se realiza llamando directamente a gapi.load. gapi.auth2.init y gapi.auth2.attachClickHandler() después platform.js se carga con script src.

    Un gesto del usuario, un evento onclick de elemento <div>, llama a auth2.signIn. usando auth2.attachClickHandler durante el acceso o auth2.signOut en salir.

  • Cómo solicitar permisos adicionales

    En esta demo, se usa un botón para solicitar OAuth 2.0 adicional. permisos, obtener un nuevo token de acceso y, para los usuarios que ya accedieron, el El evento de la página onload muestra las credenciales del usuario. La interacción del usuario es obligatoria para acceder y establecer una nueva sesión.

    La inicialización de la biblioteca se realiza con el evento onload del platform.js mediante una llamada a gapi.signin2.render

    Un gesto del usuario, cuando hace clic en un elemento <button>, activa una solicitud de permisos adicionales de OAuth 2.0 con googleUser.grant o auth2.signOut al salir.

  • Integra el Acceso con Google mediante objetos de escucha

    En esta demo, para los usuarios que ya accedieron, el evento onload de la página devuelve credenciales de usuarios. Se requiere la interacción del usuario para acceder y establecer una nueva sesión.

    La inicialización de la biblioteca se realiza cuando se carga el documento mediante una función de inicio. que llama a gapi.load, gapi.auth2.init y gapi.auth2.attachClickHandler Luego, auth2.isSignedIn.listen y auth2.currentUser.listen se usan para configurar la notificación de cambios en estado de la sesión. Por último, se llama a auth2.SignIn para devolver las credenciales de de usuarios que accedieron a su cuenta.

    Un gesto del usuario, un evento onclick de elemento <div>, llama a auth2.signIn. usando auth2.attachClickHandler durante el acceso o auth2.signOut en salir.

  • Acceso con Google para apps del servidor

    En esta demo, se usa un gesto del usuario para solicitar un código de autorización de OAuth 2.0. y una devolución de llamada JS hace una llamada AJAX para enviar la respuesta al backend para la verificación.

    La inicialización de la biblioteca se realiza mediante un evento onload para platform.js que usa una función start para llamar a gapi.load y gapi.auth2.init

    Un gesto del usuario, cuando hace clic en un elemento <button>, activa una solicitud de un código de autorización llamando a auth2.grantOfflineAccess.

  • SSO multiplataforma

    La FedCM requiere el consentimiento para cada instancia de navegador, incluso si los usuarios de Android ya accedió a su cuenta, debe obtener un consentimiento por única vez.

Administra el período de transición

Durante el período de transición, un porcentaje de los accesos de los usuarios puede utilizar FedCM, el el porcentaje exacto puede variar y cambiar con el tiempo. De forma predeterminada, Google controla cuántas solicitudes de acceso usan FedCM, pero puede habilitar o inhabilitar con FedCM durante el período de transición. Al final del período de transición FedCM es obligatorio y se usa para todas las solicitudes de acceso.

Si se habilita esta opción, se envía al usuario a través del flujo de acceso de FedCM, mientras que para inhabilitarlo, envía a los usuarios a través del flujo de acceso existente. Este comportamiento es se puede controlar con el parámetro use_fedcm.

Habilitar

Puede ser útil controlar si todos o algunos intentos de acceso a tu FedCM usa las APIs de FedCM. Para ello, establece use_fedcm en true durante la inicialización la biblioteca de la plataforma. En este caso, la solicitud de acceso del usuario utiliza las APIs de FedCM.

Inhabilitación

Durante el período de transición, un porcentaje de intentos de acceso del usuario a tu sitio usarán las APIs de FedCM de forma predeterminada. Si necesita más tiempo para realizar cambios en su puedes inhabilitar temporalmente tu uso de las APIs de FedCM. Para hacerlo, configura use_fedcm por false cuando se inicializa la biblioteca de la plataforma El acceso del usuario no usará las APIs de FedCM en este caso.

Después de la adopción obligatoria, el equipo ignora los parámetros de configuración de use_fedcm. Biblioteca de la plataforma de Acceso con Google.

Obtener ayuda

Busca o haz preguntas en StackOverflow con la etiqueta google-signin.