1
votes

La stratégie Google de Passport.js ne fonctionne pas avec l'application React

J'utilise la stratégie google passeport.js pour l'authentification des utilisateurs. J'utilise OAUTH2.

Lorsque je lance mon serveur et que je clique sur l'API via le navigateur, il lance la page de connexion Google. Mais lorsque j'appuie sur l'API depuis le front-end de réaction, il ne lance jamais la page de connexion de Google.

Veuillez trouver ci-dessous le code du serveur,

  handleJGoogleLogin(e) {
    e.preventDefault();
    var current = this;
    axios.get('http://localhost:4000/googleauth')
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
  }

Appel d'Axios de code de réaction,

const bodyParser = require('body-parser');
const express = require('express');
const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth').OAuth2Strategy;
const app = express();
const cors = require('cors');

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

app.use((req, res, next) => {
    res.setHeader("Access-Control-Allow-Origin", "*");
    res.setHeader(
        "Access-Control-Allow-Methods",
        "GET, POST, OPTIONS, PUT, PATCH, DELETE"
    );
    res.setHeader(
        "Access-Control-Allow-Headers",
        "X-Requested-With,content-type"
    );
    res.setHeader("Access-Control-Allow-Credentials", true);
    next();
});

app.use(bodyParser.urlencoded({
    extended: true
}));
app.use(bodyParser.json());


passport.use('google', new GoogleStrategy({
    clientID: "clientID", -- my client id
    clientSecret: "clientSecret", -- my clientsecret
    callbackURL: "callbackURL" -- url
},
    function (accessToken, refreshToken, profile, done) {
        // User.findOrCreate({ googleId: profile.id }, function (err, user) {
        //  console.log(err,user);
        //   return done(err, user);
        // });
        console.log(profile);
        return done(err, user);
    }
));

app.get('/googleauth',
    passport.authenticate('google', { scope: ['https://www.googleapis.com/auth/plus.login'] }));

passport.serializeUser(function (user, done) {
    done(null, user);
})

passport.deserializeUser(function (user, done) {
    done(null, user);
})

app.listen(4000, () => {
    console.log("REST server started on port 4000");
});

Je suis bloqué ici, je cherche de l'aide.

Merci d'avance


0 commentaires

3 Réponses :


1
votes

Je pense que la chose Passport ne fonctionne que sur le serveur. Il fait probablement une redirection ou quelque chose comme ça.


0 commentaires

0
votes

Quelques éléments sous votre passeport.use ajoutez un autre paramètre

   passport.use('google', new GoogleStrategy({
      clientID: "clientID", -- my client id
      clientSecret: "clientSecret", -- my clientsecret
      callbackURL: "callbackURL" -- url
      proxy: true
     },

   change:
          const GoogleStrategy = require('passport-google- 
    auth').OAuth2Strategy;
     to: 
         const GoogleStrategy = require('passport-google-oauth20').Strategy;

      add in a second scope of profile
        app.get('/googleauth',
               passport.authenticate('google', { scope: 
               ['https://www.googleapis.com/auth/plus.login','profile'] }));

Pouvez-vous publier votre code de réaction?


0 commentaires

2
votes

L'appel du front-end de réaction est un peu différent pour le flux OAuth. Au lieu de l'appel back-end normal en utilisant fetch ou axios faites l'appel comme ceci:

window.open(`http://localhost:${backend-port}/auth/google`, "_self");

Cette commande fera une demande de récupération au serveur back-end ET ouvrira cette fenêtre de connexion google en même temps. Il m'a fallu beaucoup de temps pour comprendre cela, mais c'est ainsi ...


0 commentaires