通过节点（护照）身份验证将 OAuth 用户数据传回 React答案

【问题标题】：Passing OAuth user data back to React via Node (Passport) authentication通过节点（护照）身份验证将 OAuth 用户数据传回 React
【发布时间】：2022-03-02 20:33:19
【问题描述】：

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

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

这指向 Express 路线...

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

使用 Passport 验证登录请求。

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 将数据包发送回。

【问题讨论】：

标签： node.js reactjs oauth-2.0 passport.js google-oauth

【解决方案1】：

我找到了一种方法，您可以为此使用 eventsource。查看本文了解更多信息https://www.blog.tericcabrel.com/implement-server-sent-event-in-node-js/

【讨论】：

【解决方案2】：

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

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

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

【讨论】：