Skip to content
This repository has been archived by the owner. It is now read-only.

Commit f1e79f7

Browse files
navyasricnavyasric
authored
Merge pull request #5 from Azure-Samples/prkanher/IELoginRedirect
Prkanher/ie login redirect
2 parents c4b04b6 + e3faedb commit f1e79f7

File tree

3 files changed

+113
-173
lines changed

3 files changed

+113
-173
lines changed

‎AppCreationScripts/apps.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"x-ms-id": "JavaScriptSpa",
1010
"x-ms-name": "active-directory-javascript-graphapi-v2",
1111
"x-ms-version": "2.0",
12+
"logoutUrl": "http://localhost:30662/",
1213
"replyUrlsWithType": [
1314
{
1415
"url": "http://localhost:30662/",

‎JavaScriptSPA/index.html‎

Lines changed: 112 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -2,96 +2,136 @@
22
<html>
33
<head>
44
<title>Quickstart for MSAL JS</title>
5+
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>
56
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/0.2.3/js/msal.js"></script>
6-
<script src="https://code.jquery.com/jquery-3.2.1.min.js" class="pre"></script>
7-
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js" class="pre"></script>
8-
<style>
9-
table, td, th {
10-
border: 1px solid black;
11-
}
12-
</style>
7+
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
138
</head>
149

1510
<body>
16-
<h2>Welcome to MSAL.js Quickstart</h2><br/>
17-
<h4 id="WelcomeMessage"></h4>
18-
<button id="SignIn" onclick="signIn()">Sign In</button><br/><br/>
19-
<table id="graphData"></table>
11+
<h4 id="WelcomeMessage"></h4>
12+
<button id="SignIn" onclick="signIn()">Sign In</button>
13+
<br/><br/>
14+
<pre id="json"></pre>
2015

21-
<script>
22-
var applicationConfig = {
23-
clientID: "Enter_the_Application_Id_here", //This is your client ID
24-
graphScopes: ["user.read"],
25-
graphEndpoint: "https://graph.microsoft.com/v1.0/me"
26-
};
16+
<script>
17+
var applicationConfig = {
18+
clientID: '0813e1d1-ad72-46a9-8665-399bba48c201', //This is your client ID
19+
graphScopes: ["user.read"],
20+
graphEndpoint: "https://graph.microsoft.com/v1.0/me"
21+
};
2722

28-
//Pass null for default authority (https://login.microsoftonline.com/common) and tokenReceivedCallback if using popup apis
29-
var myMSALObj = new Msal.UserAgentApplication(applicationConfig.clientID, null, null);
23+
//Pass null for default authority (https://login.microsoftonline.com/common)
24+
var myMSALObj = new Msal.UserAgentApplication(applicationConfig.clientID, null, acquireTokenRedirectCallBack,
25+
{storeAuthStateInCookie: true, cacheLocation: "localStorage"});
3026

31-
function signIn() {
32-
myMSALObj.loginPopup(applicationConfig.graphScopes).then(function (idToken) {
33-
//Login Success
34-
showWelcomeMessage();
35-
acquireTokenAndCallMSGraph();
36-
}, function (error) {
37-
console.log(error);
38-
});
39-
}
27+
function signIn() {
28+
myMSALObj.loginPopup(applicationConfig.graphScopes).then(function (idToken) {
29+
//Login Success
30+
showWelcomeMessage();
31+
acquireTokenPopupAndCallMSGraph();
32+
}, function (error) {
33+
console.log(error);
34+
});
35+
}
4036

41-
function signOut() {
42-
myMSALObj.logout();
43-
}
37+
function signOut() {
38+
myMSALObj.logout();
39+
}
40+
41+
function acquireTokenPopupAndCallMSGraph() {
42+
//Call acquireTokenSilent (iframe) to obtain a token for Microsoft Graph
43+
myMSALObj.acquireTokenSilent(applicationConfig.graphScopes).then(function (accessToken) {
44+
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
45+
}, function (error) {
46+
console.log(error);
47+
// Call acquireTokenPopup (popup window) in case of acquireTokenSilent failure due to consent or interaction required ONLY
48+
if (error.indexOf("consent_required") !== -1 || error.indexOf("interaction_required") !== -1 || error.indexOf("login_required") !== -1) {
49+
myMSALObj.acquireTokenPopup(applicationConfig.graphScopes).then(function (accessToken) {
50+
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
51+
}, function (error) {
52+
console.log(error);
53+
});
54+
}
55+
});
56+
}
4457

45-
function acquireTokenAndCallMSGraph() {
46-
//Call acquireTokenSilent (hidden iframe) to obtain a token for Microsoft Graph
47-
myMSALObj.acquireTokenSilent(applicationConfig.graphScopes).then(function (accessToken) {
48-
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
49-
}, function (error) {
50-
//Call acquireTokenPopup (popup window) in case of acquireToken Failure
51-
if (error.indexOf("consent_required") !== -1 || error.indexOf("interaction_required") !== -1) {
52-
myMSALObj.acquireTokenPopup(applicationConfig.graphScopes).then(function (accessToken) {
53-
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
54-
}, function (error) {
55-
});
56-
}
57-
});
58+
function callMSGraph(theUrl, accessToken, callback) {
59+
var xmlHttp = new XMLHttpRequest();
60+
xmlHttp.onreadystatechange = function () {
61+
if (this.readyState == 4 && this.status == 200)
62+
callback(JSON.parse(this.responseText));
5863
}
64+
xmlHttp.open("GET", theUrl, true); // true for asynchronous
65+
xmlHttp.setRequestHeader('Authorization', 'Bearer ' + accessToken);
66+
xmlHttp.send();
67+
}
68+
69+
function graphAPICallback(data) {
70+
//Display user data on DOM
71+
var divWelcome = document.getElementById('WelcomeMessage');
72+
divWelcome.innerHTML += " to Microsoft Graph API!!";
73+
document.getElementById("json").innerHTML = JSON.stringify(data, null, 2);
74+
}
5975

60-
function callMSGraph(theUrl, accessToken, callback) {
61-
var xmlHttp = new XMLHttpRequest();
62-
xmlHttp.onreadystatechange = function () {
63-
if (this.readyState == 4 && this.status == 200)
64-
callback(JSON.parse(this.responseText));
76+
function showWelcomeMessage() {
77+
var divWelcome = document.getElementById('WelcomeMessage');
78+
divWelcome.innerHTML += 'Welcome ' + myMSALObj.getUser().name;
79+
var loginbutton = document.getElementById('SignIn');
80+
loginbutton.innerHTML = 'Sign Out';
81+
loginbutton.setAttribute('onclick', 'signOut();');
82+
}
83+
84+
// This function can be removed if you do not need to support IE
85+
function acquireTokenRedirectAndCallMSGraph() {
86+
//Call acquireTokenSilent (iframe) to obtain a token for Microsoft Graph
87+
myMSALObj.acquireTokenSilent(applicationConfig.graphScopes).then(function (accessToken) {
88+
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
89+
}, function (error) {
90+
console.log(error);
91+
//Call acquireTokenRedirect in case of acquireToken Failure
92+
if (error.indexOf("consent_required") !== -1 || error.indexOf("interaction_required") !== -1 || error.indexOf("login_required") !== -1) {
93+
myMSALObj.acquireTokenRedirect(applicationConfig.graphScopes);
6594
}
66-
xmlHttp.open("GET", theUrl, true); // true for asynchronous
67-
xmlHttp.setRequestHeader('Authorization', 'Bearer ' + accessToken);
68-
xmlHttp.send();
69-
}
95+
});
96+
}
7097

71-
function graphAPICallback(data) {
72-
//Display user data on DOM
73-
var divWelcome = document.getElementById('WelcomeMessage');
74-
divWelcome.innerHTML += " to Microsoft Graph API!!";
75-
$.each(data, function (key, value) {
76-
var tr = $('<tr></tr>');
77-
$('<td>' + '<i>' + key + '</i>' + '</td>').appendTo(tr);
78-
$('<td>' + value + '</td>').appendTo(tr);
79-
tr.appendTo('#graphData');
80-
});
81-
}
98+
function acquireTokenRedirectCallBack(errorDesc, token, error, tokenType)
99+
{
100+
if(tokenType === "access_token")
101+
{
102+
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
103+
} else {
104+
console.log("token type is:"+tokenType);
105+
}
106+
107+
}
82108

83-
function showWelcomeMessage() {
84-
var divWelcome = document.getElementById('WelcomeMessage');
85-
divWelcome.innerHTML += 'Welcome ' + myMSALObj.getUser().name;
86-
var loginbutton = document.getElementById('SignIn');
87-
loginbutton.innerHTML = 'Sign Out';
88-
loginbutton.setAttribute('onclick', 'signOut();');
109+
// Browser check variables
110+
var ua = window.navigator.userAgent;
111+
var msie = ua.indexOf('MSIE ');
112+
var msie11 = ua.indexOf('Trident/');
113+
var msedge = ua.indexOf('Edge/');
114+
var isIE = msie > 0 || msie11 > 0;
115+
var isEdge = msedge > 0;
116+
117+
//If you support IE, our recommendation is that you sign-in using Redirect APIs
118+
//If you as a developer are testing using Edge InPrivate mode, please add "isEdge" to the if check
119+
if (!isIE) {
120+
if (myMSALObj.getUser()) {// avoid duplicate code execution on page load in case of iframe and popup window.
121+
showWelcomeMessage();
122+
acquireTokenPopupAndCallMSGraph();
89123
}
124+
}
125+
else {
126+
document.getElementById("SignIn").onclick = function () {
127+
myMSALObj.loginRedirect(applicationConfig.graphScopes);
128+
};
90129

91130
if (myMSALObj.getUser() && !myMSALObj.isCallback(window.location.hash)) {// avoid duplicate code execution on page load in case of iframe and popup window.
92131
showWelcomeMessage();
93-
acquireTokenAndCallMSGraph();
132+
acquireTokenRedirectAndCallMSGraph();
94133
}
95-
</script>
134+
}
135+
</script>
96136
</body>
97137
</html>

‎JavaScriptSPA/index_login_redirect.html‎

Lines changed: 0 additions & 101 deletions
This file was deleted.

0 commit comments

Comments
 (0)