Question

我目前正在尝试在我的角应用程序中实现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配置创建一个单独的配置文件，然后将其导入到您的组件中。

更好的做法是在组件内部没有这种业务逻辑。这是服务的工作。尽量让你的组件尽可能愚蠢

TypeError：无法读取属性＆＃39; nonceStateSeparator

1 个答案: