我正在开发一个React+Express网站,我不知道如何实现登录功能,因为它依赖于另一个应用程序。让我来解释一下:
- 有一个系统(应用程序1),用户可以在其中创建帐户
- 用户登录系统后,可以单击一个按钮将其重定向到网站
- 当在系统(应用程序1)内单击该按钮时,它会向网站后端(应用程序2)发出POST请求,并将加密的用户凭据发送到端点
我设法从网站后端的系统中获取了发布的数据,但现在我不确定如何将这些数据传递/获取到前端。我正在考虑这样做:
- 一旦后端(应用程序2)从系统(应用程序1)接收到用户数据,它就会创建一个会话,该会话将保留用户数据(仍然加密)
- 创建会话后,后端重定向到前端(应用程序3)
- 前端(应用程序3)向后端(应用程序2)发出请求,以获取存储在会话中的所需数据(基本上是用户名)
我是后端主题的新手,所以,尽管我认为这种方法会起作用,但我不确定这是否是一种好方法。
我感谢任何能够提供反馈和想法的人,如有必要,我愿意提供更多信息。
创建用户后端时,您可以创建一个auth
路由器,负责登录用户和创建用户。
authRouter.post('/signup', async (req, res, next) => {
const { username, email, password: plainTextPassword } = req.body;
然后,在创建登录/注册时,您将创建一个token
,它将所有用户信息存储在字母和数字的组合中。这是由一个名为jsonwebtoken的包创建的。一个例子如下:
const newUser = await User.create(user)
token = jwt.sign(
{
_id: newUser._id,
username: newUser.username,
email: newUser.email,
type: 'user',
},
process.env.SECRET,
{ expiresIn: '24h' }
);
return res.status(201).send({ token, newUser })
注意,我没有发送他们的密码。
然后当您收到响应时,我假设您使用的是axios,您可以在localStorage
中设置令牌。
const storeUser = ({ userObj: user, token }) => {
localStorage.setItem('user', JSON.stringify(user));
localStorage.setItem('token', token);
};
const login = (credentials) => {
axios
.post('/auth/login', credentials)
.then((response) => {
storeUser(response.data);
}.catch (error) { console.error(error) }
}
这就是它的基础。查看jsonwebtoken,如果你正在寻找额外的安全措施,请使用bcrypt来保护密码。
根据您所描述的,您应该能够通过一个额外的步骤来完成上述所有操作,即查看socket.io,这将使您开始实现我刚才描述的内容,但对于两个应用程序,它们只需要能够进行通信。只需创建令牌,然后将其发送到第二个应用程序。Socket.io是您的解决方案。
在尝试应用@Dylan的建议时,我一直在寻找,并明白我是从错误的角度看待问题的。我认为我的前端和后端是两个独立的东西。
我的后端在端口5000上运行,前端在端口3000上运行,所以当我试图将一些授权头或cookie从后端传递到前端时,由于域发生了变化,它们都被删除了。
socket.io方法也不起作用,因为我没有";应用程序1";以及";应用程序3";同时在不同的地方打开(我相信可能有一种方法可以用socket.io来实现,但我没有尝试)。
因此,当我了解了HTTP请求的基本概念后,我做的第一件事就是在同一个端口上运行网站的前端和后端(一旦找到,我将在这里分享教程)。有了这个,我就可以从后到前传递代币和饼干,反之亦然。
最终,我在Next.js中重建了我的网站,并使用cookie来保持登录!