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

【问题标题】：How to let frontend know your server has successfully retrieved an access token如何让前端知道您的服务器已成功检索到访问令牌
【发布时间】：2019-04-01 03:07:02
【问题描述】：

我一直在研究 OAuth 2.0 授权代码流，并正在尝试编写一个带有 Express 后端的 React 应用程序，该后端显示用户将在他们自己的 Instagram 个人资料中看到的内容。我正在尝试使用最少的外部库（即不使用 passport-js）来做到这一点，并且没有将数据库纳入其中。

这是我现在的流程：

资源所有者单击 React 应用程序（端口 3000）上的 <a> 标记，将它们重定向到我的 Express 服务器的 /auth/instagram 端点（端口 8000）
res.redirect(AUTHORIZATON_URL) 将它们发送到 Instagram 的授权服务器
资源所有者同意，授权码被发送回预定义的redirect-url /auth/instagram/callback，授权码设置为查询参数
我从 url 中剥离授权码并向https://api.instagram.com/oauth/access_token 发出POST 请求以获取访问令牌

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

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

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

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

【问题讨论】：

为什么需要“接触”前端？它应该通过你的后端验证代码，所以响应的成功告诉它它是否有效。
@jonrsharpe 所以如果我理解正确的话：资源所有者授予应用程序权限，并且重定向 url 设置为返回到它侦听的 React 应用程序代码。收到代码后，代码将发送到 Express 后端，在后端发出 POST 请求以交换代码以获取访问令牌。此调用的成功决定了响应是否有效。那是对的吗？这如何处理多用户的概念？
是的，没错。

标签： node.js reactjs express oauth-2.0 instagram-api

【解决方案1】：

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

【讨论】：