From 95eba6ce63a3331091495922f63a2b2d551d862d Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 12 Nov 2025 12:50:07 +0000 Subject: [PATCH] =?UTF-8?q?Fix:=20R=C3=A9solution=20des=20probl=C3=A8mes?= =?UTF-8?q?=20OAuth=20Google=20Calendar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Corrections apportées : 1. **redirect_uri_mismatch** : - Ajout de la variable APP_URL dans .env.example avec documentation - Amélioration de la fonction getOAuth2Client pour accepter une URI personnalisée - Gestion plus flexible du redirect_uri (APP_URL ou localhost par défaut) 2. **Choix du compte Google** : - Modification du prompt OAuth : 'consent' → 'select_account consent' - Force maintenant l'affichage du sélecteur de compte Google 3. **Interface utilisateur** : - Ajout d'un encadré d'avertissement visible avec l'URL de redirection exacte - Instructions claires pour la configuration dans Google Cloud Console - Indication pour configurer APP_URL si nécessaire 4. **Documentation** : - Création du fichier OAUTH_SETUP.md avec guide complet - Checklist de vérification pour le débogage - Exemples de configuration pour local et production Ces modifications permettent de résoudre l'erreur 400 redirect_uri_mismatch et d'offrir le choix du compte Google lors de la connexion. --- .env.example | 5 +++ OAUTH_SETUP.md | 95 +++++++++++++++++++++++++++++++++++++++ routes/calendar.routes.js | 13 ++++-- src/pages/Index.tsx | 16 ++++++- 4 files changed, 123 insertions(+), 6 deletions(-) create mode 100644 OAUTH_SETUP.md diff --git a/.env.example b/.env.example index 3ad68fd..170cadd 100644 --- a/.env.example +++ b/.env.example @@ -21,3 +21,8 @@ MAX_FILE_SIZE=5242880 # Limite de taux (requests par fenêtre) RATE_LIMIT_MAX=100 RATE_LIMIT_WINDOW_MS=900000 + +# URL de l'application (IMPORTANT pour Google OAuth) +# En local: http://localhost:2222 +# En production: https://votre-domaine.com (sans slash final) +APP_URL=http://localhost:2222 diff --git a/OAUTH_SETUP.md b/OAUTH_SETUP.md new file mode 100644 index 0000000..429154a --- /dev/null +++ b/OAUTH_SETUP.md @@ -0,0 +1,95 @@ +# Configuration OAuth Google Calendar + +Ce guide vous aide à résoudre les erreurs d'authentification OAuth Google. + +## Problème : Erreur 400 - redirect_uri_mismatch + +Cette erreur se produit quand l'URL de redirection configurée dans votre code ne correspond pas à celle configurée dans Google Cloud Console. + +### Solution + +#### 1. Identifier votre URL de redirection + +Votre application utilise automatiquement : +``` +{VOTRE_DOMAINE}/api/calendar/oauth-callback +``` + +Exemples : +- En local : `http://localhost:2222/api/calendar/oauth-callback` +- En production : `https://votredomaine.com/api/calendar/oauth-callback` + +#### 2. Configurer la variable d'environnement APP_URL + +Si vous utilisez un domaine personnalisé ou une URL différente de `http://localhost:2222` : + +1. Créez un fichier `.env` à la racine du projet (copiez depuis `.env.example`) : + ```bash + cp .env.example .env + ``` + +2. Modifiez la variable `APP_URL` dans le fichier `.env` : + ```env + # Pour un domaine local + APP_URL=http://localhost:2222 + + # Pour un domaine en production + APP_URL=https://votredomaine.com + + # IMPORTANT : Pas de slash "/" à la fin ! + ``` + +3. Redémarrez l'application pour que les changements prennent effet. + +#### 3. Configurer Google Cloud Console + +1. Allez sur [Google Cloud Console - Credentials](https://console.cloud.google.com/apis/credentials) + +2. Sélectionnez votre projet + +3. Cliquez sur votre "OAuth 2.0 Client ID" + +4. Dans la section **"URIs de redirection autorisées"**, ajoutez EXACTEMENT l'URL affichée dans l'interface NoteFlow (panneau Administration > Google Calendar) + +5. Cliquez sur **"Enregistrer"** + +6. **Important** : Attendez quelques minutes que Google propage les changements (peut prendre 5-10 minutes) + +#### 4. Tester la connexion + +1. Dans NoteFlow, allez dans **Administration** > **Google Calendar** + +2. Vérifiez que l'URL affichée dans l'encadré jaune correspond exactement à celle configurée dans Google Cloud Console + +3. Cliquez sur **"Se connecter avec Google"** + +4. Vous devriez maintenant voir un écran de sélection de compte Google + +## Problème : Pas de choix du compte Google + +### Solution + +Ce problème a été corrigé dans le code. L'authentification utilise maintenant `prompt: 'select_account consent'` qui force l'affichage du sélecteur de compte Google. + +Si vous ne voyez toujours pas le choix du compte : +1. Déconnectez-vous de Google Calendar dans NoteFlow +2. Effacez les cookies Google dans votre navigateur +3. Reconnectez-vous + +## Vérification rapide + +✅ Checklist : +- [ ] Fichier `.env` créé avec la bonne valeur pour `APP_URL` +- [ ] URL de redirection configurée dans Google Cloud Console (sans faute de frappe !) +- [ ] API Google Calendar activée dans Google Cloud Console +- [ ] Client ID et Client Secret enregistrés dans NoteFlow +- [ ] Application redémarrée après modification du `.env` +- [ ] Attendu 5-10 minutes après modification dans Google Cloud Console + +## Besoin d'aide ? + +Si le problème persiste : +1. Vérifiez les logs de l'application pour des messages d'erreur détaillés +2. Assurez-vous que votre navigateur accepte les cookies tiers +3. Essayez en navigation privée pour éliminer les problèmes de cache +4. Vérifiez que l'API Google Calendar est bien activée dans votre projet Google Cloud diff --git a/routes/calendar.routes.js b/routes/calendar.routes.js index c3bacdf..4956ec8 100644 --- a/routes/calendar.routes.js +++ b/routes/calendar.routes.js @@ -14,8 +14,9 @@ const SCOPES = ['https://www.googleapis.com/auth/calendar.readonly']; /** * Créer un client OAuth2 + * @param {string} [customRedirectUri] - URI de redirection personnalisée (optionnel) */ -async function getOAuth2Client() { +async function getOAuth2Client(customRedirectUri = null) { const clientId = await getOne("SELECT value FROM settings WHERE key = 'google_client_id'"); const clientSecret = await getOne("SELECT value FROM settings WHERE key = 'google_client_secret'"); @@ -23,7 +24,9 @@ async function getOAuth2Client() { throw new Error('Client ID et Client Secret non configurés'); } - const redirectUri = `${process.env.APP_URL || 'http://localhost:2222'}/api/calendar/oauth-callback`; + // Utiliser l'URI personnalisée si fournie, sinon utiliser APP_URL ou localhost + const redirectUri = customRedirectUri || + `${process.env.APP_URL || 'http://localhost:2222'}/api/calendar/oauth-callback`; return new google.auth.OAuth2( clientId.value, @@ -38,12 +41,14 @@ async function getOAuth2Client() { */ router.get('/auth-url', requireAdmin, async (req, res) => { try { - const oauth2Client = await getOAuth2Client(); + // Permettre de passer une URL de redirection personnalisée via query param + const customRedirectUri = req.query.redirect_uri; + const oauth2Client = await getOAuth2Client(customRedirectUri); const authUrl = oauth2Client.generateAuthUrl({ access_type: 'offline', scope: SCOPES, - prompt: 'consent', // Force le prompt pour obtenir refresh_token + prompt: 'select_account consent', // Force le choix du compte ET le prompt pour obtenir refresh_token state: req.user.id.toString() // Pour identifier l'utilisateur au retour }); diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx index ba62da3..7b894b7 100644 --- a/src/pages/Index.tsx +++ b/src/pages/Index.tsx @@ -1375,9 +1375,21 @@ const Index = () => { Google Cloud Console {' '}et activez l'API Google Calendar. -
- URI de redirection autorisée: {window.location.origin}/api/calendar/oauth-callback

+
+

+ ⚠️ IMPORTANT : URI de redirection autorisée +

+

+ Ajoutez cette URL exacte dans la console Google Cloud (OAuth 2.0 Client IDs → URIs de redirection autorisées) : +

+ + {window.location.origin}/api/calendar/oauth-callback + +

+ 💡 Si vous utilisez un domaine différent, créez un fichier .env avec APP_URL=https://votre-domaine.com +

+