使用Identity Server 4在Ionic 3中进行无声续订 [英] Silent Renewal in Ionic 3 with Identity Server 4

问题描述

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

So I am trying to implement silent renewal in an ionic 3 application, I am still learning about the whole thing so I'll try to be as descriptive as possible please correct me if I am wrong.

身份验证

我正在使用隐式流程使用在应用程序浏览器中进行身份验证。

I am using Implicit flow for my authentication using the In App Browser.

1. 用户被重定向到认证服务器页面


2. 成功认证后，我检索id-token& access-token

据我所知， id-token 用于身份验证和 access-token 用于API的授权。

As I understand the id-token is for authentication and access-token is for authorization with the API.

我已经关注这篇文章帮助我进行设置（特别是部署到移动设备部分）对于我的身份服务器。

I have followed this article to help me set this up (Particularly the "Deploy to Mobile Device" section) for my Identity Server.

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

As done in the article I am using angular-oauth2-oidc to assist me with storing information about redirect links, issuer, etc...

我试图以3种不同的方式实现这一点，其中2种有效，但我不明白如何检索新的访问令牌和 id-token ，最后一个返回错误。他们每个人都给我留下了问题。

I have attempted to achieve this in 3 different ways, 2 of them work but I don't understand how to retrieve the new access-token and id-token, and the last one returns an error. each of them left me with questions.

第一名：oauthService

角度-oauth2-oidc库有一个 silentRefresh（）方法，这个github MD 描述了如何使用隐藏的iframe非常模糊地使用它，所以我几乎不明白它是如何工作的。我在同一目录中创建了一个 silent-refresh.html 页面，但使用 http：// localhost：8000 / silent-refresh.html 返回 404 。调用 silentRefresh（）方法在服务器端成功重新进行身份验证，但客户端请求超时，如MD文件中所述，出现问题iframe。

The angular-oauth2-oidc library has a silentRefresh() method, and this github MD describes how to use it using a hidden iframe very vaguely so I barely understand how this works. I have created a silent-refresh.html page in the same directory, but using http://localhost:8000/silent-refresh.html return's a 404. Calling the silentRefresh() method successfully re-authenticates on the server side but the request times-out on the client side, as said in the MD file, something is wrong with the iframe.

问题1：库是否创建了新的iframe，然后等待对 http：// localhost：8000 / silent的响应-refresh.html 页面但是从未找到，所以我从来没有得到我的回复？如何继续检索我的代币？

Question 1: Does the library create a new iframe and then waits for a response to the http://localhost:8000/silent-refresh.html page but is never found so I never get my response? How to proceed to retrieve my tokens?

第二名：iframe

所以这里我按照这篇文章，我在其中创建 iframe 并将其添加到正文。我创建了自己的url（类似于 silentRefresh（）方法创建的url），并将其分配给 src iframe 。再一次在服务器端一切都很好，它试图将令牌返回到 http：// localhost：8000 。

So here I follow this article where I create an iframe and add it to the body. I create my own url (similar to the one made by the silentRefresh() method), and assign it to the src of the iframe. Again on the server side everything is fine and it tries to return the tokens to http://localhost:8000.

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

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

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

Question 2: How to proceed to retrieve the tokens? as it doesn't update my tokens automatically, and I don't see how the code above can do it.

第三：在App Browser中
我认为这样可以正常工作，因为我已经知道如何使用在App Browser中处理请求。所以我尝试在第二部分中使用与 iframe 相同的 url 。但是，这会返回错误： prompt = none。但是用户未经过身份验证。在服务器端，它告诉服务器无法找到会话，因此它不知道谁在请求令牌续订。

Third: In App Browser I thought this would work fine as I already know how to process the request using the In App Browser. So I tried to use the same url that worked for the iframe in the 2nd part. However this returns an error: prompt=none was requested. But user is not authenticated. on the server side, which tells that the server can't find the session so it doesn't know who is requesting the token renewal.

问题3：除了我犯了错误之外，还有一个特定的原因吗？

Question 3: Is there a specific reason this won't work other than I made a mistake?

注意：写的时间比预期的要长这将稍微编辑一下。

NOTE: Took longer than expected to write this will edit this in a bit.

推荐答案

oAuthService

所以我查看了静默刷新的实现，看看它的作用。它会创建一个带有默认ID的iframe，除非您覆盖它。这让我们对实际发生的事情感到很困惑。

So I looked in to the implementation of the silent refresh, to see what it does. It creates an iframe with a default id, unless you override it. That cleared up a lot of confusion as to what was actually happening.

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

The next mistake I did was placing the silent-refresh.html file in the src/ folder, that makes it inaccessible to the iframe. Instead the file should have been placed in the www/ folder.

然后在内iframe 我一直收到 net :: ERR_CONNECTION_REFUSED 错误。这是由CORS引起的，通过在<$ c $上编辑客户端 int Config.cs 文件来解决c>认证服务器：
AllowedCorsOrigins = {http：// localhost：8100，http：//< ip>：8100 /， http：//< ip>：8100 / silent-refresh.html}，

Then inside the iframe I kept getting the net::ERR_CONNECTION_REFUSED error. This was due to CORS and is solved by editing the Client int the Config.cs file on the Authentication Server: AllowedCorsOrigins = { "http://localhost:8100", "http://<ip>:8100/", "http://<ip>:8100/silent-refresh.html" },

警告：一旦我想在浏览器中使用此外部服务（离子服务）或在我的设备上使用离线cordova运行android进行模拟，这不起作用 - cls ，这些使 root url 返回类似 http：//< ip> / 。但是一旦用离开cordova运行android （没有标志）， window.location.href 将返回 file：///< example> /< something> /index.html ，使用此类路径（ file：///< example> /<something>/silent-refresh.html ）作为重定向网址导致 ERR_UNSAFE_REDIRECT 错误显示在中iframe中。

WARNING: This didn't work once I wanted to take this outside serving in the browser (ionic serve) or emulating on my device with ionic cordova run android -c-l-s, these made the root url return something like http://<ip>/. But once ran with ionic cordova run android (without the flags), window.location.href would return file:///<example>/<something>/index.html, using this sort of path (file:///<example>/<something>/silent-refresh.html) as a redirect url caused an ERR_UNSAFE_REDIRECT error to display in the iframe.

或许 silentRefresh（）是一个只有Angular的解决方案吗？

Perhaps silentRefresh() is an Angular only solution?

在应用程序浏览器中

导致原始错误的错误是 clearsessioncache 和 clearcache 在创建浏览器时设置为 yes 导致会话被擦除，因此身份验证服务器没有知道是谁duh，现在简化为：

The mistake that caused the original error was having clearsessioncache and clearcache set to yes when creating the browser, caused the session to be wiped so the authentication server didn't know who it was duh, now reduced to this:

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

常规重定向网址 http：// localhost：8100 可用于使用新令牌捕获请求。并且不需要 silent-refresh.html 页面。

Regular redirect url of http://localhost:8100 could be used to catch the request with the new tokens. And the silent-refresh.html page is not needed.

以下是创建<$ c的代码$ c> 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';
}

其余代码几乎与最初提到的文章

这篇关于使用Identity Server 4在Ionic 3中进行无声续订的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！