Un guide étape par étape de Google Oauthuthentication avec JavaScript et Bun

Ce guide démontre une implémentation fondamentale JavaScript et serveur express de l'authentification utilisateur Google OAuth2. Bien que les bibliothèques simplifient le processus, cette approche pratique clarifie les concepts de base. Nous utiliserons Bun, un runtime JavaScript rapide.

---

Google OAuth2 Configuration

Avant de coder, configurez votre projet Google Cloud:

Étape 1: Créez un projet Google Cloud

1. Accédez à la console Google Cloud.
2. Créez un nouveau projet (ou utilisez un existant).

Étape 2: Configurer l'écran de consentement OAuth

1. Accédez à API & Services & GT; Écran de consentement OAuth .
2. Fournir le nom de l'application, la prise en charge de l'e-mail et d'autres détails requis.
3. (facultatif) Personnaliser la marque pour un écran de consentement plus informatif.

Étape 3: Définir les portes

1. sous Scopes , ajouter:
   • email: accéder à l'e-mail de l'utilisateur.
   • openid: Connexion OpenID pour la vérification de l'identité.
   • profile: Accédez aux données de profil de base (nom, image).

Étape 4: Générez ID du client OAuth

(Laissez quelques minutes pour le traitement.)

1. Allez à Création d'identification & gt; Créer des informations d'identification & gt; ID client OAuth .
2. Choisissez Application Web comme type d'application.
3. SET Origines JavaScript autorisées à http://localhost:3000.
4. Spécifiez un rediriger uri : http://localhost:3000. N'oubliez pas de mettre à jour ces URI pour le déploiement de la production. Google redirige les utilisateurs vers l'URI de redirection après l'authentification, y compris un code d'autorisation et un état. Pour plus de simplicité, nous utilisons la même page.

Étape 5: Ajouter des utilisateurs de test

Pour les tests, ajoutez les adresses e-mail de vos utilisateurs de test. Publiez votre application après des tests approfondis.

---

Implémentation du code Google OAuth2

Structure du projet

<code>project/
├── public/
│   └── index.html
├── src/
│   └── index.js
├── .env
└── bun.lock</code>

Nous utilisons BUN version 1.2.

index.html

Ce HTML fournit une interface simple pour la connexion Google et la manipulation de rappel OAuth. (Code omis pour la concision, mais inclus dans l'invite d'origine)

index.js (logique côté serveur)

(code omis pour la concision, mais inclus dans l'invite d'origine)

exécuter le projet

1. Installez BUN (instructions disponibles sur le site Web de Bun).
2. Créez un fichier .env avec votre GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET et GOOGLE_REDIRECT_URI.
3. Exécutez le serveur: bun run index.js
4. Testez le flux: accès http://localhost:3000, connectez-vous avec Google et vérifiez la console des jetons.

---

Conclusion

Cette implémentation manuelle fournit une solide compréhension de Google OAuth2. Alors que les bibliothèques comme Passport ou NextAuth offrent une commodité, cette approche éclaire les mécanismes d'authentification sous-jacents.

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!