Para autorizar el acceso a las APIs de Google en tu app web con la biblioteca de JavaScript de los Servicios de identidad de Google (google.accounts.oauth2), primero debes hacer lo siguiente:
- Obtén un ID de cliente de OAuth 2.0.
- Configura la pantalla de consentimiento de OAuth y los permisos.
- Carga la biblioteca cliente.
- De manera opcional, configura una política de seguridad del contenido (CSP) y una política de apertura de origen cruzado (COOP).
Obtén tu ID de cliente de la API de Google
Para habilitar la autorización de la Cuenta de Google en tu sitio web, primero debes configurar un ID de cliente de la API de Google. Completa los siguientes pasos:
- Abre la página Clientes de la consola de Google Cloud.
- Crea o selecciona un proyecto de la consola de Cloud. 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.
- Haz clic en Crear cliente 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.
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.comSi usas el modelo de código de autorización con
ux_mode: 'redirect'(o intercambias códigos de autorización en un extremo de backend), 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/oauth2callback.
Una vez que se complete la configuración, toma nota del ID de cliente que se creó.
Pasarás este valor en la propiedad client_id cuando inicialices initCodeClient() o initTokenClient(). (También se crea un secreto de cliente, que debes mantener confidencial y usar solo para las operaciones de intercambio de tokens del servidor).
Configura la pantalla de consentimiento de OAuth
Cuando tu app web solicita acceso a los datos del usuario con los permisos de OAuth 2.0, Google muestra una pantalla de consentimiento que les indica a los usuarios qué aplicación solicita acceso, qué permisos de datos se solicitan y las condiciones que se aplican.
- Abre la página de desarrollo de la marca de la sección Plataforma de Google Auth de la consola de Cloud.
- Si se te solicita, selecciona el proyecto que configuraste.
- Completa el formulario de desarrollo de la marca (nombre de la aplicación, logotipo de la aplicación, correo electrónico de asistencia, dominios autorizados, vínculo a la página principal de la aplicación y vínculo a la Política de Privacidad) y haz clic en Guardar.
- Navega a la página Acceso a los datos para configurar los permisos de la API de Google que requiere tu aplicación. Se recomienda solicitar permisos de forma incremental, en el momento en que se requiere el acceso, en lugar de hacerlo por adelantado.
- Consulta tu estado de verificación. Si tu aplicación solicita permisos sensibles o restringidos, envíala para que se verifique. Consulta los requisitos de verificación de OAuth para obtener más detalles.
Política de Seguridad del Contenido y COOP
Si tu aplicación web aplica una Política de Seguridad del Contenido (CSP), permite los siguientes orígenes de Google Identity Services:
script-src:https://accounts.google.com/gsi/clientframe-src:https://accounts.google.com/gsi/connect-src:https://accounts.google.com/gsi/
Para los flujos de autorización emergentes (initTokenClient o initCodeClient con
ux_mode: 'popup'), configura el encabezado de respuesta HTTP
Cross-Origin-Opener-Policy (COOP) como same-origin-allow-popups para que la ventana de diálogo pueda
comunicar la respuesta de autorización a tu página.
Próximos pasos
A continuación, carga la biblioteca cliente en tu página web para comenzar a inicializar tu cliente de autorización.