Question

我使用 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',
  redirectUri: 'https://myRedirectURL.com',
  clientId: environment.myClientId,
  scope: 'openid',
  responseType: 'code',
  showDebugInformation: true,  
 };

 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.getIdentityClaims())
    this.logger.log("The accessToken: ", 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 中配置的所有示例中，但为什么呢？这是必须的吗？为什么当我在第一种方法的订阅部分配置它时它不起作用？

非常感谢。

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

0 个答案: