Système d'authentification OAuth - Dans les coulisses

La mise en œuvre du système d'authentification OAuth dans notre application et la compréhension du flux de travail technique de la méthode OAuth sont assez difficiles.

Dans cet article, découvrons le flux de travail opérationnel d'OAuth en termes d'anglais simple ainsi que son implémentation dans le framework Express.js. Ici, nous allons utiliser Google OAuth pour la démonstration.

Lorsque l'utilisateur (du client) envoie la demande de connexion avec Google au serveur API, il transmet la demande à Google. L'invite google pour l'autorisation de l'utilisateur dans une fenêtre séparée. Une fois que l'utilisateur a accordé l'autorisation, Google répond au serveur avec le jeton d'accès.
Lorsque le serveur obtient le jeton d'accès, il ne connecte généralement pas l'utilisateur immédiatement à l'application. Il envoie à nouveau une demande à Google pour obtenir les coordonnées de l'utilisateur avec le code d'accès. En voyant le code d'accès, Google fournit au serveur le profil d'utilisateur demandé. Maintenant, le serveur stocke les détails de cet utilisateur dans la base de données, puis permet à l'utilisateur de se connecter à l'application avec un jeton de session. Il s'agit du flux de haut niveau de base d'OAuth. Commençons maintenant à l'implémenter dans l'application Node.js en utilisant le framework Express.js.

Cet article suppose que vous avez une connaissance de base de Node.js et d'Express.

Le code source complet peut être trouvé ici .

Créez l'application node.js en effectuant npm init dans la fenêtre du terminal et ajoutez le code suivant dans le fichier index.js du répertoire racine.

/* index.js */
const express = require('express');
const app = express();
const PORT = process.env.PORT || 5000
app.listen(PORT);

Veuillez suivre les instructions d' ici pour configurer le projet dans la console google.

Après avoir terminé la configuration de notre projet dans la console google, créez un fichier keys.js pour stocker notre identifiant client google et notre secret client.

/* ./config/keys.js */
module.exports = {
    googleClientID: 'your-client-id1234.apps.googleusercontent.com',
    googleClientSecret: 'your-secret-key'
}

Installez Passport.js dans notre application. Pour en savoir plus, consultez la documentation .

$ npm install passport

Ici, nous allons utiliser la stratégie passeport-google-oauth . Installez le passeport-google-oauth20 dans notre application.

$ npm install passport-google-oauth20

      

À ce stade, vous vous demandez peut-être pourquoi devrais-je faire ces trucs Passport et tout. Mais croyez-moi, cela va être très utile pour réduire beaucoup de nos efforts.

Comme la fonctionnalité de passeport est une sorte de service, créez un fichier passeport.js dans le répertoire ./services et ajoutez le code suivant.

/* ./services/passport.js */
const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;
const keys = require('./../config/keys');
passport.use(
    new GoogleStrategy({
        clientID: keys.googleClientID,
        clientSecret: keys.googleClientSecret,
        callbackURL: '/auth/google/callback'
    },
        (accessToken, refreshToken, profile, done) => {
            console.log(profile.id);
        })
);

Créez maintenant le fichier authRoutes.js dans le répertoire ./routes et ajoutez ce qui suit.

/* ./routes/authRoutes.js */
const passport = require('passport');
module.exports = (app) => {
    app.get('/auth/google',
        passport.authenticate('google', { scope: ['profile', 'email'] }));
   app.get(
        '/auth/google/callback',
        passport.authenticate('google'),
        (req, res) => {
            res.redirect('/')
        }
    );
}

Mettez maintenant à jour le fichier index.js comme ci-dessous pour exécuter le fichier passeport.js et le fichier authRoutes.js pendant le démarrage de l'application.

/* index.js */
const express = require('express');
const passport  = require('passport');
const keys = require('./config/keys');
require('./services/passport');
const authRoutes = require('./routes/authRoutes');
const app = express();
authRoutes(app);
const PORT = process.env.PORT || 5000
app.listen(PORT);

Jeton de session

nous sommes à mi-chemin. Entrons maintenant dans la partie jeton de session. Un autre aspect important de l'authentification.

Une fois que Passport GoogleStrategy a obtenu la réponse de l'API google OAuth, nous pouvons implémenter la procédure (logique) pour stocker le profil utilisateur dans la base de données et commencer à procéder avec le jeton de session.

Mettez à jour le fichier passport.js comme ci-dessous pour travailler avec la base de données (vérifiez avec le profil de l'utilisateur)

/* ./services/passport.js */
const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;
const keys = require('./../config/keys');
passport.use(
    new GoogleStrategy({
        clientID: keys.googleClientID,
        clientSecret: keys.googleClientSecret,
        callbackURL: '/auth/google/callback'
    },
        (accessToken, refreshToken, profile, done) => {
            console.log(profile.id);
            // Write logic here to find the user profile with id in    //the database
           // Once done, the DB will return the response
   
   let existingUser = "some_id_123" // Assume this variable value //was return by database by finding existing record
            if(existingUser) {
                done(null, existingUser)
            }
            else {
   // Write logic here to create the record for the user with the ID
   // Once done, the DB will return the response
   
   let newUser = "new_id_456" // Assume this variable value was     //return by database after creating new record
            done(null, newUser)
            }
        })
);

Ajoutez maintenant les méthodes serializeUser et deserializeUser comme ci-dessous.

/* ./services/passport.js */
const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;
const keys = require('./../config/keys');
passport.serializeUser((userID, done) => {
    done(null, userID)
});
passport.deserializeUser((userID, done) => {
    // perform logic here to verify the userID with the database
// Once verifyed call done(),so that the request pass to route  //handler
    done(null, userID)
});
passport.use(
    new GoogleStrategy({
        clientID: keys.googleClientID,
        clientSecret: keys.googleClientSecret,
        callbackURL: '/auth/google/callback'
    },
        (accessToken, refreshToken, profile, done) => {
            console.log(profile.id);
            // Write logic here to find the user profile with id in //the database
   // Once done, the DB will return the response
   
   let existingUser = "some_id_123" // Assume this variable value //was return by database by finding existing record
            if(existingUser) {
                done(null, existingUser)
            }
            else {
   // Write logic here to create the record for the user with the ID
   // Once done, the DB will return the response
   
   let newUser = "new_id_456" // Assume this variable value was //return by database after creating new record
            done(null, newUser)
            }
        })
);

Non, installons encore un module cookie-session pour créer un cookie qui fonctionnera avec le jeton de session.

$ npm install cookie-session

Maintenant, mettez à jour le fichier index.js comme ci-dessous pour ajouter un middleware de session de cookie et un middleware de passeport pour gérer la session.

/* index.js */
const express = require('express');
const cookieSession = require('cookie-session');
const passport  = require('passport');
const keys = require('./config/keys');
require('./services/passport');
const authRoutes = require('./routes/authRoutes');
const app = express();
app.use(
    cookieSession({
        maxAge: 30 * 24 * 60 * 60 * 1000,
        keys: [keys.cookieKey]
    })
);
app.use(passport.initialize());
app.use(passport.session());
authRoutes(app);
const PORT = process.env.PORT || 5000
app.listen(PORT);

module.exports = {
    googleClientID: 'your-client-id123456789.apps.googleusercontent.com',
    googleClientSecret: 'your-secret-key',
    cookieKey: 'mckdjcnhljinuyvrhbelbvcnaljskbvnskvnr'
}

      

Au fur et à mesure que le middleware cookieSession déchiffre le jeton de cookie, il sera ensuite envoyé à deserializeUser où nous pouvons exécuter notre propre logique pour travailler avec l'ID utilisateur comme nous pouvons vérifier l'ID utilisateur avec la base de données, puis la demande transmise au gestionnaire de route .

Pour vérifier cela, ajoutez les routes suivantes dans le fichier authRoutes.js .

/* ./routes/authRoutes.js */
const passport = require('passport');
module.exports = (app) => {
    app.get('/auth/google',
        passport.authenticate('google', { scope: ['profile', 'email'] }));
app.get(
        '/auth/google/callback',
        passport.authenticate('google'),
        (req, res) => {
            res.redirect('/')
        }
    );
 
    app.get('/api/logout', (req, res) => {
        req.logout();
res.send(req.user);
    });
app.get('/api/current_user', (req, res) => {
        if (req.user) {
            res.send({ here_is_user_profile: user })
        }
        else {
            res.send('Please login by this URL: 
                    http://localhost:5000/auth/google')
        }
    });
}

Conclusion

OAuth est le système d'authentification moderne qui permet à l'utilisateur de s'inscrire/se connecter facilement car il n'a pas besoin de se souvenir du nom d'utilisateur et du mot de passe pour autant d'applications. Le principe de fonctionnement et la mise en œuvre dont nous avons discuté ci-dessus peuvent être applicables à d'autres API OAuth ainsi que Facebook, Twitter, GitHub, etc. Essayez-le. Bonne chance avec le système OAuth.