Cómo Configurar Google OAuth 2.0 y Activar el Inicio de Sesión con Google Paso a Paso

El acceso social mediante Google OAuth 2.0 permite a tus clientes y usuarios registrarse e iniciar sesión en tu plataforma de presupuestos con un solo clic, sin necesidad de recordar contraseñas y con la máxima seguridad. En esta guía paso a paso aprenderás cómo dar de alta tu proyecto en Google Cloud Console, generar las credenciales de cliente, configurar las URIs autorizadas y activar el botón de acceso en el sistema.

1. Requisitos Previos

Antes de comenzar, asegúrate de tener a mano:

• Una cuenta de Google activa (cuenta de Gmail personal o cuenta corporativa de Google Workspace).
• Acceso con rol de Administrador en esta instalación de Presupuestos.
• La URL de tu instalación (en entorno local: http://localhost/Presupuestos; en producción: https://tudominio.com).

2. Crear un Proyecto en Google Cloud Console

Google Cloud es el portal oficial donde se gestionan los servicios y las APIs de Google:

1. Ingresa a Google Cloud Console e inicia sesión con tu cuenta de Google.
2. En la barra superior, haz clic en el selector de proyectos (al lado del logotipo de Google Cloud) y selecciona «Nuevo proyecto».
3. Asigna un nombre descriptivo al proyecto, por ejemplo Presupuestos App o el nombre comercial de tu empresa.
4. Haz clic en «Crear» y espera unos segundos hasta que el proyecto se genere. Asegúrate de tener seleccionado este nuevo proyecto en la barra superior.

3. Configurar la Pantalla de Consentimiento de OAuth

La pantalla de consentimiento es la interfaz que Google muestra al usuario solicitando confirmación para compartir su nombre y correo con tu aplicación:

1. En el menú lateral izquierdo, ve a APIs y servicios > Pantalla de consentimiento de OAuth.
2. En tipo de usuario (User Type), selecciona obligatoriamente «Externo» (esto permite que cualquier persona con una cuenta de Google pueda registrarse) y presiona «Crear».
3. Completa la información básica de la aplicación:
   • Nombre de la aplicación: Presupuestos (o el nombre de tu marca).
   • Correo de asistencia del usuario: Tu correo de soporte o administración.
   • Datos de contacto del desarrollador: Tu dirección de correo electrónico.
4. Haz clic en «Guardar y continuar».
5. En la pestaña Permisos (Scopes), no necesitas agregar permisos sensibles. Los permisos estándar openid, email y profile ya vienen incluidos de forma predeterminada. Haz clic en «Guardar y continuar» hasta volver al panel principal.

4. Crear las Credenciales OAuth 2.0 (Client ID y Client Secret)

Una vez lista la pantalla de consentimiento, creamos las llaves de conexión:

1. En el menú izquierdo, dirígete a APIs y servicios > Credenciales.
2. En la parte superior, haz clic en «+ Crear credenciales» y elige «ID de cliente de OAuth».
3. En Tipo de aplicación, selecciona obligatoriamente «Aplicación web».
4. En el campo Nombre, puedes ingresar Cliente Web Presupuestos.
5. En la sección «Orígenes autorizados de JavaScript», haz clic en + Agregar URI e ingresa el origen de tu servidor:
   • Local: http://localhost
   • Producción: https://tudominio.com
6. En la sección «URIs de redireccionamiento autorizados» (¡Muy importante!), haz clic en + Agregar URI y pega la URI exacta que te entrega el sistema:
   • Local: http://localhost/Presupuestos/auth/google/callback
   • Producción: https://tudominio.com/auth/google/callback
7. Haz clic en el botón azul «Guardar» o «Crear» al final de la página.

5. Activar las Credenciales en tu Sistema Presupuestos

Con las claves obtenidas, activarlas en tu instalación toma menos de 30 segundos:

1. Abre tu aplicación Presupuestos e inicia sesión con tu cuenta de Administrador.
2. Dirígete a la opción de menú Configuración (en la URL /local/configuration).
3. Haz clic en la pestaña «Acceso Social» (identificada con el ícono de conexiones).
4. En el bloque Google OAuth 2.0:
   • Pega tu ID de cliente en el primer casillero.
   • Pega tu Secreto de cliente en el segundo casillero.
   • Enciende el interruptor (switch) marcado como Activo.
5. Haz clic en el botón verde «Guardar configuración de acceso social» al final de la página.

6. Verificación en la Pantalla de Acceso

Para comprobar que todo funciona de forma impecable:

1. Cierra sesión o abre una ventana de incógnito en tu navegador.
2. Ve a la pantalla de acceso en /login.
3. Verás ahora el botón prominente «Continuar con Google» sobre el formulario tradicional.
4. Haz clic en él: el sistema te redirigirá a la pasarela segura de Google, seleccionarás tu cuenta y volverás al sistema con tu sesión iniciada de inmediato.

7. Solución de Problemas Frecuentes