docs: add comprehensive OAuth configuration guide and update Dockerfile

- Add detailed OAuth setup instructions for Google and Facebook in README
- Include step-by-step guides with console URLs and configuration details
- Document required environment variables for OAuth
- Add deployment instructions with Docker build args
- Update Dockerfile to accept OAuth credentials as build arguments
- Support NEXT_PUBLIC_GOOGLE_CLIENT_ID and NEXT_PUBLIC_FACEBOOK_APP_ID

This enables OAuth authentication while keeping it optional for deployments.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
soufiane 2025-11-18 03:04:40 +01:00
parent f82985f84e
commit d9d12727e1
2 changed files with 102 additions and 3 deletions

View File

@ -1,6 +1,19 @@
# Étape 1 : Build # Étape 1 : Build
FROM node:20 AS builder FROM node:20 AS builder
WORKDIR /app WORKDIR /app
# Build arguments for environment variables
ARG NEXT_PUBLIC_API_URL
ARG NEXT_PUBLIC_FRONTEND_URL
ARG NEXT_PUBLIC_GOOGLE_CLIENT_ID
ARG NEXT_PUBLIC_FACEBOOK_APP_ID
# Set environment variables for build
ENV NEXT_PUBLIC_API_URL=$NEXT_PUBLIC_API_URL
ENV NEXT_PUBLIC_FRONTEND_URL=$NEXT_PUBLIC_FRONTEND_URL
ENV NEXT_PUBLIC_GOOGLE_CLIENT_ID=$NEXT_PUBLIC_GOOGLE_CLIENT_ID
ENV NEXT_PUBLIC_FACEBOOK_APP_ID=$NEXT_PUBLIC_FACEBOOK_APP_ID
COPY package*.json ./ COPY package*.json ./
RUN npm ci RUN npm ci
COPY . . COPY . .

View File

@ -121,12 +121,18 @@ npm install
3. **Configurer les variables d'environnement** 3. **Configurer les variables d'environnement**
Créer un fichier `.env.local` : Créer un fichier `.env.local` :
```env ```env
NEXT_PUBLIC_API_URL=http://localhost:5000/api # API Configuration
NEXT_PUBLIC_API_URL=http://localhost:4000/api
NEXT_PUBLIC_FRONTEND_URL=http://localhost:3000
# NextAuth
NEXTAUTH_URL=http://localhost:3000 NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your-secret-key NEXTAUTH_SECRET=your-secret-key
GOOGLE_CLIENT_ID=your-google-client-id
# OAuth Providers (Optionnel - voir section OAuth ci-dessous)
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret GOOGLE_CLIENT_SECRET=your-google-client-secret
FACEBOOK_CLIENT_ID=your-facebook-client-id NEXT_PUBLIC_FACEBOOK_APP_ID=your-facebook-app-id
FACEBOOK_CLIENT_SECRET=your-facebook-client-secret FACEBOOK_CLIENT_SECRET=your-facebook-client-secret
``` ```
@ -137,6 +143,86 @@ npm run dev
Le site sera accessible sur **http://localhost:3000** Le site sera accessible sur **http://localhost:3000**
## 🔐 Configuration OAuth (Optionnel)
L'application supporte l'authentification via Google et Facebook OAuth. Ces fonctionnalités sont **optionnelles** - l'application fonctionne sans OAuth configuré.
### Google OAuth
1. **Créer un projet Google Cloud**
- Aller sur [Google Cloud Console](https://console.cloud.google.com/)
- Créer un nouveau projet ou sélectionner un existant
2. **Activer l'API Google+**
- APIs & Services → Library
- Rechercher "Google+ API" → Enable
3. **Créer des identifiants OAuth 2.0**
- APIs & Services → Credentials
- Create Credentials → OAuth client ID
- Type d'application: **Application Web**
4. **Configurer les origines autorisées**
- **Origines JavaScript autorisées:**
- `https://dev.dsp5-archi-o24a-15m-g3.fr` (production DEV)
- `http://localhost:3000` (développement local)
- **URI de redirection autorisés:**
- `https://dev.dsp5-archi-o24a-15m-g3.fr`
- `http://localhost:3000`
5. **Copier le Client ID** et l'ajouter à vos variables d'environnement
### Facebook OAuth
1. **Créer une application Facebook**
- Aller sur [Facebook Developers](https://developers.facebook.com/)
- Mes Apps → Créer une app → Type: **Consommateur**
2. **Configurer Facebook Login**
- Ajouter un produit → Facebook Login → Configurer
- Paramètres → Facebook Login
3. **Configurer les URI de redirection**
- **URI de redirection OAuth valides:**
- `https://dev.dsp5-archi-o24a-15m-g3.fr`
- `http://localhost:3000`
4. **Paramètres de base**
- Domaines de l'app: `dev.dsp5-archi-o24a-15m-g3.fr`
- URL de la politique de confidentialité: (requis pour mise en production)
- URL des conditions de service: (requis pour mise en production)
5. **Copier l'ID de l'app** et l'ajouter à vos variables d'environnement
6. **Rendre l'app publique**
- Mode développement: seuls les testeurs peuvent se connecter
- Mode production: tout le monde peut se connecter (nécessite validation Facebook)
### Variables d'environnement pour OAuth
```env
# Google OAuth
NEXT_PUBLIC_GOOGLE_CLIENT_ID=votre-client-id-google.apps.googleusercontent.com
# Facebook OAuth
NEXT_PUBLIC_FACEBOOK_APP_ID=votre-facebook-app-id
```
### Déploiement avec OAuth
Pour le déploiement via Jenkins, les variables d'environnement doivent être passées lors du build Docker:
```bash
docker build \
--build-arg NEXT_PUBLIC_API_URL=https://api.dev.dsp5-archi-o24a-15m-g3.fr/api \
--build-arg NEXT_PUBLIC_FRONTEND_URL=https://dev.dsp5-archi-o24a-15m-g3.fr \
--build-arg NEXT_PUBLIC_GOOGLE_CLIENT_ID=votre-client-id \
--build-arg NEXT_PUBLIC_FACEBOOK_APP_ID=votre-app-id \
-t the-tip-top-frontend .
```
**Note:** Si OAuth n'est pas configuré, les boutons de connexion Google/Facebook ne s'afficheront pas sur la page de login.
## 🔗 Routes principales ## 🔗 Routes principales
| Route | Description | Protection | | Route | Description | Protection |