OAuth2 隐式授权与弹出没有 LocalStorage

Question

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

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

起初我使用的是以下流程：

1. 客户端从 WebAPI 获取 3rd 方服务登录 url
2. WebAPI 返回第 3 方服务登录 url，然后客户端打开一个带有登录 url 的新弹出窗口（忽略浏览器弹出窗口拦截器）并返回我们应用程序的 url
3. 身份验证后，用户将被重定向回我们的应用程序，这是一个空白页面，其中包含用于从散列查询字符串中提取令牌然后将访问令牌存储到本地存储的 javascripts
4. 关闭弹出窗口
5. 在我的控制器中，我订阅了更改事件的存储。因此，当访问令牌设置到本地存储时，我的控制器将从本地存储中提取访问令牌并将其移动到会话存储中。

在我在 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);

仅供参考：我们将访问令牌存储在会话存储中，以防止用户打开多个标签来访问我们的网站。

这种方法有效，但有更好的解决方案吗？

Answer 1

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

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

在弹出窗口中，在 oauth 重定向回的页面上，查找 window.opener 并尝试直接调用该函数：
window.opener.oauthCallback(payload)
有效负载是从查询字符串中传回给您的 oauth 数据构造的对象。大多数框架都可以为您执行此操作。

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