Files
FamilyPlanner/docs/archive/OAUTH_SETUP.md
philippe fdd72c1135 Initial commit: Family Planner application
Complete family planning application with:
- React frontend with TypeScript
- Node.js/Express backend with TypeScript
- Python ingestion service for document processing
- Planning ingestion service with LLM integration
- Shared UI components and type definitions
- OAuth integration for calendar synchronization
- Comprehensive documentation

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-14 10:43:33 +02:00

175 lines
5.4 KiB
Markdown

# Configuration OAuth pour Google Calendar et Outlook
## ⚠️ IMPORTANT - Sécurité
**AVANT DE COMMENCER** : Révoquez immédiatement la clé OpenAI exposée dans le fichier `.env` :
1. Allez sur https://platform.openai.com/api-keys
2. Révéquez la clé commençant par `sk-proj-efaTQ8cicJYU7k8RG...`
3. Créez une nouvelle clé
4. Remplacez-la dans le fichier `.env`
## Configuration Google Calendar OAuth
### 1. Créer un projet Google Cloud
1. Allez sur [Google Cloud Console](https://console.cloud.google.com/)
2. Créez un nouveau projet ou sélectionnez un projet existant
3. Nommez-le "Family Planner" (ou autre nom)
### 2. Activer l'API Google Calendar
1. Dans le menu, allez dans **APIs & Services** > **Library**
2. Cherchez "Google Calendar API"
3. Cliquez sur **Enable**
### 3. Créer les identifiants OAuth
1. Allez dans **APIs & Services** > **Credentials**
2. Cliquez sur **Create Credentials** > **OAuth client ID**
3. Si demandé, configurez l'écran de consentement OAuth :
- Type d'application : **External**
- Nom de l'application : `Family Planner`
- Email de support : votre email
- Scopes : ajoutez `https://www.googleapis.com/auth/calendar.readonly` et `https://www.googleapis.com/auth/calendar.events`
- Domaines autorisés : `localhost`
- Sauvegardez
4. Créez l'OAuth client ID :
- Type d'application : **Web application**
- Nom : `Family Planner Web`
- URIs de redirection autorisés :
- `http://localhost:5000/api/calendar/oauth/callback`
- `http://localhost:5174/calendar/oauth/callback` (pour le frontend)
5. Cliquez sur **Create**
6. **Copiez le Client ID et le Client Secret**
### 4. Configurer le .env
Ouvrez `backend/.env` et remplacez :
```env
GOOGLE_CLIENT_ID=votre_client_id_ici
GOOGLE_CLIENT_SECRET=votre_client_secret_ici
```
---
## Configuration Microsoft Outlook OAuth
### 1. Créer une application Azure AD
1. Allez sur [Azure Portal](https://portal.azure.com/)
2. Recherchez **Azure Active Directory**
3. Allez dans **App registrations** > **New registration**
4. Nommez l'application : `Family Planner`
5. Type de compte : **Accounts in any organizational directory and personal Microsoft accounts**
6. URI de redirection :
- Type : **Web**
- URI : `http://localhost:5000/api/calendar/oauth/callback`
7. Cliquez sur **Register**
### 2. Configurer les permissions
1. Dans votre application, allez dans **API permissions**
2. Cliquez sur **Add a permission** > **Microsoft Graph**
3. Sélectionnez **Delegated permissions**
4. Ajoutez :
- `Calendars.Read`
- `Calendars.ReadWrite`
- `offline_access`
5. Cliquez sur **Add permissions**
### 3. Créer un client secret
1. Allez dans **Certificates & secrets**
2. Cliquez sur **New client secret**
3. Description : `Family Planner Secret`
4. Expiration : 24 mois (ou selon votre préférence)
5. Cliquez sur **Add**
6. **Copiez immédiatement la valeur** (vous ne pourrez plus la voir)
### 4. Récupérer le Client ID
1. Retournez à **Overview**
2. Copiez l'**Application (client) ID**
### 5. Configurer le .env
Ouvrez `backend/.env` et remplacez :
```env
OUTLOOK_CLIENT_ID=votre_application_client_id_ici
OUTLOOK_CLIENT_SECRET=votre_client_secret_ici
```
---
## Vérification de la configuration
Après avoir configuré les deux providers :
1. Redémarrez le backend :
```bash
cd backend
npm run dev
```
2. Vérifiez les logs pour vous assurer qu'il n'y a pas d'erreur
3. Testez la connexion OAuth :
- Ouvrez l'application frontend
- Allez dans les paramètres du calendrier
- Cliquez sur "Continuer avec Google" ou "Continuer avec Outlook"
- Vous devriez être redirigé vers la page de consentement OAuth
---
## Résolution des problèmes courants
### Erreur "redirect_uri_mismatch"
- Vérifiez que l'URI de redirection dans votre console Google/Azure correspond exactement à celle dans le `.env`
- N'oubliez pas le protocole `http://` et le port `:5000`
### Erreur "invalid_client"
- Vérifiez que le Client ID et le Client Secret sont corrects
- Assurez-vous qu'il n'y a pas d'espaces avant/après les valeurs dans le `.env`
### Erreur "access_denied"
- L'utilisateur a refusé les permissions
- Vérifiez que les scopes demandés sont bien configurés dans la console
### L'erreur "Required parameter is missing: response_type"
- Cette erreur est maintenant corrigée avec la nouvelle version du fichier `calendar.ts`
- L'URL OAuth contient maintenant tous les paramètres requis : `response_type=code`
---
## Mode développement (sans OAuth réel)
Si vous voulez tester sans configurer OAuth pour l'instant, vous pouvez utiliser l'endpoint de connexion par identifiants (mock) :
```bash
curl -X POST http://localhost:5000/api/calendar/google/credentials \
-H "Content-Type: application/json" \
-d '{
"profileId": "test-profile",
"email": "test@gmail.com",
"password": "fake-password",
"label": "Test Google Calendar"
}'
```
Cette méthode crée une connexion factice pour tester l'interface sans vraie authentification OAuth.
---
## Prochaines étapes
Une fois OAuth configuré, vous devrez :
1. Implémenter l'échange du code d'autorisation contre un access token
2. Stocker les tokens de manière sécurisée (chiffrement)
3. Implémenter le refresh token pour maintenir l'accès
4. Récupérer les événements du calendrier via l'API Google/Microsoft
5. Synchroniser les événements avec votre base de données
Référez-vous à l'architecture PRONOTE pour un exemple de gestion sécurisée des tokens.