javascript - OAuth2 隐式授予(带弹出窗口，无需 LocalStorage)

Question

我目前正在将第三方服务集成到我们的系统中(客户端的 AngularJS 和 ASP.NET Web API 2.0)，这要求我们通过 OAuth2.0 对用户进行身份验证。

我目前正在使用隐式授予。但要求之一是同时支持 Edge 和 > IE10。

起初我使用以下流程:

1. 客户端从 WebAPI 获取第 3 方服务登录 URL
2. WebAPI 返回第 3 方服务登录 URL，然后客户端打开一个新的弹出窗口，其中包含登录 URL(忽略浏览器弹出窗口阻止程序)以及我们应用程序的返回 URL
3. 身份验证后，用户将被重定向回我们的应用程序，这是一个空白页面，其中包含 JavaScript，用于从散列查询字符串中提取 token ，然后将访问 token 存储到本地存储
4. 关闭弹出窗口
5. 在我的 Controller 中，我已订阅更改事件存储。因此，当访问 token 设置到本地存储中时，我的 Controller 将从本地存储中提取访问 token 并将其移动到 session 存储中。

在我在 IE 和 Edge 上进行测试之前，这一切都运行得很好。他们的本地存储不同步。 localStorage in win8.1 IE11 does not synchronize

为了使其在 IE 和 Edge 上运行，我更换了本地存储并使用 cookie。然后，我没有订阅更改事件的存储，而是使用类似于以下函数的函数来每秒检查 cookie:

setInterval(function(){
    // check cookie for cookie
    // if found, copy cookie to session storage
    // remove cookie
    // change state
}, 1000);

仅供引用:我们将访问 token 存储在 session 存储中，以防止用户打开多个选项卡来访问我们的网站。

这个方法可行，但是还有更好的解决方案吗？

Answer 1

我过去实现的另一个选项是在窗口之间直接通信。

在父窗口上，在全局命名空间上公开一个函数:
window.oauthCallback = function(payload){ ... 发送到 API }

在弹出窗口中，在 oauth 重定向回的页面上，查找 window.opener 并尝试直接调用该函数:
window.opener.oauthCallback(payload)
Payload 是一个由查询字符串中传回给您的 oauth 数据构造的对象。大多数框架已经可以为您提供一些功能。

一个警告 - 如果在无法打开弹出窗口或窗口无法通信的环境中(例如 ios webviews - 例如:单击来自 facebook 应用程序的链接)，那么您可以在同一窗口中进行重定向并将有效负载存储在本地存储中/cookies 或通过 URL 传递数据。