oauth-2.0 - Passport & JWT & Google/Facebook 策略 - 我如何结合 JWT 和 Google/Facebook 策略？

Question

这个问题适合任何熟悉的人

Node.js

express

Passport

带有 Passport 的 JWT 身份验证(JSON Web token )

Facebook OAuth2.0 或谷歌 OAuth2.0

我一直在做一些在线类(class)，并了解如何做以下两件事:

使用 Passport 本地策略 + JWT token 进行身份验证

使用 Passport Google/Facebook 策略 + Cookie/ session 进行身份验证。

我正在尝试将这两门类(class)的内容基本上结合起来。我想使用 Google Strategy + JWT 身份验证。我想使用 JWT 而不是 cookie，因为我的应用程序将成为 web/mobile/tablet 应用程序，并且我需要从不同的域访问 api。

我有两个问题:
要启动 Google/facebook OAuth 管道，您需要调用“/auth/facebook”或“/auth/google”。两种 Oauth 流程的工作方式基本相同，因此当我从现在开始说“/auth/google”时，我指的是两者中的任何一个。现在我遇到的问题是:在客户端上，我是使用 href 按钮链接还是 axios/ajax 调用来调用“/auth/google”路由？如果我使用 href 或 axios/ajax 方法，我仍然会遇到两种解决方案的问题。

href 方法问题:
当我分配 <a>带有'/auth/google'的href标签，身份验证工作得很好。用户通过 Google Auth 流程被推送，他们登录并调用“/auth/google/callback”路由。我现在遇到的问题是如何正确地将 JWT token 从“/auth/google/callback”发送回客户端？

经过大量谷歌搜索后，我看到人们只是将 JWT 从重定向查询参数中的 oauth 回调传递回客户端。例如:

res.redirect(301, `/dashboard?token=${tokenForUser(req.user)}`);

我遇到的问题是，现在身份验证功能保存在我的浏览器历史记录中!我可以注销(销毁保存在 localStorage 中的 token )，然后只需查看我的浏览器 url 历史记录，返回查询参数中包含 token 的 url，我将自动再次登录而无需通过谷歌战略!这是一个巨大的安全漏洞，显然是处理它的错误方法。

axios/ajax 方法问题:
现在，在我解释这个问题的问题之前，我确定如果我让它工作，它将解决我在之前的 href 问题中遇到的所有问题。如果我设法从 axios.get() 调用中调用“/google/auth”并在响应正文中接收 JWT，我将不会将 token 作为 url 参数发送，它也不会保存在浏览器历史记录中!完美对不对？好吧，这种方法仍然存在一些问题:(

尝试调用 axios.get('/auth/google') 时我收到以下错误:



我是如何尝试解决问题的:

我在我的 npm 服务器上安装了 cors，并添加了 app.use(cors());到我的 index.js。

我在 Google 开发者控制台的“Authorised JavaScript origins”中添加了“http://localhost:3000”。

这些解决方案都没有解决这个问题，所以现在我真的觉得卡住了。我想使用 axios/ajax 方法，但我不确定如何克服这个 cors 错误。

很抱歉这么长的信息，但我真的觉得我必须给你所有的信息才能让你正确地帮助我。

再次感谢，期待您的来信!

Answer 1

虽然有很好的答案，但我想通过示例添加更多信息。

Passport 的 google/facebook 策略是基于 session 的，它将用户信息存储在 cookie 中，这是不可取的。所以我们需要先禁用它

要禁用 session ，我们需要修改我们的重定向路由器。例如，如果我们有重定向路径 /google/重定向 如下所示，我们需要通过 { session :假} 对象作为参数。

router.get('/google/redirect', passport.authenticate('google', { session: false }), (req, res)=> {
    console.log(":::::::::: user in the redirect", req.user);
    //GENERATE JWT TOKEN USING USER
    res.send(TOKEN);
})

那么这个用户是从哪里来的呢？该用户来自 Passport 的回调函数。在前面的片段中，我们添加了 Passport .authenticate(....) 这个中间线启动了与用户打交道的 Passport 的 google-strategy 回调。例如

passport.use(
    new GoogleStrategy({
        callbackURL: '/google/redirect',
        clientID: YOUR_GOOGLE_CLIENT_ID
        clientSecret: YOUR_GOOGLE_SECRET_KEY
    }, 
    (accessToken, refreshToken, profile, done)=>{
        console.log('passport callback function fired');

        // FETCH USER FROM DB, IF DOESN'T EXIST CREATE ONE

        done(null, user);

    })
)

就是这样。我们已经成功地将 JWT 和 Google/Facebook Strategy 结合起来。