使用Oauth2，React，Node.js和Passport.js使用Google登录按钮对用户进行身份验证的最佳做法是什么? [英] What is the best practice to use Oauth2, React, Node.js and Passport.js to authenticate user with Google sign on button?

问题描述

我希望在我的网站上有一个登录按钮，以便当用户单击它时，该用户可以使用其Google凭据.我想理想地使用Express.js和Passport.js执行身份验证服务器端.

I want to have a login button in my website so when a user clicks on it, the user can use their Google credentials. I'd like to ideally perform the authentication server side using Express.js and Passport.js.

我在服务器端实现了身份验证，但问题是我无法从网站向服务器发出AJAX请求以开始身份验证，因为

I implemented authentication server-side but the problem is that I can't make an AJAX request from the website to the server to start authentication because Google or Oauth don't support CORS. So I need to use a href element in my website which would call the server authentication endpoint. However, I can't catch server response in this way.

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

If I perform the authentication client-side (I'm using React) I could store login state in Redux and allow the user to access the website's resources. However, when the user logs out I need to make sure that server endpoints stop serving the same user which feels like implementing authentication twice: client-side and server-side.

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

In addition when authenticating client-side, Google opens a popup for the user to authenticate which I think is worse user experience then just a redirect when authenticating server-side.

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

I'm wondering what the best practice in terms of authenticating using Oauth2/Google. For example, stackoverflow.com also has Google button but just makes a redirect, without any popup, so I guess they figured out a way to perform server-side authentication and to bypass CORS issue.

推荐答案

您的身份验证应在服务器端进行.这是它的工作原理.

Your authentication should be done server side. Here is how it works.

1. 您对身份验证路由进行了 fetch 或 axios 调用.
2. 您的身份验证路由会将请求发送到Google的身份验证服务器.在后端具有这一点很重要，因为您将需要提供您的 clientSecret .如果您将其存储在前端，那么真的很容易让人发现该价值并损害您的网站.
3. Google对用户进行身份验证，然后将一组令牌发送给您的回调URL，以供该用户使用(刷新，身份验证等).然后，您可以将auth令牌用于其他任何授权，直到其过期为止.
4. 一旦过期，您将使用刷新令牌为该客户端获取新的授权令牌.不过，这是一个完整的过程.

1. You make a fetch or axios call to your authentication route.
2. Your authentication route sends a request to Google's Authentication servers. This is important to have on the backend because you will need to provide your clientSecret. If you were to store this on the frontend, it would make it really easy for someone to find that value and compromise your website.
3. Google authenticates the user and then sends you a set of tokens to your callback url to use for that user (refresh, auth, etc...). Then you would use the auth token for any additional authorization until it expires.
4. Once that expires, you would use the refresh token to get a new authorization token for that client. That is a whole other process though.

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

Here is an example of what that looks like with 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

Here is an example with comments of the process in use with Facebook, which is the same OAuth codebase: https://github.com/passport/express-4.x-facebook-example/blob/master/server.js

这篇关于使用Oauth2，React，Node.js和Passport.js使用Google登录按钮对用户进行身份验证的最佳做法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！