如何让前端知道您的服务器已成功检索到访问令牌

How to let frontend know your server has successfully retrieved an access token

我一直在研究 OAuth 2.0 授权代码流,并且正在尝试编写一个带有 Express 后端的 React 应用程序,以显示用户在他们自己的 Instagram 个人资料上看到的内容。我正在尝试使用最少的外部库(即不使用 passport-js)并且不将数据库引入组合。

这是我目前的流程:

  1. 资源所有者单击 React 应用程序(端口 3000)上的 <a> 标记,将它们重定向到我的 Express 服务器(端口 8000)的 /auth/instagram 端点

  2. res.redirect(AUTHORIZATON_URL) 将它们发送到 Instagram 的授权服务器

  3. 资源所有者同意并将授权代码发送回预定义的重定向-url /auth/instagram/callback,并将授权代码设置为查询参数

  4. 我从 url 中删除授权码并向 https://api.instagram.com/oauth/access_token 发出 POST 请求以获取访问令牌

现在我有了访问令牌,我如何联系 React 前端让他们知道一切正常并且用户已成功通过身份验证?

根据我的阅读,这是会话和 cookie 的想法发挥作用的地方,但我没有运气找到有关如何在不引入第三方库的情况下实现我想要的目标的文档。

最后,我希望我的应用程序支持多个用户同时查看他们的个人资料。因为我想将访问令牌传递给前端会破坏在后端安全检索它的目的,所以我猜我会以某种方式需要在前端和后端之间传递一个以某种方式链接到访问令牌的会话 ID。

非常感谢关于我的下一步应该做什么的任何想法,以及您认为合适的任何文章或文档。谢谢!

由于您在服务器端进行 OAuth 身份验证,因此您必须将一些参数传递给 redirect_uri,以识别用户会话(请参阅:Adding a query parameter to the Instagram auth redirect_uri doesn't work?); 当从授权服务器调用重定向 uri 时,您将知道哪个用户被授权。通知浏览器有两种选择: 1) 使用网络套接字通知客户端; 2) 使用定时器触发函数从客户端拉取状态;