Google-OAuth REST Api做出反应

Question

我已经成功创建了一个使用passport-google-oauth返回JWT的API。目前，当我使用我的API路由完成该过程时，它返回一个带有JWT Bearer令牌的json对象。

我试图在前端使用Reactjs，但遇到了几个问题。

在我的signin按钮组件中，我只是尝试使用bearer token检索结果以将其传递给reducer

1. 当使用Axios时 - >我在使用axios时遇到CORS问题并且无法返回结果，在将CORS添加到我的构建和代理我的react项目时，我收到以下错误No 'Access-Control-Allow-Origin' header is present on the requested resource.
2. 当我使用带有href链接的锚标签时，身份验证成功运行，但它重定向到/ api / auth / google / callback链接本身，而不是允许我捕获持有者令牌，然后通过我的reducer运行它以将其保存到本地存储并更新我的状态。

我错过了一步吗？我在网上找了几个小时的各种资源，似乎无法找到我正在寻找的解决方案

应对

（为了简单起见，我只是想抓住响应，应该返回承载令牌，但是我无法做到这一点）

googleAuth = (e) => {
    e.preventDefault()

    axios.get('/api/auth/google')
        .then(res => console.log(res))
        .catch(err => console.log(err))
}

render() {
    return (
        <button onClick={this.googleAuth}>Signin With Google</button>
    )
}

API

路线

router.get('/google', passport.authenticate('google', {
    session: false,
    scope: ['profile', 'email']
}))

router.get('/google/callback', passport.authenticate('google', { session: false }), generateUserToken)

战略

passport.use(new passportGoogle.OAuth2Strategy(googleConfig, async (request, accessToken, refreshToken, profile, done) => {
        // Check for existing user
        const existingUser = await User.findOne({
            providers: {
                $elemMatch: {
                    provider: 'Google',
                    providerId: profile.id
                }
            }
        })

        // If user exists return done
        if (existingUser) return done(null, existingUser)

        // If user does not exist create a new user
        const newUser = await new User({
            name: profile.displayName,
            providers: [
                {
                    provider: 'Google',
                    providerId: profile.id
                }
            ]
        }).save()

        // Create profile with new user information
        const newProfile = await new Profile({
            userId: newUser.id
        }).save()

        return done(null, newUser)
    }))

Answer 1

我看了一下你的代码并没有看到任何序列化/反序列化。通常，您必须完成此过程才能连接您正在使用的任何身份验证策略。

以下是您可以在保留策略的文件中使用的代码片段：

passport.serializeUser((user, done) => {
  done(null, user.id);
});

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

也许您可以在文档中更详细地查找它。这是一个链接http://www.passportjs.org/docs/转到会话部分。另外，请务必查看app.use与.session（）函数的组合方式。