0

I am working on Angular 8 application that requires to get token from Azure B2C, followed by call .NET CORE Web API. I am following http://about-azure.com/using-azure-ad-b2c-with-angular-8/ Tutorial. I have create Azure Application one for middleware (Web API) and second one for Angular.

I am getting redirect error when I click on 'login' from Angular.

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

I believe it did mistake on Web API Application Redirect URL as shown in following screen. I have follow above steps from the above tutorial

Web API Application On Azure

enter image description here

Angular Application On Azure

enter image description here

App-Component

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 deployment

enter code here

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

1 Answer 1

1

You should confirm the redirect url in Angular app's config is the same as http://localhost:4200/index.html , you can use Fiddler or browser's developer tools to trace and find the request url in the authorize request to Azure AD B2C , it must exactly match one of the redirect URIs that you registered in the portal .

Sign up to request clarification or add additional context in comments.

4 Comments

Thanks for the information. So what should be redirect URL for Azure application properties for middleware (.net web API app) ??
You are doing authentication in angular app , and acquire access token to access your web api , no need to set web api app's redirect url .
Make sure client(angular) app's redirect url is the same as the one you set on portal .
You can consider mark this reply as answer which may help others who meet same problem . Or write a reply shows how you solve the issue if this is not the point .

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.