通过 Node(护照)身份验证将 OAuth 用户数据传递回 React

Question

我对通过第三方OAuth提供商授权用户的React应用程序中的数据流有点困惑。现在我在 React 中有一个指向 Node 服务器的登录按钮。

<a href="http://localhost:5000/api/auth/google" className="login-button">Log In</a>

这将指向快速路线...

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

使用护照来验证登录请求。

passport.use(new GoogleStrategy({
clientID: process.env.OAUTH_CLIENT_ID,
clientSecret: process.env.OAUTH_SECRET,
callbackURL: "http://localhost:5000/api/auth/google/callback"
},
function (accessToken, refreshToken, profile, cb) {
return cb(null, profile);
}
));

回调设置为将用户重定向回 React 应用程序。

router.get('/auth/google/callback',
passport.authenticate('google', {
session: false,
failureRedirect: 'http://localhost:3000'
}),
function (req, res) {
// Successful authentication, redirect home.
res.redirect('http://localhost:3000');
});

这种方法允许我通过我的 Node 应用程序将用户添加到我的数据库中，或者确认用户在我的数据库中已经存在，这是我看到的任何教程所采用的，但是如果没有将此信息发送回 React 的能力，它似乎完全没用。至少在我看来，登录的目的是让我的应用程序功能特定于用户。

我希望能够做的是发回一个签名的 JWT 令牌。要么是用我的服务器手动签名的，要么是护照从谷歌获得的访问令牌，都可以。同样，我想发送一个用户 ID。我需要这个，以便我的应用程序可以使用用户 ID 进行 API 调用，作为对受保护路由的请求的一部分，因此需要 JWT。

这让我感到困惑，因为如果没有这种数据交换，OAuth 的目的似乎基本上毫无用处，所以我一定错过了过程中的关键步骤，或者我一定是从错误的角度看待问题。我应该在哪里或如何通知我的 React 应用程序登录用户的详细信息，并为他们提供本地存储的令牌？据我所知，没有办法使用回调 URL 发送数据包。

Answer 1

我找到了一种方法，你可以为此使用 eventsource。有关详细信息，请查看本文 https://www.blog.tericcabrel.com/implement-server-sent-event-in-node-js/

Answer 2

可以在前端应用中将令牌作为查询参数发送

res.redirect(`http://YOUR_FRONTEND_HOST:3000/?token=` + "Your jwt token")

因此，在前端，您可以使用useEffect检索令牌，然后将其消失，使其不对用户可用。