Guía: Cloudflare Pages + Access (Google OAuth)¶
Guía paso a paso para proteger la documentación del proyecto con autenticación Google.
Paso 1 — Obtener Account ID y API Token¶
Account ID¶
- Ir a dash.cloudflare.com
- En la página principal, tu Account ID aparece en la barra lateral derecha
- Copiar el valor (32 caracteres hexadecimales)
API Token¶
- Ir a dash.cloudflare.com/profile/api-tokens
- Click en "Create Token"
- Seleccionar la plantilla "Edit Cloudflare Workers" (incluye Pages)
- O crear uno custom con permisos: Cloudflare Pages: Edit + Account: Read
- Copiar el token generado (solo se muestra una vez)
Guardar credenciales¶
Copiar .env.example → .env y rellenar los valores:
cp .env.example .env
# Editar .env con los valores obtenidos
Paso 2 — Crear proyecto en Cloudflare Pages¶
Nota: El primer deploy desde GitHub Actions creará el proyecto automáticamente. Si prefieres crearlo manualmente:
- Dashboard → Workers & Pages → Create
- Seleccionar Pages → Direct Upload (no conectar a Git)
- Nombre del proyecto:
ieo-docs - Subir cualquier archivo como placeholder
- El proyecto queda listo para recibir deploys del workflow
Paso 3 — Configurar GitHub Secrets¶
- Ir a github.com/jrx-amf/ieo-docs/settings/secrets/actions
- Click "New repository secret"
- Crear los siguientes secrets:
| Nombre | Valor |
|---|---|
CLOUDFLARE_ACCOUNT_ID |
Tu Account ID (paso 1) |
CLOUDFLARE_API_TOKEN |
Tu API Token (paso 1) |
Paso 4 — Primer deploy¶
Opción A: Hacer un push a main (el workflow se ejecuta automáticamente):
git commit --allow-empty -m "trigger: primer deploy"
git push
Opción B: Ejecutar el workflow manualmente desde GitHub → Actions → "Deploy Documentation" → "Run workflow"
Paso 5 — Configurar Cloudflare Access (Google OAuth)¶
5.1 — Habilitar Zero Trust¶
- En el dashboard de Cloudflare, ir a Zero Trust (menú lateral)
- Si es la primera vez, elegir el plan gratuito (Free, hasta 50 usuarios)
- Crear un nombre de equipo (ej:
ieo-malaga)
5.2 — Añadir Google como Identity Provider¶
- Zero Trust → Settings → Authentication → Login methods
- Click "Add new" → seleccionar Google
- Necesitas crear credenciales OAuth2 en Google Cloud Console:
- Ir a console.cloud.google.com/apis/credentials
- Crear un proyecto (o usar uno existente)
- Click "Create Credentials" → "OAuth client ID"
- Tipo: Web application
- Authorized redirect URI:
https://<tu-equipo>.cloudflareaccess.com/cdn-cgi/access/callback - Copiar Client ID y Client Secret
- Volver a Cloudflare y pegar Client ID y Client Secret
- Test para verificar que funciona
Alternativa sin Google Cloud Console: Si no quieres configurar OAuth de Google manualmente, puedes usar "One-time PIN" como método de login. Los usuarios recibirán un código por email — funciona con cualquier @gmail.com sin configuración extra.
5.3 — Crear política de acceso¶
- Zero Trust → Access → Applications
- Click "Add an application" → Self-hosted
- Configurar:
- Application name:
Documentación IEO - Session Duration: 24 hours (o lo que prefieras)
- Application domain: seleccionar el dominio de tu proyecto Pages (
ieo-docs.pages.dev) - En Policies, crear una regla:
- Policy name:
Equipo invitado - Action: Allow
- Include: Emails — añadir los correos de las personas invitadas
- Ejemplo:
persona1@gmail.com,persona2@gmail.com - Guardar
5.4 — Verificar¶
- Abrir en modo incógnito:
https://ieo-docs.pages.dev - Debería aparecer la pantalla de login de Cloudflare Access
- Seleccionar "Sign in with Google" (o recibir código por email)
- Solo los emails de la lista pueden acceder
Invitar nuevos usuarios¶
Para dar acceso a más personas:
- Zero Trust → Access → Applications → Documentación IEO
- En la política "Equipo invitado", añadir más emails
- El usuario entra con su cuenta Google (o recibe PIN por email)
Resumen de URLs¶
| Recurso | URL |
|---|---|
| Repo GitHub | https://github.com/jrx-amf/ieo-docs |
| GitHub Actions | https://github.com/jrx-amf/ieo-docs/actions |
| Documentación publicada | https://ieo-docs.pages.dev |
| Dashboard Cloudflare | https://dash.cloudflare.com |
| Zero Trust | https://one.dash.cloudflare.com |