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

Commit f0c7ea0

Browse files
author
Prithvi Kanherkar
committed
Refactored browser detection to be more concise, reflect patterns better
Refactored signIn and acquireToken calls to be more concise, kept the function signature more similar to the quickstart that has been released.
1 parent 2f88dc2 commit f0c7ea0

File tree

1 file changed

+67
-73
lines changed

1 file changed

+67
-73
lines changed

‎JavaScriptSPA/index.html‎

Lines changed: 67 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -14,43 +14,70 @@ <h4 id="WelcomeMessage"></h4>
1414
<pre id="json"></pre>
1515

1616
<script>
17+
// Browser check variables
18+
var ua = window.navigator.userAgent;
19+
var msie = ua.indexOf('MSIE ');
20+
var msie11 = ua.indexOf('Trident/');
21+
var msedge = ua.indexOf('Edge/');
22+
var isIE = msie > 0 || msie11 > 0;
23+
var isEdge = msedge > 0;
24+
1725
var applicationConfig = {
18-
clientID: "Enter_the_Application_Id_here", //This is your client ID
26+
clientID: "0813e1d1-ad72-46a9-8665-399bba48c201", //This is your client ID
1927
graphScopes: ["user.read"],
2028
graphEndpoint: "https://graph.microsoft.com/v1.0/me"
2129
};
2230

2331
//Pass null for default authority (https://login.microsoftonline.com/common) and tokenReceivedCallback if using popup apis
24-
var myMSALObj = new Msal.UserAgentApplication(applicationConfig.clientID, null, null);
25-
26-
// Browser check variables
27-
var ua = window.navigator.userAgent;
28-
var msie = ua.indexOf('MSIE ');
29-
var msie11 = ua.indexOf('Trident/');
30-
var msedge = ua.indexOf('Edge/');
31-
32+
var myMSALObj = new Msal.UserAgentApplication(applicationConfig.clientID, null, null, {storeAuthStateInCookie:true});
33+
3234
function signIn() {
33-
if (msie > 0 || msie11 > 0 || msedge > 0) {
34-
// NOTE: IE/Edge detected - use redirect
35-
signInRedirect();
36-
} else {
37-
// NOTE: Not using IE browser - use popup
38-
signInPopup();
39-
}
35+
myMSALObj.loginPopup(applicationConfig.graphScopes).then(function (idToken) {
36+
//Login Success
37+
showWelcomeMessage();
38+
acquireTokenAndCallMSGraph();
39+
}, function (error) {
40+
console.log(error);
41+
});
4042
}
4143

4244
function signOut() {
4345
myMSALObj.logout();
4446
}
4547

4648
function acquireTokenAndCallMSGraph() {
47-
if (msie > 0 || msie11 > 0 || msedge > 0) {
48-
// NOTE: only for IE and Edge browsers
49-
acquireTokenRedirectAndCallMSGraph(myMSALObj);
50-
} else {
51-
// NOTE: for all other non-IE/Edge browsers (i.e. Chrome, Firefox, etc.)
52-
acquireTokenPopupAndCallMSGraph();
53-
}
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+
if (isIE) {
54+
alert("IE");
55+
// NOTE: only for IE browsers
56+
// Call acquireTokenRedirect in case of acquireToken Failure
57+
if (error.indexOf("consent_required") !== -1 || error.indexOf("interaction_required") !== -1) {
58+
myMSALObj.acquireTokenRedirect(applicationConfig.graphScopes);
59+
}
60+
}
61+
// Uncomment this if you are testing in Edge InPrivate, or delete
62+
/**
63+
else if(msedge > 0) {
64+
// NOTE: only for Edge InPrivate browsers
65+
// Call acquireTokenRedirect in case of acquireToken Failure
66+
if (error.indexOf("consent_required") !== -1 || error.indexOf("interaction_required") !== -1) {
67+
myMSALObj.acquireTokenRedirect(applicationConfig.graphScopes);
68+
}
69+
}
70+
**/
71+
else {
72+
// Call acquireTokenPopup (popup window) in case of acquireToken Failure
73+
if (error.indexOf("consent_required") !== -1 || error.indexOf("interaction_required") !== -1) {
74+
myMSALObj.acquireTokenPopup(applicationConfig.graphScopes).then(function (accessToken) {
75+
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
76+
}, function (error) {
77+
});
78+
}
79+
}
80+
});
5481
}
5582

5683
function callMSGraph(theUrl, accessToken, callback) {
@@ -77,60 +104,27 @@ <h4 id="WelcomeMessage"></h4>
77104
loginbutton.innerHTML = 'Sign Out';
78105
loginbutton.setAttribute('onclick', 'signOut();');
79106
}
107+
108+
// Remove this code if IE is not used
109+
if(isIE) {
110+
document.getElementById("SignIn").onclick = function() {
111+
myMSALObj.loginRedirect(applicationConfig.graphScopes);
112+
};
113+
}
114+
// Uncomment this if you are testing in Edge InPrivate, or delete
115+
/**
116+
else if(isEdge) {
117+
document.getElementById("SignIn").onclick = function () {
118+
myMSALObj.loginRedirect(applicationConfig.graphScopes);
119+
};
120+
}
121+
**/
80122

81123
if (myMSALObj.getUser() && !myMSALObj.isCallback(window.location.hash)) {// avoid duplicate code execution on page load in case of iframe and popup window.
82-
showWelcomeMessage();
124+
showWelcomeMessage();
83125
acquireTokenAndCallMSGraph();
84126
}
85-
86-
/* POPUP HELPER FUNCTIONS BELOW */
87-
88-
// If not using IE or Edge InPrivate browser, you may replace the contents of signIn() with the contents of signInPopup()
89-
function signInPopup() {
90-
myMSALObj.loginPopup(applicationConfig.graphScopes).then(function (idToken) {
91-
//Login Success
92-
showWelcomeMessage();
93-
acquireTokenAndCallMSGraph();
94-
}, function (error) {
95-
console.log(error);
96-
});
97-
}
98-
99-
// If not using IE or Edge InPrivate browser, you may replace the contents of acquireTokenAndCallMSGraph() with the contents of acquireTokenPopupAndCallMSGraph()
100-
function acquireTokenPopupAndCallMSGraph() {
101-
//Call acquireTokenSilent (iframe) to obtain a token for Microsoft Graph
102-
myMSALObj.acquireTokenSilent(applicationConfig.graphScopes).then(function (accessToken) {
103-
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
104-
}, function (error) {
105-
//Call acquireTokenPopup (popup window) in case of acquireToken Failure
106-
if (error.indexOf("consent_required") !== -1 || error.indexOf("interaction_required") !== -1) {
107-
myMSALObj.acquireTokenPopup(applicationConfig.graphScopes).then(function (accessToken) {
108-
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
109-
}, function (error) {
110-
});
111-
}
112-
});
113-
}
114-
115-
/* IE/EDGE-ONLY - REDIRECT HELPER FUNCTIONS BELOW */
116-
117-
// NOTE: Below functions are for testing with IE/Edge browsers - can be removed if not testing with these browsers
118-
function signInRedirect() {
119-
myMSALObj.loginRedirect(applicationConfig.graphScopes);
120-
}
121-
122-
function acquireTokenRedirectAndCallMSGraph(myMSALObj) {
123-
//Call acquireTokenSilent (iframe) to obtain a token for Microsoft Graph
124-
myMSALObj.acquireTokenSilent(applicationConfig.graphScopes).then(function (accessToken) {
125-
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
126-
}, function (error) {
127-
//Call acquireTokenRedirect in case of acquireToken Failure
128-
if (error.indexOf("consent_required") !== -1 || error.indexOf("interaction_required") !== -1) {
129-
myMSALObj.acquireTokenRedirect(applicationConfig.graphScopes);
130-
}
131-
});
132-
}
133-
127+
134128
</script>
135129
</body>
136130
</html>

0 commit comments

Comments
 (0)