Experiencing a Redirect Issue in Internet Explorer 11 (in certain versions) Following Successful Authentication with AAD 2 in Angular 2.
Functioning as Expected in Chrome and Other Browsers.
When accessing the home page at http://localhost:1234, it should redirect to the AAD 2 authentication login page. After logging in successfully, it should redirect back to the same home page i.e. http://localhost:1234. However, it is incorrectly redirecting to http://localhost:1234/null. This issue seems to only occur on Internet Explorer 11, while other browsers are functioning properly.
If you have any insight or suggestions on how to resolve this issue, your assistance would be greatly appreciated.
import { Inject, Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import { UserAgentApplication } from 'msalx';
import { Router } from '@angular/router';
import { AppConfig } from '../app.config';
@Injectable()
export class LoginService
{
private config: Object = null;
private Token: any;
public getConfig()
{
return this.config;
}
public getToken()
{
return this.Token;
}
public clientID = this.con.getClientID();
public graphAPIScopes = [this.con.getClientID()];
//["https://graph.microsoft.com/user.read"];
public redirectUri = location.origin
constructor(private router: Router, private con: AppConfig) {
}
public clientApplication = new UserAgentApplication
(
this.clientID, null,(errorDesc, token, error, tokenType) => {
// Called after loginRedirect or acquireTokenPopup
if (tokenType == "id_token") {this.callTokenApi();
localStorage.setItem('User',
JSON.stringify(this.clientApplication.getUser()));
this.logMessage("User logged-in");
} else {
this.logMessage("Error during login:\n" + error);
}
});
state = {
isLoggedIn: false,
message: ""
}
logMessage(message: string) {
}
loginRedirect(sessionTimedOut: boolean) {
if (sessionTimedOut) {
this.clearUserInfoAndRedirectToLoginPage();
}
var GetState = this.clientApplication.isCallback(window.location.hash);
if (!GetState) {
if (!this.clientApplication.getUser()) {
this.clearUserInfoAndRedirectToLoginPage();
}
}
}
clearUserInfoAndRedirectToLoginPage() {
localStorage.setItem('User', null);
localStorage.setItem('Token', null);
this.clientApplication.loginRedirect(this.graphAPIScopes);
}
logout() {
this.clientApplication.logout();
}
loginPopup() {
this.clientApplication.loginPopup
(this.graphAPIScopes).then ((idToken) => {
this.clientApplication.acquireTokenSilent(this.graphAPIScopes).
then ((accessToken) => {
var userName = this.clientApplication.getUser().name;
this.logMessage("User '" + userName + "' logged-in");
},
(error) => {this.clientApplication.
acquireTokenPopup(this.graphAPIScopes).
then((accessToken) => {
var userName = this.clientApplication.getUser().name;
this.logMessage("User '" + userName + "' logged-in");
}, (error) => {
this.logMessage("Error acquiring the popup:\n" + error);
});
})
}, (error) => {
this.logMessage("Error during login:\n" + error);
});
}
callTokenApi() {
this.clientApplication.
acquireTokenSilent(this.graphAPIScopes).then ((accessToken) => {
localStorage.setItem('Token', accessToken);
window.location.reload();
}, (error) => {
})
}
callApiWithAccessToken(accessToken: string) {
accessToken;
}
}