Comment configurer le nouveau Google Auth dans une application React and Express

Cet article montre comment intégrer le nouveau bouton de connexion Google dans une application react.js et express.js. Le bouton mis à jour "Connectez-vous avec Google", en utilisant le SDK des services d'identité de Google, offre une expérience d'authentification rationalisée et plus sécurisée par rapport à la bibliothèque JavaScript obsolète. Cette méthode améliorée comprend des fonctionnalités telles que les aperçus de l'image de profil pour la sélection des comptes et une connexion à un robinet.

Caractéristiques de clé:

• Simplified Google Auth: Ce guide simplifie l'intégration du nouveau bouton de connexion Google dans les applications React et Express, mettant l'accent sur la facilité d'utilisation et les améliorations de la sécurité.
• Implémentation étape par étape: L'article fournit une procédure détaillée, couvrant toutes les étapes de la génération de l'ID client Google et du secret à la gestion de l'authentification sur les côtés du client et du serveur. Les extraits de code sont inclus pour plus de clarté.
• Solution complète: Le tutoriel fournit des liens vers le code source complet pour les implémentations du serveur et du client.

Configuration des informations d'identification Google:

1. Console Cloud Google: Accédez à la console Google Cloud.
2. Nouveau projet: Créer un nouveau projet (par exemple, connect-google-auth-2024).
3. Écran de consentement OAuth: Configurez l'écran de consentement OAuth, fournissant les détails de l'application (nom, e-mail, logo). N'oubliez pas de remplacer les uris d'espace réservé par votre domaine réel lors du déploiement.
4. Informations d'identification: Créer un ID Client OAuth 2.0 avec le type "Application Web". Ajouter http://localhost et http://localhost:3000 comme URI redirigeant autorisé (remplacez par votre domaine de production plus tard).
5. Télécharger les informations d'identification: Téléchargez ou copiez votre identifiant client et secret.

REACT Application Configuration:

Créer une application React à l'aide de Create React App ou Vite. Installer @react-oauth/google:

<code class="language-bash">npm install @react-oauth/google</code>

Configuration du serveur express:

Créez un dossier de serveur et installez ces packages:

<code class="language-bash">npm install express cors dotenv google-auth-library jsonwebtoken nodemon</code>

Configurez vos scripts package.json pour start et dev en utilisant nodemon. Créez un fichier .env avec votre GOOGLE_CLIENT_ID et JWT_SECRET.

Implémentation côté client (react):

Utilisez le composant @react-oauth/google de la bibliothèque GoogleLogin. Implémentez le routage à l'aide de react-router-dom. Créez des composants pour l'atterrissage, l'inscription, la connexion et les pages d'accueil. Un crochet personnalisé (useFetch) gère les appels de l'API vers le serveur express pour l'authentification.

Implémentation côté serveur (Express):

Le serveur express utilise le google-auth-library pour vérifier les jetons Google. Il comprend des routes /signup et /login pour gérer les demandes d'authentification de l'application React. JWT est utilisé pour la gestion des sessions. La gestion des erreurs est implémentée pour les jetons non valides et autres problèmes.

Remarques supplémentaires:

• L'article couvre la création d'un bouton de connexion Google personnalisé pour une meilleure marque.
• La connexion à un tour est expliquée et implémentée.
• Les mécanismes de rafraîchissement des jetons sont discutés.
• Les meilleures pratiques pour gérer les détails des utilisateurs et les erreurs de traitement sont mises en évidence.
• Une comparaison avec d'autres méthodes d'authentification est fournie.

Cette réponse révisée maintient l'ordre et le format d'image d'origine tout en améliorant considérablement la clarté et l'organisation des informations. Il condense le long texte original dans un format plus concis et lisible adapté à un article réécrit.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!