TypeError：无法读取属性'nonceStateSeparator

Question

我目前正在尝试在我的 Angular 应用程序中实施 azure 广告身份验证。不幸的是，我遇到了一个我不明白的错误。在我的应用程序中，我调用了 angular-oauth2-oidc 包的 tryLogin 函数。在调用此函数之前，登录一直有效，因为它给了我以下错误：

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'nonceStateSeparator' of null
TypeError: Cannot read property 'nonceStateSeparator' of null
    at OAuthService.push../node_modules/angular-oauth2-oidc/esm5/angular-oauth2-oidc.js.OAuthService.tryLogin

登录功能似乎可以工作，因为它将令牌作为参数返回到应用程序的 url 中。

我的代码：

export class AppComponent implements OnInit {
  title = 'test';

  constructor(private oauthService: OAuthService) {

  }

  private async ConfigureAuth(): Promise<void> {
    this.oauthService.loginUrl = 'loginurl';
    this.oauthService.clientId = 'clientid';
    this.oauthService.resource = 'resource';
    this.oauthService.logoutUrl = 'logoutUrl';
    this.oauthService.redirectUri = window.location.origin + '/';
    this.oauthService.scope = 'openid';
    this.oauthService.oidc = true;
    this.oauthService.setStorage(sessionStorage);
  }

  async ngOnInit() {
    console.log('Starting ngInit');

    await this.ConfigureAuth();
    console.log('Await passed ngInit');

    this.oauthService.tryLogin({}); //ERROR here

    console.log('TryLogin passed ngInit');

    if(!this.oauthService.getAccessToken()) {
      console.log('no accestoken - ngInit');
      await this.oauthService.initImplicitFlow();
    }
    console.log(this.oauthService.getAccessToken());
    console.log('Finished ngInit');
  }
}

希望有人能帮我解决这个问题。

Answer 1

您不应单独设置配置值。显然，该库除了应该使用 configure 方法传递的配置对象：

private configureAuth(): void {
  this.oauthService.configure({
    loginUrl: 'loginurl',
    clientId,
    resource,
    logoutUrl
    // ... etc
  });      

  this.oauthService.setStorage(sessionStorage);
}

此外，async 在当前实现中并不是真正需要的。您的configureAuth 中没有任何方法是异步的。

旁注：最好为您的 oauth 配置创建一个单独的配置文件，然后将其导入您的组件中。

最好不要在组件中包含这种业务逻辑。这是服务的工作。尝试使您的组件尽可能愚蠢