Configuración

Antes de agregar Acceder con Google, One Tap o Acceso automático a tu sitio web, configura tu configuración de OAuth y, de manera opcional, configura la Política de Seguridad del Contenido de tu sitio.

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

Para habilitar Acceder con Google en tu sitio web, primero debes configurar el ID de cliente de la API de Google. Para ello, completa los siguientes pasos:

  1. Abre la página Credenciales de la Consola de APIs de Google.
  2. Crea o selecciona un proyecto de APIs de Google. Si ya tienes un proyecto para el botón Acceder con Google o Google One Tap, usa el proyecto existente y el ID de cliente web. Cuando se crean aplicaciones de producción, es posible que se necesiten varios proyectos. Repite los pasos restantes de esta sección para cada proyecto que administres.
  3. Haz clic en Crear credenciales > ID de cliente de OAuth y, en Tipo de aplicación, selecciona Aplicación web para crear un ID de cliente nuevo. Para usar un ID de cliente existente, selecciona uno del tipo Aplicación web.

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

  5. De manera opcional, las credenciales se pueden mostrar mediante un redireccionamiento a un extremo que alojas, en lugar de una devolución de llamada de JavaScript. Si este es el caso, agrega tus URI de redireccionamiento a URI de redireccionamiento autorizados. Los URI 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 URI de redireccionamiento. Por ejemplo, https://www.example.com/auth-receiver.

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

  1. Abre la página de la pantalla de consentimiento de OAuth de la sección API y servicios de Google Developers Console.
  2. Si se te solicita, selecciona el proyecto que acabas de crear.

  3. En la página “Pantalla de consentimiento de OAuth”, 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 la aplicación con exactitud y ser coherente con el nombre de la aplicación que los usuarios ven en otro lugar.

    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 a los usuarios y para los administradores de G Suite que evalúan el acceso a tu aplicación para sus usuarios. Los usuarios ven esta dirección de correo electrónico en la pantalla de consentimiento de Acceder con Google cuando hacen clic en el nombre de la aplicación.

    4. Alcances de 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, no necesitas agregar ningún alcance sensible. Por lo general, se recomienda solicitar permisos de forma incremental, en el momento en que se requiere el acceso, en lugar de hacerlo por adelantado. Obtén más información.

    5. 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 estar alojados en dominios autorizados. Obtén más información.

    6. 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 renuncia de responsabilidad que cumple con el GDPR de One Tap y debajo del botón "Continuar como". Debe estar alojado en un dominio autorizado.

    7. 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 que cumple con el GDPR de One Tap y debajo del botón "Continuar como". Debe estar alojado en un dominio autorizado.

    8. Vínculo de las Condiciones del Servicio para la aplicación (opcional): Se muestra en la pantalla de consentimiento de Acceder con Google y en la información de la renuncia de responsabilidad que cumple con el GDPR de One Tap y debajo del botón "Continuar como". Debe estar alojado en un dominio autorizado.

  4. Revisa el "Estado de verificación" si tu aplicación necesita verificación, y haz clic en el botón "Enviar para verificación" a fin de enviarla para su verificación. Consulta los requisitos de verificación de OAuth para obtener más detalles.

Mostrar la configuración de OAuth durante el acceso

One Tap con FedCM

Configuración de consentimiento de OAuth tal como la muestra One Tap de Chrome a través de FedCM

El dominio autorizado de nivel superior se muestra durante el consentimiento del usuario en Chrome.

One Tap sin FedCM

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

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

Figura 1. Configuración de consentimiento de OAuth que muestra One Tap en Chrome.

Política de Seguridad del Contenido

Si bien es opcional, se recomienda tener 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, 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:

  • connect-src, agrega https://accounts.google.com/gsi/ para permitir que una página cargue la URL superior para los extremos del servidor de los servicios de identidad de Google.
  • frame-src, agrega https://accounts.google.com/gsi/ para permitir la URL superior de los iframes del botón One Tap y Acceder con Google.
  • script-src, agrega https://accounts.google.com/gsi/client para permitir la URL de la biblioteca JavaScript de Google Identity Services.
  • style-src, agrega https://accounts.google.com/gsi/style para permitir la URL de las hojas de estilo de los servicios de identidad de Google.
  • Si se usa la directiva default-src, envía un resguardo si no se especifica alguna de las directivas anteriores (connect-src, frame-src, script-src o style-src), agrega https://accounts.google.com/gsi/ a fin de permitir que una página cargue la URL superior para los extremos del servidor de los servicios de identidad de Google.

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

Este encabezado de respuesta de ejemplo permite que los servicios de identidad de Google se carguen y ejecuten de forma correcta:

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 Acceder con Google y Google One Tap requieran cambios en tu Cross-Origin-Opener-Policy (COOP) para crear ventanas emergentes correctamente.

Cuando FedCM está habilitado, el navegador procesa directamente las ventanas emergentes y no es necesario realizar cambios.

Sin embargo, cuando FedCM esté inhabilitado, configura el encabezado COOP:

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

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