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

Commit 2f88dc2

Browse files
author
Prithvi Kanherkar
committed
Adding browser detection functionality
Adding functionality to detect whether browser is IE or Edge. If it is detected to be one of those broswers, it will force loginRedirect, otherwise it will use loginPopup.
1 parent c4b04b6 commit 2f88dc2

File tree

1 file changed

+75
-36
lines changed

1 file changed

+75
-36
lines changed

‎JavaScriptSPA/index.html‎

Lines changed: 75 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,16 @@
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>
1611
<h2>Welcome to MSAL.js Quickstart</h2><br/>
1712
<h4 id="WelcomeMessage"></h4>
1813
<button id="SignIn" onclick="signIn()">Sign In</button><br/><br/>
19-
<table id="graphData"></table>
14+
<pre id="json"></pre>
2015

2116
<script>
2217
var applicationConfig = {
@@ -28,33 +23,34 @@ <h4 id="WelcomeMessage"></h4>
2823
//Pass null for default authority (https://login.microsoftonline.com/common) and tokenReceivedCallback if using popup apis
2924
var myMSALObj = new Msal.UserAgentApplication(applicationConfig.clientID, null, null);
3025

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+
3132
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-
});
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+
}
3940
}
40-
41+
4142
function signOut() {
4243
myMSALObj.logout();
4344
}
4445

4546
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-
});
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+
}
5854
}
5955

6056
function callMSGraph(theUrl, accessToken, callback) {
@@ -71,18 +67,12 @@ <h4 id="WelcomeMessage"></h4>
7167
function graphAPICallback(data) {
7268
//Display user data on DOM
7369
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-
});
70+
document.getElementById("json").innerHTML = JSON.stringify(data, null, 2);
8171
}
8272

8373
function showWelcomeMessage() {
8474
var divWelcome = document.getElementById('WelcomeMessage');
85-
divWelcome.innerHTML += 'Welcome ' + myMSALObj.getUser().name;
75+
divWelcome.innerHTML += 'Welcome ' + myMSALObj.getUser().name + " to Microsoft Graph API!!";
8676
var loginbutton = document.getElementById('SignIn');
8777
loginbutton.innerHTML = 'Sign Out';
8878
loginbutton.setAttribute('onclick', 'signOut();');
@@ -92,6 +82,55 @@ <h4 id="WelcomeMessage"></h4>
9282
showWelcomeMessage();
9383
acquireTokenAndCallMSGraph();
9484
}
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+
95134
</script>
96135
</body>
97136
</html>

0 commit comments

Comments
 (0)