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>
This commit is contained in:
philippe
174
docs/archive/OAUTH_SETUP.md
Normal file
174
docs/archive/OAUTH_SETUP.md
Normal file
@@ -0,0 +1,174 @@
|
||||
# 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.
|
||||
Reference in New Issue
Block a user