通过 Azure B2C 将 Angular 8 应用程序调用到 .NET Core Web API

Question

我正在开发 Angular 8 应用程序，该应用程序需要从 Azure B2C 获取令牌，然后调用 .NET CORE Web API。我正在关注http://about-azure.com/using-azure-ad-b2c-with-angular-8/ 教程。我为中间件（Web API）创建了一个 Azure 应用程序，为 Angular 创建了第二个应用程序。

当我从 Angular 中单击“登录”时出现重定向错误。

 https://localhost/#error=redirect_uri_mismatch&error_description

我相信它在 Web API 应用程序重定向 URL 上确实出错，如下面的屏幕所示。我已按照上述教程中的上述步骤进行操作

Azure 上的 Web API 应用程序

Azure 上的 Angular 应用程序

应用组件

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { OAuthService, NullValidationHandler } from 'angular-oauth2-oidc';
import { authConfig, DiscoveryDocumentConfig } from './auth.config';

@Component({
selector: 'app-root',
template: `
<h1 *ngIf="!claims">
 Hi!
</h1>

<h1 *ngIf="claims">
 Hi, {{claims.given_name}}!
</h1>

<h2 *ngIf="claims">Your Claims:</h2>

<pre *ngIf="claims">
{{claims | json}}
</pre>
<br />

<div *ngIf="!claims">
<button (click)="login()">Login</button>
</div>

<div *ngIf="claims">
<button (click)="logout()">Logout</button>
<button (click)="getMessage()">API Call</button>
<div *ngIf="message">
  Response:
  {{message | json}}
</div>
</div>
`,
 styles: []
 })
export class AppComponent {
constructor(private http: HttpClient, private oauthService: OAuthService) {
 this.configure();
  this.oauthService.tryLoginImplicitFlow();
}

message: string;

public getMessage() {
 this.http.get("https://localhost:5001/api/values", { responseType: 'text' })
  .subscribe(r => {
    this.message = r
    console.log("message: ", this.message);
  });
}

public login() {

 this.oauthService.initLoginFlow();
}

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

public get claims() {
 let claims = this.oauthService.getIdentityClaims();
 return claims;

}

private configure() {
 this.oauthService.configure(authConfig);
 this.oauthService.tokenValidationHandler = new NullValidationHandler();
 this.oauthService.loadDiscoveryDocument(DiscoveryDocumentConfig.url);
 }
}

.WEB API 部署

namespace App.Core.API.Controllers
{
  [Authorize]
  [Route("api/[controller]")]
  [ApiController]
   public class HomeController : ControllerBase
   {
     [HttpGet]
     public IActionResult GetAsync() => Ok("Hello, World");
   }
 }

Answer 1

您应该确认 Angular 应用配置中的重定向 url 与 http://localhost:4200/index.html 相同，您可以使用 Fiddler 或浏览器的开发工具跟踪并找到授权请求中的请求 url 到 Azure AD B2C ，它必须完全匹配一个您在门户中注册的重定向 URI。