# 🚀 Quick Start - Connexion Google Calendar ## ⚡ DĂ©marrage rapide (5 minutes) ### 1ïžâƒŁ Ajouter votre email en utilisateur de test ⚠ OBLIGATOIRE Sans cette Ă©tape, vous verrez "Access blocked". **Étapes** : 1. Ouvrez https://console.cloud.google.com/ 2. SĂ©lectionnez le projet **familyplanner-474915** 3. Menu **APIs & Services** → **OAuth consent screen** 4. Section **Test users** → Cliquez **ADD USERS** 5. Tapez : `phil.heyraud@gmail.com` 6. Cliquez **SAVE** ✅ **Fait ? Passez Ă  l'Ă©tape 2** --- ### 2ïžâƒŁ VĂ©rifier que le backend tourne Le backend devrait dĂ©jĂ  ĂȘtre dĂ©marrĂ©. VĂ©rifiez dans votre terminal : ``` Server ready on port 5000 ``` ✅ **Si vous voyez ça, passez Ă  l'Ă©tape 3** ❌ **Si non**, dĂ©marrez-le : ```bash cd backend npm run dev ``` --- ### 3ïžâƒŁ DĂ©marrer le frontend Ouvrez un **nouveau terminal** : ```bash cd frontend npm run dev ``` Vous devriez voir : ``` Local: http://localhost:5174/ ``` --- ### 4ïžâƒŁ Tester la connexion Google 1. **Ouvrez** : http://localhost:5174 2. **Allez** dans **ParamĂštres** ou **Profil** 3. **Cherchez** la section **"Agendas connectĂ©s"** 4. **Cliquez** sur **"Continuer avec Google"** **Ce qui va se passer** : - 🌐 Redirection vers `accounts.google.com` - 🔐 Page de connexion Google (si pas dĂ©jĂ  connectĂ©) - ✅ Page de consentement : "Family Planner souhaite accĂ©der Ă  votre agenda" - ✅ Cliquez sur **"Autoriser"** - 🔄 Retour vers l'application - 🎉 Calendrier connectĂ© ! --- ## 🎯 Test rapide de l'URL OAuth (optionnel) Avant de tester via l'interface, vous pouvez tester l'URL OAuth directement : **Copiez cette URL dans votre navigateur** : ``` https://accounts.google.com/o/oauth2/v2/auth?client_id=645971045469-1f9kliea9lqhutjeicim377fui2kdhc8.apps.googleusercontent.com&redirect_uri=http://localhost:5000/api/calendar/oauth/callback&response_type=code&scope=https://www.googleapis.com/auth/calendar.readonly%20https://www.googleapis.com/auth/calendar.events&state=test-123&access_type=offline&prompt=consent ``` **RĂ©sultat attendu** : - ✅ Page de consentement Google - ✅ Demande d'accĂšs au calendrier **Si erreur "Access blocked"** : - ❌ Vous avez oubliĂ© d'ajouter votre email en utilisateur de test - → Retournez Ă  l'Ă©tape 1 --- ## 🔍 VĂ©rification des logs ### Backend (terminal 1) Vous devriez voir lors de la connexion : ``` POST /api/calendar/google/oauth/start 200 POST /api/calendar/oauth/complete 200 ``` ### Frontend (DevTools - F12) Console navigateur, vous devriez voir : ``` OAuth flow started Redirecting to Google... OAuth complete: success ``` --- ## ❌ ProblĂšmes courants ### "Access blocked: This app's request is invalid" **❌ Cause** : Email pas en utilisateur de test **✅ Solution** : Étape 1 ci-dessus --- ### "redirect_uri_mismatch" **❌ Cause** : URI de redirection incorrecte **✅ Solution** : VĂ©rifiez dans Google Cloud Console → Credentials URIs autorisĂ©es doivent ĂȘtre **exactement** : ``` http://localhost:5000/api/calendar/oauth/callback http://localhost:5174/calendar/oauth/callback ``` --- ### "invalid_client" **❌ Cause** : Client ID ou Secret incorrect **✅ Solution** : VĂ©rifiez `backend/.env` ```env GOOGLE_CLIENT_ID=645971045469-1f9kliea9lqhutjeicim377fui2kdhc8.apps.googleusercontent.com GOOGLE_CLIENT_SECRET=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 ``` Puis **redĂ©marrez le backend** : ```bash # ArrĂȘtez avec Ctrl+C npm run dev ``` --- ### Backend ne dĂ©marre pas **❌ Erreur** : `Cannot find module 'calendar'` **✅ Solution** : Le fichier `calendar.ts` existe bien ici : ``` family-planner/backend/src/routes/calendar.ts ``` Si absent, dites-le moi, je le recrĂ©e. --- ## 📊 État actuel de l'implĂ©mentation | FonctionnalitĂ© | Statut | |----------------|--------| | URL OAuth complĂšte | ✅ Fait | | Redirection vers Google | ✅ Fait | | Page de consentement | ✅ Fait | | Retour avec code d'autorisation | ✅ Fait | | Échange code → access token | ⏳ À faire | | Stockage sĂ©curisĂ© tokens | ⏳ À faire | | RĂ©cupĂ©ration Ă©vĂ©nements | ⏳ À faire | | Synchronisation calendrier | ⏳ À faire | --- ## 🎉 Vous avez testĂ© avec succĂšs ? **Prochaines Ă©tapes** : 1. **ImplĂ©menter l'Ă©change du code OAuth** → Voir `OAUTH_CONFIGURATION_COMPLETE.md` section 2 2. **RĂ©cupĂ©rer les Ă©vĂ©nements du calendrier** → Voir `OAUTH_CONFIGURATION_COMPLETE.md` section 4 3. **SĂ©curiser le stockage des tokens** → Voir `ANALYSE_CODE_CALENDAR.md` section SĂ©curitĂ© --- ## 📁 Documents utiles | Fichier | Pour quoi ? | |---------|-------------| | `README_OAUTH_GOOGLE.md` | RĂ©sumĂ© complet de la config | | `OAUTH_CONFIGURATION_COMPLETE.md` | DĂ©tails + prochaines Ă©tapes | | `OAUTH_SETUP.md` | Guide configuration Google/Azure | | `ANALYSE_CODE_CALENDAR.md` | Analyse sĂ©curitĂ©/qualitĂ© code | | `QUICK_START_OAUTH.md` | Ce fichier (dĂ©marrage rapide) | --- ## 🆘 Besoin d'aide ? **Testez d'abord** : 1. ✅ Backend sur http://localhost:5000 2. ✅ Frontend sur http://localhost:5174 3. ✅ URL OAuth manuellement (ci-dessus) **Si toujours bloquĂ©** : - Regardez les logs backend (terminal 1) - Ouvrez DevTools (F12) → Console (frontend) - VĂ©rifiez que votre email est bien en utilisateur de test --- **Bon courage ! 🚀**