CORS 阻止错误与 loadDiscoveryDocumentAndTryLogin()

Question

我正在研究来自 Azure B2C 的 Angular 9 身份验证。在 angular 中，我正在使用 Auth angular-oauth2-oidc 库。

如果我在配置方法中有 loadDiscoveryDocumentAndTryLogin() 代码，我会收到 CORS 块错误，我不确定我缺少什么。如果我禁用 loadDiscorveryDocumentAndTryLoging() 代码，那么我会设法重定向到 Azure B2C 登录页面

 import { OnInit, Component, Injector } from '@angular/core';
 import { OAuthService } from 'angular-oauth2-oidc';
 import { JwksValidationHandler } from 'angular-oauth2-oidc-jwks';
 import { authConfig } from '../../config/auth.config';


 @Component({
   selector: 'app-auth-landing-page',
   templateUrl: 'auth-landing.component.html',
   styleUrls: ['auth-landing.component.scss']

 })
   export class AuthComponent implements OnInit{

_accessToken: string; 
_idToken: string;


constructor(private injector: Injector) { }
 private get oauthService() {
    return this.injector.get(OAuthService)
 }

 private async ConfigureAuth(): Promise<void>{

  this.oauthService.configure(authConfig);
  this.oauthService.tokenValidationHandler = new JwksValidationHandler();
  this.oauthService.loadDiscoveryDocumentAndTryLogin();
  this.oauthService.setStorage(sessionStorage);
 }

 async ngOnInit(){
  await this.ConfigureAuth();
 }

  async login(){
  this.oauthService.tryLogin({});

 if(!this.oauthService.getAccessToken()){
   await this.oauthService.initImplicitFlow();
  }

this._accessToken = this.oauthService.getAccessToken();
this._idToken = this.oauthService.getIdToken();
let validToken = this.oauthService.hasValidAccessToken();
   console.log(this._accessToken);
}

logout(){
  this.oauthService.logOut();
}

token(){
  let claims: any = this.oauthService.getIdentityClaims();
  return claims ? claims : null;
}

readToken()
{
  console.log("ID Token ", this._accessToken );
  console.log("Access Token", this._idToken);
  let claims: any = this.oauthService.getIdentityClaims();
   console.log(claims);
 }
}

Answer 1

Metadata URL 格式错误。在您的 OAuthService 配置中使用以下内容：

loginUrl: "https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/{policy}/oauth2/v2.0/authorize",

issuer: "https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/{policy}/v2.0/",

此外，与问题无关但值得一提：

您在此函数中没有等待任何内容：

private async ConfigureAuth(): Promise<void>{

And/or更重要的是，避免async ngOnInit.

CORS 阻止错误与 loadDiscoveryDocumentAndTryLogin()

CORS blocked error with loadDiscoveryDocumentAndTryLogin()

azure-active-directory

angular9

angular-oauth2-oidc