使用 Identity Server 4 在 Ionic 3 中进行静默更新答案

【问题标题】：Silent Renewal in Ionic 3 with Identity Server 4使用 Identity Server 4 在 Ionic 3 中进行静默更新
【发布时间】：2018-02-13 13:45:32
【问题描述】：

所以我正在尝试在 ionic 3 应用程序中实现静默更新，我仍在学习整个事情，所以我会尽可能地描述性，如果我错了请纠正我。

身份验证

我使用Implicit 流进行身份验证，使用In App Browser。

用户被重定向到认证服务器页面
身份验证成功后，我检索了 id-token 和 access-token

据我了解，id-token 用于身份验证，access-token 用于通过 API 进行授权。

我已关注this article 帮助我为我的身份服务器设置（特别是“部署到移动设备”部分）。

正如文章中所做的那样，我使用angular-oauth2-oidc 来帮助我存储有关重定向链接、颁发者等的信息...

我尝试通过 3 种不同的方式实现此目的，其中 2 种有效，但我不明白如何检索新的 access-token 和 id-token，最后一种返回错误。他们每个人都给我留下了问题。

第一：oauthService

angular-oauth2-oidc 库有一个silentRefresh() 方法，this github MD 非常模糊地描述了如何使用隐藏的 iframe 来使用它，所以我几乎不明白它是如何工作的。我在同一目录中创建了一个silent-refresh.html 页面，但使用http://localhost:8000/silent-refresh.html 返回的是404。调用silentRefresh()方法在服务器端重认证成功，但是在客户端请求超时，如MD文件中所说，iframe有问题。

问题 1：库是否创建了一个新的 iframe，然后等待对 http://localhost:8000/silent-refresh.html 页面的响应，但从未找到，所以我从未收到我的响应？如何继续检索我的令牌？

二：iframe

所以我在这里关注this article，在那里我创建了一个iframe 并将其添加到body。我创建了自己的 url（类似于silentRefresh() 方法创建的那个），并将其分配给iframe 的src。同样在服务器端一切都很好，它会尝试将令牌返回给http://localhost:8000。

public startRenew(url: string) {
        this._sessionIframe.src = url;

        return new Promise((resolve) => {
            this._sessionIframe.onload = () => {
                resolve();
            }
        });
}

问题 2：如何继续检索令牌？因为它不会自动更新我的令牌，而且我看不到上面的代码是如何做到的。

第三：在应用浏览器中 我认为这会很好，因为我已经知道如何使用In App Browser 处理请求。所以我尝试使用与第二部分中的iframe 相同的url。但是这会返回一个错误：服务器端的prompt=none was requested. But user is not authenticated.，这表明服务器找不到会话，因此它不知道是谁在请求令牌更新。

问题 3：除了我犯了一个错误之外，是否有其他原因无法正常工作？

注意：写这篇文章的时间比预期的要长，稍后会对其进行编辑。

【问题讨论】：

标签： javascript ionic-framework oauth angular5 identityserver4

【解决方案1】：

oAuthService

所以我查看了静默刷新的the implementation，看看它做了什么。它会创建一个具有默认 ID 的 iframe，除非您覆盖它。这消除了对实际发生的事情的很多困惑。

我犯的下一个错误是将silent-refresh.html 文件放在src/ 文件夹中，这使得iframe 无法访问它。相反，该文件应该放在www/ 文件夹中。

然后在iframe 中，我不断收到net::ERR_CONNECTION_REFUSED 错误。这是由 CORS 引起的，可以通过在 Authentication Server 上编辑 Client int Config.cs 文件来解决： AllowedCorsOrigins = { "http://localhost:8100", "http://<ip>:8100/", "http://<ip>:8100/silent-refresh.html" },

警告：一旦我想在浏览器 (ionic serve) 中使用此功能或在我的设备上使用ionic cordova run android -c-l-s 进行模拟，这将不起作用，这些使root url 返回类似http://<ip>/。但是一旦使用ionic cordova run android（不带标志）运行，window.location.href 将返回file:///<example>/<something>/index.html，使用这种路径（file:///<example>/<something>/silent-refresh.html）作为重定向 url 会导致ERR_UNSAFE_REDIRECT 错误显示在iframe 中。

也许silentRefresh() 是 Angular 唯一的解决方案？

在应用浏览器中

导致原始错误的错误是在创建浏览器时将clearsessioncache 和clearcache 设置为yes，导致会话被擦除，因此身份验证服务器不知道它是谁，现在减少了对此：

const browser = window.cordova.InAppBrowser.open(oauthUrl, '_blank',
     'location=no, hidden=yes'
);

http://localhost:8100 中的常规 redirect url 可用于捕获带有新令牌的请求。并且不需要silent-refresh.html 页面。

这里是创建oauthUrl的代码：

buildOAuthRefreshUrl(nonce): string {
    return this.oauthService.issuer + '/connect/authorize?' +
      'response_type=id_token%20token' +
      '&client_id=' + this.oauthService.clientId +
      '&state=' + nonce +
      '&redirect_uri=' + encodeURIComponent(this.oauthService.redirectUri) +
      '&scope=' + encodeURI(this.oauthService.scope) +
      '&nonce=' + nonce +
      '&prompt=none';
}

其余代码与originally mentioned article几乎完全相同

【讨论】：