Skip to content

Commit bbb6a2f

Browse files
author
Prithvi Kanherkar
committed
Fixes for onload issues in IE, adding postlogout to app json
1 parent 031ada2 commit bbb6a2f

File tree

3 files changed

+122
-107
lines changed

3 files changed

+122
-107
lines changed

Diff for: ‎AppCreationScripts/apps.json

+1
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/",

Diff for: ‎JavaScriptSPA/index.html

+120-106
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,25 @@
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>
5+
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>
66
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/0.2.3/js/msal.js"></script>
77
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
88
</head>
99

1010
<body>
11-
<h2>Welcome to MSAL.js Quickstart</h2><br/>
12-
<h4 id="WelcomeMessage"></h4>
13-
<button id="SignIn" onclick="signIn()">Sign In</button><br/><br/>
14-
<pre id="json"></pre>
11+
<h4 id="WelcomeMessage"></h4>
12+
<button id="SignIn" onclick="signIn()">Sign In</button>
13+
<br/><br/>
14+
<pre id="json"></pre>
1515

16+
<<<<<<< HEAD
17+
<script>
18+
var applicationConfig = {
19+
clientID: '0813e1d1-ad72-46a9-8665-399bba48c201', //This is your client ID
20+
graphScopes: ["user.read"],
21+
graphEndpoint: "https://graph.microsoft.com/v1.0/me"
22+
};
23+
=======
1624
<script>
1725
// Browser check variables
1826
var ua = window.navigator.userAgent;
@@ -23,118 +31,124 @@ <h4 id="WelcomeMessage"></h4>
2331
var isEdge = msedge > 0;
2432

2533
var applicationConfig = {
26-
clientID: "0813e1d1-ad72-46a9-8665-399bba48c201", //This is your client ID
34+
clientID: "Enter_the_Application_Id_here", //This is your client ID
2735
graphScopes: ["user.read"],
2836
graphEndpoint: "https://graph.microsoft.com/v1.0/me"
2937
};
38+
>>>>>>> 1fbe10f469b303ec16eccd34c22172576ab7759f
3039

31-
//Pass null for default authority (https://login.microsoftonline.com/common) and tokenReceivedCallback if using popup apis
32-
var myMSALObj = new Msal.UserAgentApplication(applicationConfig.clientID, null, null, {storeAuthStateInCookie:true, cacheLocation:"localStorage"});
33-
34-
function signIn() {
35-
myMSALObj.loginPopup(applicationConfig.graphScopes).then(function (idToken) {
36-
//Login Success
37-
showWelcomeMessage();
38-
acquireTokenAndCallMSGraph();
39-
}, function (error) {
40-
console.log(error);
41-
});
42-
}
43-
44-
function signOut() {
45-
myMSALObj.logout();
46-
}
40+
//Pass null for default authority (https://login.microsoftonline.com/common)
41+
var myMSALObj = new Msal.UserAgentApplication(applicationConfig.clientID, null, acquireTokenRedirectCallBack,
42+
{storeAuthStateInCookie: true, cacheLocation: "localStorage"});
4743

48-
function acquireTokenAndCallMSGraph() {
49-
//Call acquireTokenSilent (iframe) to obtain a token for Microsoft Graph
50-
myMSALObj.acquireTokenSilent(applicationConfig.graphScopes).then(function (accessToken) {
51-
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
52-
}, function (error) {
53-
// Call acquireTokenPopup (popup window) in case of acquireToken Failure
54-
if (error.indexOf("consent_required") !== -1 || error.indexOf("interaction_required") !== -1) {
55-
myMSALObj.acquireTokenPopup(applicationConfig.graphScopes).then(function (accessToken) {
56-
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
57-
}, function (error) {
58-
});
59-
}
60-
});
61-
}
44+
function signIn() {
45+
myMSALObj.loginPopup(applicationConfig.graphScopes).then(function (idToken) {
46+
//Login Success
47+
showWelcomeMessage();
48+
acquireTokenPopupAndCallMSGraph();
49+
}, function (error) {
50+
console.log(error);
51+
});
52+
}
53+
54+
function signOut() {
55+
myMSALObj.logout();
56+
}
6257

63-
function callMSGraph(theUrl, accessToken, callback) {
64-
var xmlHttp = new XMLHttpRequest();
65-
xmlHttp.onreadystatechange = function () {
66-
if (this.readyState == 4 && this.status == 200)
67-
callback(JSON.parse(this.responseText));
58+
function acquireTokenPopupAndCallMSGraph() {
59+
//Call acquireTokenSilent (iframe) to obtain a token for Microsoft Graph
60+
myMSALObj.acquireTokenSilent(applicationConfig.graphScopes).then(function (accessToken) {
61+
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
62+
}, function (error) {
63+
console.log(error);
64+
// Call acquireTokenPopup (popup window) in case of acquireTokenSilent failure due to consent or interaction required ONLY
65+
if (error.indexOf("consent_required") !== -1 || error.indexOf("interaction_required") !== -1 || error.indexOf("login_required") !== -1) {
66+
myMSALObj.acquireTokenPopup(applicationConfig.graphScopes).then(function (accessToken) {
67+
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
68+
}, function (error) {
69+
console.log(error);
70+
});
6871
}
69-
xmlHttp.open("GET", theUrl, true); // true for asynchronous
70-
xmlHttp.setRequestHeader('Authorization', 'Bearer ' + accessToken);
71-
xmlHttp.send();
72-
}
72+
});
73+
}
7374

74-
function graphAPICallback(data) {
75-
//Display user data on DOM
76-
var divWelcome = document.getElementById('WelcomeMessage');
77-
document.getElementById("json").innerHTML = JSON.stringify(data, null, 2);
75+
function callMSGraph(theUrl, accessToken, callback) {
76+
var xmlHttp = new XMLHttpRequest();
77+
xmlHttp.onreadystatechange = function () {
78+
if (this.readyState == 4 && this.status == 200)
79+
callback(JSON.parse(this.responseText));
7880
}
81+
xmlHttp.open("GET", theUrl, true); // true for asynchronous
82+
xmlHttp.setRequestHeader('Authorization', 'Bearer ' + accessToken);
83+
xmlHttp.send();
84+
}
85+
86+
function graphAPICallback(data) {
87+
//Display user data on DOM
88+
var divWelcome = document.getElementById('WelcomeMessage');
89+
divWelcome.innerHTML += " to Microsoft Graph API!!";
90+
document.getElementById("json").innerHTML = JSON.stringify(data, null, 2);
91+
}
92+
93+
function showWelcomeMessage() {
94+
var divWelcome = document.getElementById('WelcomeMessage');
95+
divWelcome.innerHTML += 'Welcome ' + myMSALObj.getUser().name;
96+
var loginbutton = document.getElementById('SignIn');
97+
loginbutton.innerHTML = 'Sign Out';
98+
loginbutton.setAttribute('onclick', 'signOut();');
99+
}
79100

80-
function showWelcomeMessage() {
81-
var divWelcome = document.getElementById('WelcomeMessage');
82-
divWelcome.innerHTML += 'Welcome ' + myMSALObj.getUser().name + " to Microsoft Graph API!!";
83-
var loginbutton = document.getElementById('SignIn');
84-
loginbutton.innerHTML = 'Sign Out';
85-
loginbutton.setAttribute('onclick', 'signOut();');
101+
// This function can be removed if you do not need to support IE
102+
function acquireTokenRedirectAndCallMSGraph() {
103+
//Call acquireTokenSilent (iframe) to obtain a token for Microsoft Graph
104+
myMSALObj.acquireTokenSilent(applicationConfig.graphScopes).then(function (accessToken) {
105+
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
106+
}, function (error) {
107+
console.log(error);
108+
//Call acquireTokenRedirect in case of acquireToken Failure
109+
if (error.indexOf("consent_required") !== -1 || error.indexOf("interaction_required") !== -1 || error.indexOf("login_required") !== -1) {
110+
myMSALObj.acquireTokenRedirect(applicationConfig.graphScopes);
111+
}
112+
});
113+
}
114+
115+
function acquireTokenRedirectCallBack(errorDesc, token, error, tokenType)
116+
{
117+
if(tokenType === "access_token")
118+
{
119+
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
120+
} else {
121+
console.log("token type is:"+tokenType);
122+
}
123+
124+
}
125+
126+
// Browser check variables
127+
var ua = window.navigator.userAgent;
128+
var msie = ua.indexOf('MSIE ');
129+
var msie11 = ua.indexOf('Trident/');
130+
var msedge = ua.indexOf('Edge/');
131+
var isIE = msie > 0 || msie11 > 0;
132+
var isEdge = msedge > 0;
133+
134+
//If you support IE, our recommendation is that you sign-in using Redirect APIs
135+
//If you as a developer are testing using Edge InPrivate mode, please add "isEdge" to the if check
136+
if (!isIE) {
137+
if (myMSALObj.getUser()) {// avoid duplicate code execution on page load in case of iframe and popup window.
138+
showWelcomeMessage();
139+
acquireTokenPopupAndCallMSGraph();
86140
}
87-
88-
/**
89-
if (myMSALObj.getUser() && !myMSALObj.isCallback(window.location.hash)) {// avoid duplicate code execution on page load in case of iframe and popup window.
90-
showWelcomeMessage();
91-
acquireTokenAndCallMSGraph();
92-
}
93-
**/
94-
95-
// Uncomment the above code and delete the below code if you are not using browser detection
96-
97-
if(isIE) {
98-
document.getElementById("SignIn").onclick = function() {
99-
myMSALObj.loginRedirect(applicationConfig.graphScopes);
100-
};
101-
if (myMSALObj.getUser() && !myMSALObj.isCallback(window.location.hash)) {// avoid duplicate code execution on page load in case of iframe and popup window.
102-
showWelcomeMessage();
103-
acquireTokenRedirectAndCallMSGraph();
104-
}
105-
}
106-
// Uncomment this if you are testing in Edge InPrivate, or delete
107-
/**
108-
else if(isEdge) {
109-
document.getElementById("SignIn").onclick = function () {
110-
myMSALObj.loginRedirect(applicationConfig.graphScopes);
111-
};
112-
if (myMSALObj.getUser() && !myMSALObj.isCallback(window.location.hash)) {// avoid duplicate code execution on page load in case of iframe and popup window.
113-
showWelcomeMessage();
114-
acquireTokenRedirectAndCallMSGraph();
115-
}
116-
}
117-
**/
118-
else {
119-
if (myMSALObj.getUser() && !myMSALObj.isCallback(window.location.hash)) {// avoid duplicate code execution on page load in case of iframe and popup window.
120-
showWelcomeMessage();
121-
acquireTokenAndCallMSGraph();
122-
}
123-
}
124-
125-
// This function can be removed if browser detection isn't needed
126-
function acquireTokenRedirectAndCallMSGraph(myMSALObj) {
127-
//Call acquireTokenSilent (iframe) to obtain a token for Microsoft Graph
128-
myMSALObj.acquireTokenSilent(applicationConfig.graphScopes).then(function (accessToken) {
129-
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
130-
}, function (error) {
131-
//Call acquireTokenRedirect in case of acquireToken Failure
132-
if (error.indexOf("consent_required") !== -1 || error.indexOf("interaction_required") !== -1) {
133-
myMSALObj.acquireTokenRedirect(applicationConfig.graphScopes);
134-
}
135-
});
141+
}
142+
else {
143+
document.getElementById("SignIn").onclick = function () {
144+
myMSALObj.loginRedirect(applicationConfig.graphScopes);
145+
};
146+
147+
if (myMSALObj.getUser() && !myMSALObj.isCallback(window.location.hash)) {// avoid duplicate code execution on page load in case of iframe and popup window.
148+
showWelcomeMessage();
149+
acquireTokenRedirectAndCallMSGraph();
136150
}
137-
138-
</script>
151+
}
152+
</script>
139153
</body>
140154
</html>

Diff for: ‎server.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ var morgan = require('morgan');
99
var path = require('path');
1010

1111
// Initialize variables.
12-
var port = 1530; // process.env.PORT || 30662;
12+
var port = 30662; // process.env.PORT || 30662;
1313

1414
// Configure morgan module to log all requests.
1515
app.use(morgan('dev'));

0 commit comments

Comments
 (0)