时间戳

首页 > 解决方案 > 使用 Oauth2、React、Node.js 和 Passport.js 通过 Google 登录按钮对用户进行身份验证的最佳做法是什么？

reactjs - 使用 Oauth2、React、Node.js 和 Passport.js 通过 Google 登录按钮对用户进行身份验证的最佳做法是什么？

问题描述

我想在我的网站上有一个登录按钮，这样当用户点击它时，用户就可以使用他们的 Google 凭据。我想理想地使用 Express.js 和 Passport.js 执行身份验证服务器端。

我在服务器端实现了身份验证，但问题是我无法从网站向服务器发出 AJAX 请求以启动身份验证，因为Google 或 Oauth 不支持 CORS。所以我需要a href在我的网站中使用元素来调用服务器身份验证端点。但是，我无法以这种方式捕获服务器响应。

如果我在客户端执行身份验证（我正在使用 React），我可以在 Redux 中存储登录状态并允许用户访问网站的资源。但是，当用户注销时，我需要确保服务器端点停止为同一用户提供服务，这感觉就像实施两次身份验证：客户端和服务器端。

此外，在客户端进行身份验证时，Google 会打开一个弹出窗口供用户进行身份验证，我认为这是更糟糕的用户体验，然后在服务器端进行身份验证时只是重定向。

我想知道在使用 Oauth2/Google 进行身份验证方面的最佳做法是什么。例如，stackoverflow.com 也有 Google 按钮，但只是进行重定向，没有任何弹出窗口，所以我猜他们想出了一种方法来执行服务器端身份验证并绕过 CORS 问题。

标签： reactjsexpressauthenticationoauth-2.0passport.js

解决方案

您的身份验证应该在服务器端完成。下面是它的工作原理。

  1. 您拨打fetch或axios拨打您的身份验证路由。
  2. 您的身份验证路由向 Google 的身份验证服务器发送请求。这在后端很重要，因为您需要提供您的clientSecret. 如果您将其存储在前端，它将使某人很容易找到该价值并破坏您的网站。
  3. Google 对用户进行身份验证，然后将一组令牌发送到您的回调 url 以供该用户使用（刷新、身份验证等）。然后，您将使用 auth 令牌进行任何额外的授权，直到它过期。
  4. 一旦过期，您将使用刷新令牌为该客户端获取新的授权令牌。这是一个完全不同的过程。

这是 Passport.js 的示例：https ://github.com/jaredhanson/passport-google-oauth2

编辑＃1：

这是一个示例，其中包含与 Facebook 一起使用的过程的注释，它是相同的 OAuth 代码库： https ://github.com/passport/express-4.x-facebook-example/blob/master/server.js

推荐阅读