Merge pull request #32 from uja-dev-practices/MireyaCueto-patch-2

Update OAuth setup instructions in README
This commit is contained in:
Alexis López
2026-04-22 12:14:14 +02:00
committed by GitHub
+31 -26
View File
@@ -292,37 +292,21 @@ Un ejemplo de página de donde sacar las tres primeras claves:
Para activar el login con Google, debes crear credenciales OAuth 2.0. Para activar el login con Google, debes crear credenciales OAuth 2.0.
Para ello sigue estos pasos: Para ello sigue estos pasos:
### 🟦 Paso 1 — Entra en Google Cloud Console ### 🟦 Paso 1 — Entra en Google Cloud Console y haz login
https://console.cloud.google.com https://console.cloud.google.com
### 🟩 Paso 2 — Crea un proyecto ### 🟩 Paso 2 — Crea un proyecto
Menú superior → “Seleccionar proyecto” → “Nuevo proyecto”. Menú superior → “Seleccionar proyecto” → “Nuevo proyecto” → Elige un nombre para tu proyecto.
### 🟧 Paso 3 — Configura la pantalla de consentimiento OAuth ### 🟨 Paso 3 — Crea las credenciales OAuth
En el menú lateral:
<img width="750" height="731" alt="image" src="https://github.com/user-attachments/assets/fb06952a-ddde-4a15-87f8-162b53882d00" /> **APIs y Servicios → Credenciales → Crear Credenciales → ID de Cliente OAuth**
En el buscador escribe: **OAuth consent screen** ó ve a la página que se muestra en la captura superior.
Selecciona **Información de la página**:
→ Rellena los datos necesarios (no hace falta poner un dominio si lo tienes en local) → Guardar
<img width="1398" height="470" alt="image" src="https://github.com/user-attachments/assets/d38ff3b4-5ee7-4608-ad62-515e38114392" />
### 🟨 Paso 4 — Crea las credenciales OAuth
Menú lateral:
**APIs & Services → Credentials → Create Credentials → OAuth Client ID**
<img width="1003" height="815" alt="image" src="https://github.com/user-attachments/assets/8a9e61fd-f4dc-4b33-aac3-3e793ceac8b3" /> <img width="1003" height="815" alt="image" src="https://github.com/user-attachments/assets/8a9e61fd-f4dc-4b33-aac3-3e793ceac8b3" />
<img width="1247" height="347" alt="image" src="https://github.com/user-attachments/assets/900c8236-63e5-4a2b-b642-7c901108e09e" />
Tipo de aplicación: Tipo de aplicación:
**Web application** **Aplicación Web**
Añade en `Orígenes autorizados de javascript`: Añade en `Orígenes autorizados de javascript`:
http://localhost:8000 http://localhost:8000
@@ -330,16 +314,37 @@ http://localhost:8000
Añade este Redirect URI obligatorio: Añade este Redirect URI obligatorio:
http://localhost:8000/api/auth/google/callback http://localhost:8000/api/auth/google/callback
Después te saldrá una ventana para descargarte las claves en formato json (hazlo para que no se pierdan)
Finalmente podrás ver la pantalla final (desde aquí no se puede acceder al secreto del cliente, solo puedes generar uno nuevo):
<img width="1911" height="847" alt="image" src="https://github.com/user-attachments/assets/c63454ac-00a5-43e3-9f53-25b4862292df" /> <img width="1911" height="847" alt="image" src="https://github.com/user-attachments/assets/c63454ac-00a5-43e3-9f53-25b4862292df" />
### 🟧 Paso 4 — Copia tus claves
### 🟥 Paso 5 — Copia tus claves
Google te mostrará: Google te mostrará:
- **Client ID** - **Client ID**
- **Client Secret** - **Client Secret**
Pégalos en tu `.env` dentro de `backend/`. Asegúrate de que las copias correctamente. Pégalos en tu `.env` dentro de `backend/`. Asegúrate de que las copias correctamente cada una en su lugar.
### 🟥 Paso 5 — Configura la pantalla de consentimiento OAuth
En el buscador escribe: **OAuth consent screen** o busca en el menu lateral la siguiente opción:
<img width="750" height="731" alt="image" src="https://github.com/user-attachments/assets/fb06952a-ddde-4a15-87f8-162b53882d00" />
Configura los datos de tu proyecto seleccionando **Información de la página**:
→ Rellena los datos necesarios (no hace falta poner un dominio si lo tienes en local) → Guardar
<img width="1398" height="470" alt="image" src="https://github.com/user-attachments/assets/d38ff3b4-5ee7-4608-ad62-515e38114392" />
### 🟪 Paso 6 — Publicar la app
Publica tu app accediendo a: (Este paso es muy importante para permitir acceder a cualquier correo)
<img width="777" height="440" alt="image" src="https://github.com/user-attachments/assets/b06fabc9-9b36-46dd-a071-7ce7f28b8bca" />
--- ---