使用 Google 系统中的身份验证处理登录,客户端和服务器 运行 在不同的端口 reactJS 和 nodeJS
Handle login using Google Authentication in system with client and server running on different port reactJS and nodeJS
目前我在客户端和服务器使用不同端口的项目中工作。每当在服务器中成功登录时,我对在客户端中处理事件感到困惑。我也不知道如何处理在客户端登录。我正在使用 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,之前实现了用户名和密码的正常登录。
我现在应该怎么办?感谢您的帮助。
我是这样实现这个功能的:
在客户端:
制作了一个组件来处理 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。
现在成功了。
目前我在客户端和服务器使用不同端口的项目中工作。每当在服务器中成功登录时,我对在客户端中处理事件感到困惑。我也不知道如何处理在客户端登录。我正在使用 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,之前实现了用户名和密码的正常登录。 我现在应该怎么办?感谢您的帮助。
我是这样实现这个功能的:
在客户端:
制作了一个组件来处理 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。 现在成功了。