使用 Google 系统中的身份验证处理登录，客户端和服务器运行在不同的端口 reactJS 和 nodeJS

Question

目前我在客户端和服务器使用不同端口的项目中工作。每当在服务器中成功登录时，我对在客户端中处理事件感到困惑。我也不知道如何处理在客户端登录。我正在使用 PassPortJS。我添加了一个按钮来处理客户端中的 onClick 事件，而不是通过 Google 开始调用服务器进行身份验证：

let gg_window = window.open("http://localhost:7000/authentication/google/auth", "_self");

我还配置我的 google 应用程序进行身份验证，如下所示（客户端运行在端口 9000 上，服务器在端口 7000 上） Google Authentication configuration

在服务器中： 我做了一个端点来处理 URL 作为：

router.get('/google/auth', 
  passport.authenticate('google', {
  scope:
    'https://www.googleapis.com/auth/plus.me https://www.google.com/m8/feeds https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile'
  })
);

router.get('/google/auth/redirect',
  passport.authenticate('google'),
  (req, res) => {
    const token = jwt.sign(JSON.stringify(req.user), SECRET);
    res.redirect("http://localhost:9000/google/auth/success?username=" + req.user.username + "&token=" + token);
  });

我可以获得令牌、用户名...并重定向到客户端就可以了 在客户端 我正在使用 Redux-Saga，之前实现了用户名和密码的正常登录。我现在应该怎么办？感谢您的帮助。

Answer 1

我是这样实现这个功能的：

在客户端：

制作了一个组件来处理 end-point “/google/auth/success” 作为：

  <Route
    component={ConfirmAccount}
    path="/google/auth/success"
  />

在ConfirmAccountView 中，我创建了一个视图来确认用户输入的UserName。然后有一个按钮来确认帐户。

我使用 Hook 的 useEffect() 来处理这个 View 并将数据保存到 localStorage，例如：

  useEffect(() => {
    if (isLoggedIn === true) {
      localStorage.setItem("authorize_token", authorization_token)
      localStorage.setItem("user", username)
      history.push('/profile')
    }
    if (error) {
      NotificationManager.error(`${error}`, "Login Failed")
    }
    if (localStorage.getItem("authorize_token")) {
      history.push('/profile')
    }

  }, [isLoggedIn, error]);

我还制作了一个连接函数来获取状态和 post 对减速器的操作：

const mapStateToProps = createStructuredSelector({
  isLoggedIn: isLoggedIn(),
  authorization: authorization(),
  error: displayError()
});

const mapDispatchToProps = dispatch => {
  return {
    loginSuccessWithGG: username => {
      dispatch(loginSuccessWithGG(username)); // Action dispatch for signin
    }
  }
};

export default connect(mapStateToProps, mapDispatchToProps)(ConfirmAccount);

在Redux-Saga中，我做了一个动作，将动作SignInSuccessful派发给reducer，然后Reducer会将状态isLoggedIn设置为True。现在成功了。

使用 Google 系统中的身份验证处理登录，客户端和服务器运行在不同的端口 reactJS 和 nodeJS

Handle login using Google Authentication in system with client and server running on different port reactJS and nodeJS

node.js

reactjs

passport.js

google-signin

使用 Google 系统中的身份验证处理登录，客户端和服务器 运行 在不同的端口 reactJS 和 nodeJS

Handle login using Google Authentication in system with client and server running on different port reactJS and nodeJS

node.js

reactjs

passport.js

google-signin

使用 Google 系统中的身份验证处理登录，客户端和服务器运行在不同的端口 reactJS 和 nodeJS