使用 angular-oauth2-oidc 和 "silent refresh" 无白名单 silent-refresh.html
Use angular-oauth2-oidc and "silent refresh" without white listing silent-refresh.html
我正在尝试将 the angular-oauth2-oidc
Silent Refresh 实现与在 IdentityServer4 服务器中配置的隐式流结合使用。我有一个在 ng new ng-and-ids4 --minimal
应用程序中使用此组件的概念证明:
import { Component } from '@angular/core';
import { AuthConfig, OAuthService, JwksValidationHandler, OAuthErrorEvent } from 'angular-oauth2-oidc';
@Component({
selector: 'app-root',
template: `<h1>Welcome!</h1>
<p>
<button (click)='login()'>login</button>
<button (click)='logout()'>logout</button>
<button (click)='refresh()'>refresh</button>
</p>
<h2>Your Claims:</h2><pre>{{claims | json}}</pre>
<h2>Your access token:</h2><p><code>{{accessToken}}</code></p>`,
styles: []
})
export class AppComponent {
constructor(public oauthService: OAuthService) {
this.oauthService.configure({
issuer: 'http://localhost:5000',
redirectUri: window.location.origin + '/',
silentRefreshRedirectUri: window.location.origin + '/silent-refresh.html',
clientId: 'my-spa',
scope: 'openid profile',
silentRefreshTimeout: 5000, // For faster testing
sessionChecksEnabled: true,
});
this.oauthService.tokenValidationHandler = new JwksValidationHandler();
this.oauthService.loadDiscoveryDocumentAndLogin();
this.oauthService.setupAutomaticSilentRefresh();
this.oauthService.events.subscribe(e => {
if (e instanceof OAuthErrorEvent) { console.error(e); }
else { console.warn(e) }
});
}
public get claims() { return this.oauthService.getIdentityClaims(); }
public get accessToken() { return this.oauthService.getAccessToken(); }
login() { this.oauthService.initImplicitFlow(); }
logout() { this.oauthService.logOut(); }
refresh() { this.oauthService.silentRefresh(); }
}
在 IDServer4 端,我像这样配置我的客户端:
new Client
{
ClientId = "my-spa",
AllowedGrantTypes = GrantTypes.Implicit,
AllowAccessTokensViaBrowser = true,
AccessTokenLifetime = 30, // Seconds (for testing purposes)
RedirectUris = { "http://localhost:4200/", "http://localhost:4200/silent-refresh.html" },
PostLogoutRedirectUris = { "http://localhost:4200/" },
AllowedCorsOrigins = { "http://localhost:4200" },
AllowedScopes =
{
IdentityServerConstants.StandardScopes.OpenId,
IdentityServerConstants.StandardScopes.Profile,
}
}
如您所见,在服务器上,我在 Client
的 RedirectUris
属性.
中将 "http://localhost:4200/silent-refresh.html"
列入了白名单
我的问题是,您是否可以以不需要我将 silent-refresh.html
页面列入白名单的方式配置 angular-oauth2-oidc
?
我问的原因是因为我想在更改 IdentityServer 端可能不那么容易的情况下也使用这种静默刷新方法。另外,看着Damien Bod's example of Silent Refresh in an Angular application我觉得它应该是有可能的,因为没有提到这样的白名单。
PS。如果我不包括 RedirectUris
的额外选项,那么我会在服务器(日志)上得到 Invalid redirect_uri: http://localhost:4200/silent-refresh.html
,在客户端库中得到 silent_refresh_timeout
OAuthErrorEvent
。
在与图书馆进行更多合作后,我认为答案是您无法轻松做到这一点。
如果您必须这样做,您需要调整为 Angular 应用程序提供服务的 index.html
,以便它以不同的方式引导。基本上,静默刷新会加载 that 文件而不是 silent-refresh.html
文件,因此索引必须有 2 种模式:一种用于常规应用程序加载,另一种用于有效地做到这一点:
parent.postMessage(location.hash, location.origin);
因为这就是 silent-refresh.html
所做的一切。但这可能有点困难,因为它需要在 CLI 创建生产构建时挂钩到 index.html
的生成。
因此,即使技术上可能,这样做也不是很实用。
我正在尝试将 the angular-oauth2-oidc
Silent Refresh 实现与在 IdentityServer4 服务器中配置的隐式流结合使用。我有一个在 ng new ng-and-ids4 --minimal
应用程序中使用此组件的概念证明:
import { Component } from '@angular/core';
import { AuthConfig, OAuthService, JwksValidationHandler, OAuthErrorEvent } from 'angular-oauth2-oidc';
@Component({
selector: 'app-root',
template: `<h1>Welcome!</h1>
<p>
<button (click)='login()'>login</button>
<button (click)='logout()'>logout</button>
<button (click)='refresh()'>refresh</button>
</p>
<h2>Your Claims:</h2><pre>{{claims | json}}</pre>
<h2>Your access token:</h2><p><code>{{accessToken}}</code></p>`,
styles: []
})
export class AppComponent {
constructor(public oauthService: OAuthService) {
this.oauthService.configure({
issuer: 'http://localhost:5000',
redirectUri: window.location.origin + '/',
silentRefreshRedirectUri: window.location.origin + '/silent-refresh.html',
clientId: 'my-spa',
scope: 'openid profile',
silentRefreshTimeout: 5000, // For faster testing
sessionChecksEnabled: true,
});
this.oauthService.tokenValidationHandler = new JwksValidationHandler();
this.oauthService.loadDiscoveryDocumentAndLogin();
this.oauthService.setupAutomaticSilentRefresh();
this.oauthService.events.subscribe(e => {
if (e instanceof OAuthErrorEvent) { console.error(e); }
else { console.warn(e) }
});
}
public get claims() { return this.oauthService.getIdentityClaims(); }
public get accessToken() { return this.oauthService.getAccessToken(); }
login() { this.oauthService.initImplicitFlow(); }
logout() { this.oauthService.logOut(); }
refresh() { this.oauthService.silentRefresh(); }
}
在 IDServer4 端,我像这样配置我的客户端:
new Client
{
ClientId = "my-spa",
AllowedGrantTypes = GrantTypes.Implicit,
AllowAccessTokensViaBrowser = true,
AccessTokenLifetime = 30, // Seconds (for testing purposes)
RedirectUris = { "http://localhost:4200/", "http://localhost:4200/silent-refresh.html" },
PostLogoutRedirectUris = { "http://localhost:4200/" },
AllowedCorsOrigins = { "http://localhost:4200" },
AllowedScopes =
{
IdentityServerConstants.StandardScopes.OpenId,
IdentityServerConstants.StandardScopes.Profile,
}
}
如您所见,在服务器上,我在 Client
的 RedirectUris
属性.
"http://localhost:4200/silent-refresh.html"
列入了白名单
我的问题是,您是否可以以不需要我将 silent-refresh.html
页面列入白名单的方式配置 angular-oauth2-oidc
?
我问的原因是因为我想在更改 IdentityServer 端可能不那么容易的情况下也使用这种静默刷新方法。另外,看着Damien Bod's example of Silent Refresh in an Angular application我觉得它应该是有可能的,因为没有提到这样的白名单。
PS。如果我不包括 RedirectUris
的额外选项,那么我会在服务器(日志)上得到 Invalid redirect_uri: http://localhost:4200/silent-refresh.html
,在客户端库中得到 silent_refresh_timeout
OAuthErrorEvent
。
在与图书馆进行更多合作后,我认为答案是您无法轻松做到这一点。
如果您必须这样做,您需要调整为 Angular 应用程序提供服务的 index.html
,以便它以不同的方式引导。基本上,静默刷新会加载 that 文件而不是 silent-refresh.html
文件,因此索引必须有 2 种模式:一种用于常规应用程序加载,另一种用于有效地做到这一点:
parent.postMessage(location.hash, location.origin);
因为这就是 silent-refresh.html
所做的一切。但这可能有点困难,因为它需要在 CLI 创建生产构建时挂钩到 index.html
的生成。
因此,即使技术上可能,这样做也不是很实用。