Libérer la puissance de Google OAuth avec Passport.js : un guide étape par étape

Salut, amis développeurs ! ? Êtes-vous prêt à améliorer votre jeu d’authentification ? Aujourd'hui, nous plongeons dans le monde de Google OAuth 2.0 et comment l'implémenter à l'aide de Passport.js. Croyez-moi, vos utilisateurs vous remercieront pour cette expérience de connexion fluide et sécurisée !

Pourquoi Google OAuth 2.0 ? ?

Avant de nous lancer, expliquons pourquoi Google OAuth 2.0 est si important :

1. Convivial : fini les maux de tête liés au « mot de passe oublié » !
2. Sécurité de Fort Knox : exploitez les protocoles de sécurité de premier ordre de Google.
3. Trust Booster : les utilisateurs se sentent plus en sécurité en utilisant leurs comptes Google.

Ça a l’air bien, non ? Commençons !

Étape 1 : Préparez-vous ! ?️

Tout d'abord, installons nos outils. Allumez votre terminal et exécutez :

npm install passport passport-google-oauth2 express-session

Ces packages sont vos nouveaux meilleurs amis pour la mise en œuvre de Google OAuth 2.0.

Étape 2 : Aventure dans la console de développement Google ?️

Il est temps de configurer votre projet dans la Google Developer Console. Voici votre carte au trésor :

1. Accédez à la console des développeurs Google.
2. Créez un nouveau projet (donnez-lui un nom sympa !).
3. Accédez à « API et services > Identifiants ».
4. Cliquez sur « Créer des informations d'identification » et choisissez « ID client OAuth 2.0 ».
5. Configurez votre écran de consentement (n'oubliez pas de sourire pour l'icône !).
6. Configurez votre ID client OAuth 2.0 (type d'application Web).
7. Ajoutez votre URI de redirection (par exemple, http://localhost:3000/auth/google/callback).

Conseil de pro : conservez votre identifiant client et votre secret client en sécurité. Ils sont comme les clés de votre royaume OAuth !

Étape 3 : Magie de configuration du passeport ✨

Maintenant, saupoudrons un peu de magie Passport.js dans notre application :

const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;

passport.use(new GoogleStrategy({
    clientID: process.env.GOOGLE_CLIENT_ID,
    clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    callbackURL: "http://localhost:3000/auth/google/callback"
  },
  function(accessToken, refreshToken, profile, done) {
    // Your user-saving logic goes here!
    User.findOrCreate({ googleId: profile.id }, function (err, user) {
      return done(err, user);
    });
  }
));

// Don't forget to serialize and deserialize your users!
passport.serializeUser((user, done) => {
  done(null, user.id);
});

passport.deserializeUser((id, done) => {
  User.findById(id, (err, user) => {
    done(err, user);
  });
});

Étape 4 : La route vers le succès ?️

Mettez en place nos autoroutes d'authentification :

const express = require('express');
const passport = require('passport');
const app = express();

app.use(passport.initialize());
app.use(passport.session());

// The gateway to Google OAuth
app.get('/auth/google',
  passport.authenticate('google', { scope: ['profile', 'email'] })
);

// Welcome back! Handle the callback
app.get('/auth/google/callback',
  passport.authenticate('google', { 
    successRedirect: '/auth/google/success', 
    failureRedirect: '/auth/google/failure' 
  })
);

// Success and failure destinations
app.get('/auth/google/success', (req, res) => { 
  res.send('Welcome aboard! ?'); 
});

app.get('/auth/google/failure', (req, res) => { 
  res.send('Oops! Something went wrong. ?'); 
});

app.listen(3000, () => {
  console.log('Server is up and running! ?');
});

Étape 5 : Heure de lancement ! ?

Configurez vos variables d'environnement (GOOGLE_CLIENT_ID et GOOGLE_CLIENT_SECRET) et vous êtes prêt à décoller !

node app.js

Accédez à http://localhost:3000/auth/google et regardez la magie opérer !

Conclusion ?

Et voilà, les amis ! Vous venez d'implémenter Google OAuth 2.0 avec Passport.js. Vos utilisateurs peuvent désormais se connecter avec leurs comptes Google et profiter d'une expérience transparente et sécurisée.

N'oubliez pas que ce n'est que le début. Dans une application de production, vous souhaiteriez ajouter plus de fonctionnalités telles que :

• Gestion appropriée des erreurs
• Stockage des données utilisateur dans une base de données
• Options d'authentification supplémentaires

Avez-vous essayé d'implémenter OAuth dans vos projets ? À quels défis avez-vous été confronté ? Laissez vos réflexions dans les commentaires ci-dessous – j’aimerais entendre parler de vos aventures au pays de l’authentification !

Bon codage, et que vos connexions soient toujours fluides ! ???‍???‍?

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!