angular - 让 angular-oauth2-oidc 从其他选项卡检索访问 token

标签 angular typescript identityserver4 angular-oauth2-oidc

我正在使用 angular-oauth2-oidc库结合隐式流(使用 IdentityServer4 服务器)。我已经成功设置了 the Silent Refresh suggestion from the docs .

这是我在包装器服务中引导事物的方式:

private userSubject = new Subject<User>();

constructor(private config: ConfigService, private oAuthService: OAuthService)
{ }

// Called on app load:
configure(): void {
    const config: AuthConfig = {
      issuer: this.config.getIdentityUrl(),
      logoutUrl: this.config.getIdentityUrl() + '/connect/endsession',
      redirectUri: window.location.origin + '/',
      silentRefreshRedirectUri: window.location.origin + '/silent-refresh.html',
      clientId: 'my_client_id',
      scope: 'openid profile my_api',
      sessionChecksEnabled: true,
    };

    this.oAuthService.configure(config);
    this.oAuthService.tokenValidationHandler = new JwksValidationHandler();

    this.oAuthService
      .loadDiscoveryDocumentAndLogin()
      .then((_) => this.loadUserProfile());

    this.oAuthService.setupAutomaticSilentRefresh();
}

private loadUserProfile() {
  this.oAuthService.loadUserProfile()
    .then((userProfile) => {
      const user = new User(userProfile['name']);
      this.userSubject.next(user);
    });
}

但是,如果我在新选项卡中打开应用程序,用户也会被重定向到 IdentityServer(并立即返回到我的应用程序)。

我的问题:我能否让库从同源的其他选项卡检索现有访问 token (以及可选的用户信息),以防止重定向?(首选,因为它不需要Ajax 调用。)

或者,有没有一种简单的方法可以在我们将某人发送到 IdentityServer 之前尝试使用静默刷新机制?

最佳答案

首先:我以某种方式想到 sessionStorage 适合 token ,并且应该始终避免使用 localStorage。但那是来自另一个涉及更强大(刷新) token 的项目,并且通过隐式流程我只有短暂的访问 token 所以 localStorage 也不是 that session 存储。最后:根据您自己的具体情况评估攻击媒介:“视情况而定”。

我没有提到我有那个想法,而且the other answer帮助我重新思考并考虑使用 localStorage。这实际上是一个很好的解决方案。

事实证明,该库内置了对使用 localStorage 作为 token 和其他数据的后备存储的支持。起初虽然我在尝试:

// This doesn't work properly though, read on...
this.oAuthService.setStorage(localStorage);

但这种引导方式对我的情况不起作用,请参阅 issue 321 on the libraries GitHub issues list对于我的登录。从该线程重复解决方案(或解决方法?),我通过在应用程序模块的 providers 中执行此操作解决了问题:

{ provide: OAuthStorage, useValue: localStorage },

现在库将正确使用 localStorage,新选项卡(甚至新窗口)将自动获取它。


作为脚注,如果您出于安全原因不想使用 localStorage,您也可以提供自己的存储,只要它实现了 OAuthStorage界面。然后,您自己的实现可以使用任何可用的选项卡间通信技术来“询问”来自其他选项卡的数据,并在需要时回退到 sessionStorage。

关于angular - 让 angular-oauth2-oidc 从其他选项卡检索访问 token ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50370273/

相关文章:

typescript - 从类型的属性中删除 null 或 undefined

javascript - 为什么 NodeListOf 上不存在 forEach

RegEx 输入参数的 TypeScript 错误

c# - IdentityServer4 token 签名验证

angular - Nativescript 的 AOT 编译成功 - 但仍然包含 `Compiler` 包?

javascript - Angular 6 : subscribe component to a service event

javascript - 带 Angular 动态 iframe 源

javascript - Angular 2+ 拦截 Command+S 的优雅方式

nginx - SignalR .NET Core 2.1 不适用于代理的 docker 容器

access-token - 在遗留 .net 4.6.2 项目中使用 IdentityServer4.AccessTokenValidation