'Response from Microsoft identity provider getting delayed when implemented Open Id Connect in Angular and hence unable to login
I have implemented Open Id Connect in my Angular application(ver.11) with angular-oauth2-oidc library.
I am able to authenticate with Google authentication system and able to login to my angular application with access token and claims.
I am also able to authenticate with Microsoft authentication system and login to my application but here I have an issue. Scenario of my issue is as below:
- When I try to login with Microsoft, I am able to get authenticated at Microsoft server but after redirect I am getting the response(i.e. access token, claims, userinfo, etc) with delay and in this case I am not logged in to my application.
- When I try to login with Microsoft and my debugger in browser is ON, once after successful authentication at the Microsoft end when I am redirected back to my application and when I start debugging my code, I am able to get the tokens and infos and then able to login to my application.
I have followed few solutions over internet and also tried to add timeout to make my code to wait but nothing is working. Will be very helpful if someone helps me with the solution. Thanks in advance.
Below are some piece of my code.
Login.component.ts
constructor(private router: Router,
private oauthService: OAuthService,
private httpSvc: HttpClient
) {
if (localStorage.getItem("Provider") == "Google") {
this.configFile = authCodeFlowConfig;
}
else if (localStorage.getItem("Provider") == "MS") {
this.configFile = authCodeFlowConfigMS;
}
this.configureSingleSignOn(this.configFile);
}
ngOnInit(): void {
}
configureSingleSignOn(config: any) {
this.oauthService.configure(config);
this.oauthService.loadDiscoveryDocumentAndTryLogin();
this.oauthService.events.subscribe(e => {
console.debug('oauth/oidc event', e);
});
}
signInWithMicrosoft() {
this.oauthService.setStorage(sessionStorage);
localStorage.setItem("Provider", "MS");
this.loginProvider = "MS";
this.oauthService.configure(authCodeFlowConfigMS);
/* this.oauthService.loadDiscoveryDocumentAndTryLogin();
this.oauthService.initLoginFlow(); */
this.oauthService.loadDiscoveryDocumentAndTryLogin()
.then((resp) => {
this.oauthService.initCodeFlow();
})
.catch(() => {
console.error('discovery load error');
});
// this.oauthService.setupAutomaticSilentRefresh();
}
app.component.ts
constructor(@Inject(ENV_CONFIG) private config: EnvironmentConfig,
private route: Router,
private oauthService: OAuthService,
private userSvc: UsersService,
private jwtInterceptor: JwtInterceptor,
) {
this.baseURL = `${config.environment.baseUrl}`
if (localStorage.getItem("Provider") == "Google") {
this.configFile = authCodeFlowConfig;
}
else if (localStorage.getItem("Provider") == "MS") {
this.configFile = authCodeFlowConfigMS;
}
this.configureSingleSignOn(this.configFile);
this.oauthService.events.subscribe(e => {
// tslint:disable-next-line:no-console
console.debug('oauth/oidc event', e);
console.log("In App after login");
this.oauthService.setStorage(sessionStorage);
});
}
ngOnInit() {
this.oauthService.events
.pipe(filter((e) => e.type === 'token_received'))
.subscribe((e) => {
console.log('received token event', [e]);
//this.oauthService.loadUserProfile();
this.getToken();
this.getEP();
});
console.log("Events ", this.oauthService.events)
}
configureSingleSignOn(config: any) {
this.oauthService.configure(config);
console.log(config);
this.oauthService.loadDiscoveryDocumentAndTryLogin();
}
getToken() {
let claims: any = this.oauthService.getIdentityClaims();
if (claims != null) {
localStorage.setItem("access_token_expires_at", `${this.oauthService.getAccessTokenExpiration()}`);
localStorage.setItem("id_token_expires_at", `${this.oauthService.getIdTokenExpiration()}`);
localStorage.setItem("id_token", this.oauthService.getIdToken());
localStorage.setItem("access_token", this.oauthService.getAccessToken());
localStorage.setItem("name", claims.name);
localStorage.setItem("email", claims.email);
localStorage.setItem("email_verified", claims.email_verified);
localStorage.setItem("picture", claims.picture);
localStorage.setItem("preferred_name", claims.preferred_username);
if (localStorage.getItem('Provider') == "MS") {
localStorage.setItem("MSALUserName", claims.preferred_username);
}
else {
localStorage.setItem("MSALUserName", claims.email);
}
}
console.log("claims: ", claims);
//this.getEP();
return claims ? claims : null;
}
isLoggedIn() {
var res = localStorage.getItem('EID') != null
return res
}
get EP() {
var email = localStorage.getItem("preferred_name") == 'undefined' ? localStorage.getItem("email") : localStorage.getItem("preferred_name");
this.userSvc.fetchEnterpriseID(email).subscribe(response => {
if (response != "" && response != "[]") {
console.log(response);
var parsedResp = JSON.parse(response);
localStorage.setItem('EID', parsedResp[0].EID);
localStorage.setItem('EName', parsedResp[0].EName);
}
})
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|