I am trying to pass a custom variable as 'state' in azure ad b2c workflow in angular8 using angular-oauth2-oidc auth config and need to access this value in my common land page.
I have to handle multiple login pages/applications which need to redirect to a common landing page index.html and need to access custom string to identify the requested application.
Ex: I have 2 login pages
**- Login1.html**
**- Login2.html**
Both the login pages redirect to a common page **'http://localhost:4200/index.html'**.(This is the value I have set as redirect URL in the azure ad b2c application portal).
My need is when the user logins from Login1.html then after the successful authentication from b2c the redirect URL should pass a custom string called 'log1' and I need to get this value in the index.html page also.
When I tried with many articles to add a state along with the redirect URL, It was frequently returning error as the redirect URL doesn't match.
When I tried to add it in authConfig file then it's showing an error as 'Object literal may only specify known properties, and 'state' does not exist in type 'AuthConfig'
Can anyone help me to choose a right solution. Thanks in advance.
app.component.ts
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();
let loginval = this.oauthService.tryLoginImplicitFlow();
let token = this.oauthService.getAccessToken();
let state = this.oauthService.state;
}
message: string;
public getMessage() {
this.http.get("https://localhost:5001/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);
}
}
auth.config.ts (Sample)
import { AuthConfig } from 'angular-oauth2-oidc';
export const DiscoveryDocumentConfig = {
url: "https://aboutazure.b2clogin.com/aboutazure.onmicrosoft.com/v2.0/.well-known/openid-configuration?p=b2c_1_susi"
}
export const authConfig: AuthConfig = {
redirectUri: window.location.origin + '/index.html',
responseType: 'token id_token',
issuer: 'https://aboutazure.b2clogin.com/b88448e7-64f3-497b-a7aa-73ae0cc6e9ce/v2.0/',
strictDiscoveryDocumentValidation: false,
tokenEndpoint: 'https://aboutazure.b2clogin.com/aboutazure.onmicrosoft.com/oauth2/v2.0/token?p=b2c_1_susi',
loginUrl: 'https://aboutazure.b2clogin.com/aboutazure.onmicrosoft.com/oauth2/v2.0/token?p=b2c_1_susi',
clientId: '0c295dee-8904-4546-92b7-dc64dd14bf58',
scope: 'openid profile https://aboutazure.onmicrosoft.com/foo-api/user_impersonation',
skipIssuerCheck: true,
clearHashAfterLogin: true,
oidc: true,
}