Solved: redirect_uri_mismatch Azure AD B2C with angular using MSAL || MSAL Profile Edit

Profile Edit in MSAL

if you are using msal in Angular Application and trying to edit profile then follow below steps.

1. Set the Profile edit policy and  prepare authority.
2. Set redirectUri at the configuration level or here in below code. if you do not set the redirectUri you will get this error :

"MSAL with Angular2 : Refused to display in a frame because it set 'X-Frame-Options' to 'deny'"

2. Call acquireTokenRedirect as below.

 editProfile() {
var authority = `https://${Domain}/tfp/${tenant}/${profileEditPolicy}`;
    /* just calling acquiretokenRedirect with different policy and authority 
    to edit profile,
    no need to pass redirectUri as authority will decide */
    this.authService.acquireTokenRedirect({
      scopes: [Scopes],
// https://yourApp.b2clogin.com/yourApp.onmicrosoft.com/profile_edit_policy
      authority: authority
    });
}

Comments

Popular posts from this blog

Swagger for Azure functions: Undocumented TypeError: Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body. Fixed.

System.Net.Http.HttpClient' does not contain a definition for 'PostAsJsonAsync

A collection with cascade="all-delete-orphan" was no longer referenced by the owning entity instance