在 AppComponent 之外的其他组件中配置 angular-oauth2-oidc

问题描述

我使用 angular-oauth2-oidc 库在我的 AppComponent 中通过 PKCE 实现了 oAuth 授权代码流。它工作正常，我什至可以传入一些自定义查询参数，我需要根据用户的语言和国家/地区更改从 oAuth 授权服务器收到的登录表单。

但我只能在将语言和国家/地区硬编码到我的 customQueryParams 的 oAuthService 中时才能完成这项工作。所以这段代码有效：

export class AppComponent {

 constructor(private oauthService: OAuthService) { }

  ngOnInit() {

let authConfig: AuthConfig = {
  issuer: 'https://myIssuerURL.com',redirectUri: 'https://myRedirectURL.com',clientId: environment.myClientId,scope: 'openid',responseType: 'code',showDebuginformation: true,};

this.oauthService.customQueryParams = {          // this is the important part. I want to change the country and locale dynamically
  'country': 'DE','locale': 'de_DE'
};

this.oauthService.tokenValidationHandler = new JwksValidationHandler();
this.oauthService.setupAutomaticSilentRefresh();
this.oauthService.loaddiscoveryDocumentAndTryLogin();

this.oauthService.events.subscribe(e => {
  console.log("OAuthEvent: ",e)
  if (e.type === "token_received") {
   
    // This works,I get the access token and the IdentityClaims.
    this.logger.log("The IdentityClaims are: ",this.oauthService.getIdentityClaims())
    this.logger.log("The accesstoken: ",this.oauthService.getAccesstoken())
    
  }
  (e instanceof OAuthErrorEvent) ? this.logger.error(e) : this.logger.warn(e);
});
}

但我需要从我的 URL 中动态检索国家和语言，然后将它们传递给 oAuthService，然后初始化代码流。但是现在当我想从 URL 获取这些参数时，我遇到了问题。 AppComponent 是一个非路由组件，所以我不能简单地使用 paramMap.snapshot 访问 URL 中的查询参数。所以我尝试了以下操作：

export class AppComponent {

constructor(private oauthService: OAuthService,private route: ActivatedRoute,private router: Router) { }

ngOnInit() {

 this.router.events
      .pipe(
    filter(e => (e instanceof ActivationEnd) && (Object.keys(e.snapshot.params).length > 0)),map(e => e instanceof ActivationEnd ? e.snapshot.params : {})
  )
  .subscribe(params => {
  
 let authConfig: AuthConfig = {
  issuer: 'https://myIssuerURL.com',};

 this.oauthService.customQueryParams = {     // this is the important part that doesn't work dynamically
  'country': params.country,'locale': params.locale
 };

 console.log(params.country)   // DE
 console.log(params.locale)    // de_DE

 this.oauthService.tokenValidationHandler = new JwksValidationHandler();
 this.oauthService.setupAutomaticSilentRefresh();
 this.oauthService.loaddiscoveryDocumentAndTryLogin();

 this.oauthService.events.subscribe(e => {
  // This doesn't work,I never get here.
  console.log("OAuthEvent: ",e)
  if (e.type === "token_received") {
   
    // This doesn't work,I never get here.
    this.logger.log("The IdentityClaims are: ",this.oauthService.getAccesstoken())
    
  }
  (e instanceof OAuthErrorEvent) ? this.logger.error(e) : this.logger.warn(e);
 });
}

尽管此方法可以从我的 URL 中正确检索 country 和 locale（正如我在 console.log(country) 和 console.log(locale) 语句中所见），但我在这里从未收到访问令牌或身份声明。

我还尝试将我所有的 oAuthService 配置移动到 LoginComponent 中，因为在那里我可以正常地使用 activationRoute 访问 URL 参数，然后使用参数配置 oAuthService。但这也不起作用，我也从未收到访问令牌或 IdentityClaims。我不明白这一点，是不是不可能在另一个组件中配置 oAuthService 而不是在 AppComponent 中？在我发现它在 AppComponent 中配置的所有示例中，但为什么呢？这是必须的吗？为什么当我在第一种方法的订阅部分配置它时它不起作用？

非常感谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angular angular angular-oauth2-oidc oauth-2.0