Как сделать так, чтобы кнопка активировала поток Google oauth с помощью passport-google-oauth20? - PullRequest
0 голосов
/ 12 апреля 2020

Я хочу реализовать passport-google-oauth20 в своем приложении реакции. Я должен отметить, что все отлично работает на стороне сервера, поток oauth регистрирует меня и создает нового пользователя в базе данных. Но в ответ он просто показывает пустую страницу, а в адресной строке отображается этот URL, http://localhost:3000/api/auth/google

Кнопка:

<a href='/api/auth/google'>
                <button type="submit" className="App_button _oauth">
                    <div className='socialIcon'>
                        <GoogleIcon width={18} />
                    </div>
                    <span>Sign up with Google</span>
                </button>
            </a>

google. js

const GoogleStrategy = require('passport-google-oauth20').Strategy;
const passport = require('passport');
const keys = require('../../config/keys');
const User = require('../../models/User');

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

module.exports = new GoogleStrategy({
    clientID: keys.GOOGLE_CLIENT_ID,
    clientSecret: keys.GOOGLE_CLIENT_SECRET,
    callbackURL: '/api/auth/google/callback',
}, async (accessToken, refreshToken, profile, done) => {
    const existingUser = await User.findOne({ googleId: profile.id });

    if (existingUser) {
        return done(null, existingUser);
    }

    const user = await new User({ 
        name: profile.displayName,
        googleId: profile.id,
    }).save();

    done(null, user);
});

Google oauth маршруты

router.get('/google', passport.authenticate('google', { scope: ['profile', 'email'], }));
router.get('/google/callback', passport.authenticate('google'), (req, res) => {
    res.redirect('/api/auth/profile');
});
router.get('/profile', (req, res) => res.send(req.user));
router.get('/logout', (req, res) => {
    req.logout();
    res.send(req.user);
});

пакет. json

...
"proxy": {
    "/api/auth/google": {
      "target": "http://localhost:8080"
    },
    "/api/*": {
      "target": "http://localhost:8080"
    }
  },
...

Я хочу сделать эта кнопка правильно запускает поток oauth.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...