1

我使用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. 所以我尝试了以下操作：

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 中正确检索countryand （正如我在and语句中看到的那样），但我在这里从未收到访问令牌或 identityClaims。localeconsole.log(country)console.log(locale)

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

非常感谢。

4

0 回答 0