1

我想在我的 react 应用程序中实现 passport-google-oauth20。我不得不提一下，服务器端一切正常，oauth 流程让我注册并在数据库中创建一个新用户。但在反应中它只显示一个空白页面，地址栏显示这个网址，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>

谷歌.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);
});

谷歌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流程。

4

0 回答 0