Google APi + Passport + React : flux d'authentification

Question

J'utilise le passeport pour m'authentifier à l'aide de l'API Google, j'envoie un jeton par URL au client (React app) qui l'enregistre dans le localStorage.

Je veux utiliser ce token : à chaque appel API (get, post, put) je veux envoyer ce token au serveur, mais je ne sais pas comment vérifier ce token côté serveur.

Stratégie de passeport :

app.use(passport.initialize()); // Used to initialize passport
app.use(passport.session()); // Used to persist login sessions

passport.use(new GoogleStrategy({
    clientID: 'IDxxxxx',
    clientSecret: 'SecreXXX',
    callbackURL: 'http://localhost:3000/callback'
},
(accessToken, refreshToken, profile, done) => {

    // Directory API here

    var userData = {
        name: profile.displayName,
        token: accessToken
       };

    done(null, userData);

Authentification :

app.get('/auth/google', passport.authenticate('google', {
    scope: ['profile'] // Used to specify the required data
}));

// The middleware receives the data from Google and runs the function on Strategy config
app.get('/callback', passport.authenticate('google'), (req, res) => {
    var token = req.user.token;
    res.redirect("http://localhost:8000?token=" + token);
});

API en express (qui contient des méthodes CRUD) :

app.use('/api', movieRouter)

Dans react side : Obtenir le jeton

  componentWillMount() {
    var query = queryString.parse(this.props.location.search);
    if (query.token) {
      window.localStorage.setItem("jwt", query.token);
      // appel a directory api (avec token) puis sauvergarder dans redux puis redirection vers liste demandes
      this.props.history.push("/");
    }
  }

Faire des appels à l'API :

import axios from 'axios'

const api = axios.create({
    baseURL: 'http://localhost:3000/api',
})

export const insertMovie = payload => api.post(`/movie`, payload)

Il me suffit d'envoyer le jeton à chaque appel et de le vérifier côté serveur.

Remerciements

Answer 1

Vous voulez probablement définir le jeton dans un en-tête, essayez de changer votre client axios pour quelque chose comme

const api = axios.create({
  baseURL: 'http://localhost:3000/api',
  headers: {
    Authorization: `Bearer ${your_token_here}`
  }
})

Je ne suis pas sûr à 100 % qu'il s'agisse de la forme d'en-tête correcte attendue par le passeport, mais c'est l'idée générale que vous devez suivre.

Answer 2

Si le jeton est correctement défini dans l'en-tête, la session ou le cookie par le client, comme l'a indiqué Bill Metcalf, express est en mesure d'authentifier une route/un point de terminaison en ajoutant la fonction middleware passport.authenticate à la route, comme suit

app.use('/api', passport.authenticate('google', {failureRedirect:'/login'}), movieRouter)

Se référer à http://www.passportjs.org/docs/google/ pour plus d'informations

Answer 3

Pour chaque API dont vous voulez vérifier le jeton, vous pouvez passer une fonction de vérification du jeton (que j'appelle "isCorrectToken") avant d'agir comme ceci :

router.get("/api", isCorrectToken, (req, res) => {
// your api content })

Et voici notre fonction isCorrectToken :

const isCorrectToken = (req, res, next) => {
const token = req.headers.authorization;
if(token){
    const onlyToken = token.slice(7, token.length);
    jwt.verify(onlyToken, accessToken, (err, decode) => {
        if(err) return res.status(401).send({ msg: 'Invalid Token' });
        req.user = decode;
        next();
        return;
    });
}
else return res.status(401).send({ msg: 'Token is not supplied'});}

Le chiffre 7 correspond à la longueur de "Bearer" (d'après la réponse de Bill Metcalf ci-dessus).