Configuración

Para agregar un botón de Acceder con Google o mensajes de One Tap y Acceso automático a tu sitio web, primero debes hacer lo siguiente:

  1. obtener un ID de cliente de OAuth 2.0
  2. configurar la marca y los parámetros de configuración de OAuth
  3. cargar la biblioteca cliente de Google Identity Services
  4. De manera opcional, configura la Política de Seguridad del Contenido.
  5. Actualiza la política de abridor de origen cruzado

Obtén tu ID de cliente de la API de Google

Para habilitar los Servicios de identidad de Google en tu sitio web, primero debes configurar un ID de cliente de la API de Google. Para ello, completa los siguientes pasos:

  1. Abre el de .
  2. Crea o selecciona un proyecto. Si ya tienes un proyecto para el botón de Acceder con Google o Google One Tap, usa el proyecto existente y el ID de cliente web. Cuando crees aplicaciones de producción, es posible que necesites varios proyectos. Repite los pasos restantes de esta sección para cada proyecto que administres.
  3. Haz clic en Crear cliente y, en Tipo de aplicación, selecciona Aplicación web para crear un nuevo ID de cliente. Para usar un ID de cliente existente, selecciona uno de tipo Aplicación web.

  4. Agrega el URI de tu sitio web a Orígenes autorizados de JavaScript. El URI incluye solo el esquema y el nombre de host completamente calificado. Por ejemplo, https://www.example.com

  5. De manera opcional, las credenciales se pueden devolver con un redireccionamiento a un extremo que alojes en lugar de a través de una devolución de llamada de JavaScript. Si es así, agrega tus URIs de redireccionamiento a URIs de redireccionamiento autorizados. Los URIs de redireccionamiento incluyen el esquema, el nombre de host completamente calificado y la ruta de acceso, y deben cumplir con las reglas de validación de URIs de redireccionamiento. Por ejemplo, https://www.example.com/auth-receiver.

Incluye el ID de cliente en tu app web con los campos data-client_id o client_id.

Tanto la autenticación con Acceder con Google como con One Tap incluyen una pantalla de consentimiento que les indica a los usuarios la aplicación que solicita acceso a sus datos, qué tipo de datos se les solicitan y las condiciones que se aplican.

  1. Abre de la sección Google Auth Platform de.
  2. Si se te solicita, selecciona el proyecto que acabas de crear.

  3. En , completa el formulario y haz clic en el botón "Guardar".

    1. Nombre de la aplicación: Es el nombre de la aplicación que solicita el consentimiento. El nombre debe reflejar con precisión tu aplicación y ser coherente con el nombre de la aplicación que los usuarios ven en otros lugares.

    2. Logotipo de la aplicación: Esta imagen se muestra en la pantalla de consentimiento para ayudar a los usuarios a reconocer tu app. El logotipo se muestra en la pantalla de consentimiento de Acceder con Google y en la configuración de la cuenta, pero no en el diálogo de One Tap.

    3. Correo electrónico de asistencia: Se muestra en la pantalla de consentimiento para la asistencia del usuario y a los administradores de Google Workspace que evalúan el acceso a tu aplicación para sus usuarios. Esta dirección de correo electrónico se muestra a los usuarios en la pantalla de consentimiento de Acceder con Google cuando hacen clic en el nombre de la aplicación.

    4. Dominios autorizados: Para protegerte a ti y a tus usuarios, Google solo permite que las aplicaciones que se autentican con OAuth usen dominios autorizados. Los vínculos de tus aplicaciones deben alojarse en dominios autorizados. Obtén más información.

    5. Vínculo a la página principal de la aplicación: Se muestra en la pantalla de consentimiento de Acceder con Google y en la información de la renuncia de responsabilidad conforme al RGPD de un solo toque debajo del botón "Continuar como". Debe estar alojado en un dominio autorizado.

    6. Vínculo a la Política de Privacidad de la aplicación: Se muestra en la pantalla de consentimiento de Acceder con Google y en la información de la renuncia de responsabilidad conforme al RGPD de un toque debajo del botón "Continuar como". Debe estar alojado en un dominio autorizado.

    7. Vínculo a las Condiciones del Servicio de la aplicación (opcional): Se muestra en la pantalla de consentimiento de Acceder con Google y en la información de renuncia de responsabilidad conforme al RGPD de Un toque debajo del botón "Continuar como". Debe estar alojado en un dominio autorizado.

  4. Navega a para configurar los permisos de tu app.

    1. Permisos para las APIs de Google: Los permisos permiten que tu aplicación acceda a los datos privados del usuario. Para la autenticación, el alcance predeterminado (correo electrónico, perfil, openid) es suficiente, por lo que no es necesario agregar alcances sensibles. En general, se recomienda solicitar permisos de forma incremental, en el momento en que se requiere el acceso, en lugar de hacerlo por adelantado.

  5. Verifica el "Estado de verificación". Si tu aplicación necesita verificación, haz clic en el botón "Enviar para verificación" para enviar tu aplicación a verificación. Consulta los requisitos de verificación de OAuth para obtener más detalles.

Visualización de la configuración de OAuth durante el acceso

One Tap con FedCM

Configuración de consentimiento de OAuth que muestra Chrome One Tap con FedCM

El dominio autorizado de nivel superior se muestra durante el consentimiento del usuario en Chrome. Solo usar One Tap en iframes de mismo sitio, pero de origen cruzado, es un método compatible.

One Tap sin FedCM

Configuración de consentimiento de OAuth como se muestra en One Tap

El nombre de la aplicación se muestra durante el consentimiento del usuario.

Figura 1: Parámetros de configuración del consentimiento de OAuth que se muestran en One Tap en Chrome.

Carga la biblioteca cliente

Asegúrate de cargar la biblioteca cliente de Google Identity Services en cualquier página en la que un usuario pueda acceder. Usa el siguiente fragmento de código:

<script src="https://accounts.google.com/gsi/client" async></script>

Puedes optimizar la velocidad de carga de tus páginas si cargas la secuencia de comandos con el atributo async.

Consulta las referencias de la API de HTML y JavaScript para obtener la lista de métodos y propiedades que admite la biblioteca.

Política de Seguridad del Contenido

Si bien es opcional, se recomienda una Política de Seguridad del Contenido para proteger tu app y evitar ataques de secuencias de comandos entre sitios (XSS). Para obtener más información, consulta Introducción a CSP y CSP y XSS.

Tu política de seguridad del contenido puede incluir una o más directivas, como connect-src, frame-src, script-src, style-src o default-src.

Si tu CSP incluye lo siguiente:

  • Directiva connect-src: Agrega https://accounts.google.com/gsi/ para permitir que una página cargue la URL principal de los extremos del servidor de los Servicios de identidad de Google.
  • Directiva frame-src: Agrega https://accounts.google.com/gsi/ para permitir la URL principal de los elementos iframe de One Tap y del botón de Acceder con Google.
  • Directiva script-src, agrega https://accounts.google.com/gsi/client para permitir la URL de la biblioteca de JavaScript de Google Identity Services.
  • Directiva style-src, agrega https://accounts.google.com/gsi/style para permitir la URL de las hojas de diseño de Google Identity Services.
  • La directiva default-src, si se usa, es un resguardo si no se especifica ninguna de las directivas anteriores (connect-src, frame-src, script-src o style-src). Agrega https://accounts.google.com/gsi/ para permitir que una página cargue la URL principal de los extremos del servidor de los Servicios de identidad de Google.

Evita enumerar URLs de GIS individuales cuando uses connect-src. Esto ayuda a minimizar las fallas cuando se actualiza el SIG. Por ejemplo, en lugar de agregar https://accounts.google.com/gsi/status, usa la URL principal del GIS https://accounts.google.com/gsi/.

Este encabezado de respuesta de ejemplo permite que Google Identity Services se cargue y ejecute correctamente:

Content-Security-Policy-Report-Only: script-src
https://accounts.google.com/gsi/client; frame-src
https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;

Política de abridor de origen cruzado

Es posible que el botón de Acceder con Google y One Tap de Google requieran cambios en tu Cross-Origin-Opener-Policy (COOP) para crear ventanas emergentes correctamente.

Cuando FedCM está habilitado, el navegador renderiza directamente las ventanas emergentes y no se necesitan cambios.

Sin embargo, cuando FedCM está inhabilitado, configura el encabezado COOP de la siguiente manera:

  • a same-origin y
  • incluye same-origin-allow-popups.

Si no se configura el encabezado adecuado, se interrumpe la comunicación entre las ventanas, lo que genera una ventana emergente en blanco o errores similares.