Google-OAuth REST Api做出反应

Question

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

我试图在前端使用Reactjs，但是遇到了一些问题。

在我的signin按钮组件中，我只是尝试用承载令牌检索结果，将其传递给减速机。

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

我是不是错过了一步？我在网上找了几个小时的各种资源，似乎找不到解决办法。

反应

(为了简单起见，我现在只是试图捕捉响应，响应应该被返回，但是我无法做到这一点)

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() func放在一起的。