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

Commit 93d05ef

Browse files
committed
add login type
1 parent c933c29 commit 93d05ef

File tree

5 files changed

+70
-57
lines changed

5 files changed

+70
-57
lines changed

JavaScriptSPA/index.html

Lines changed: 51 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<title>Quickstart for MSAL JS</title>
55
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>
6-
<script src="/msal-0.9.0.min.js"></script>
6+
<script src="/msal-1.0.0-preview.min.js"></script>
77
<link rel="stylesheet" type="text/css" href="/style.css">
88
</head>
99

@@ -18,17 +18,29 @@
1818
</div>
1919
</div>
2020
<script>
21-
var applicationConfig = {
22-
clientID: "245e9392-c666-4d51-8f8a-bfd9e55b2456",
23-
authority: "https://login.microsoftonline.com/common",
24-
graphScopes: ["user.read", "Mail.Send"],
25-
graphEndpoint: "https://graph.microsoft.com/v1.0/me"
26-
};
2721

28-
var config = {
22+
// Browser check variables
23+
var ua = window.navigator.userAgent;
24+
var msie = ua.indexOf('MSIE ');
25+
var msie11 = ua.indexOf('Trident/');
26+
var msedge = ua.indexOf('Edge/');
27+
var isIE = msie > 0 || msie11 > 0;
28+
var isEdge = msedge > 0;
29+
//If you support IE, our recommendation is that you sign-in using Redirect APIs
30+
//If you as a developer are testing using Edge InPrivate mode, please add "isEdge" to the if check
31+
32+
var loginType; // can change this to default an experience outside browser use
33+
if (!isIE) {
34+
loginType = "POPUP";
35+
}
36+
else {
37+
loginType = "REDIRECT";
38+
}
39+
40+
var msalConfig = {
2941
auth: {
30-
clientId: applicationConfig.clientID,
31-
authority: applicationConfig.authority,
42+
clientId: "245e9392-c666-4d51-8f8a-bfd9e55b2456",
43+
authority: "https://login.microsoftonline.com/common",
3244
validateAuthority: true
3345
},
3446
cache: {
@@ -37,13 +49,24 @@
3749
}
3850
};
3951

40-
var myMSALObj = new Msal.UserAgentApplication(config);
52+
var loginRequest = {
53+
scopes: ["user.read"]
54+
};
55+
56+
var graphConfig = {
57+
graphScopes: ["Mail.Read", "Mail.Send"],
58+
graphMeEndpoint: "https://graph.microsoft.com/v1.0/me"
59+
};
60+
61+
var tokenRequest = {
62+
scopes: graphConfig.graphScopes
63+
};
64+
65+
var myMSALObj = new Msal.UserAgentApplication(msalConfig);
66+
// Register Callbacks for redirect flow
4167
myMSALObj.handleRedirectCallbacks(acquireTokenRedirectCallBack, acquireTokenErrorRedirectCallBack);
4268

4369
function signIn() {
44-
let loginRequest = {
45-
scopes: applicationConfig.graphScopes
46-
};
4770
myMSALObj.loginPopup(loginRequest).then(function (loginResponse) {
4871
//Login Success
4972
showWelcomeMessage();
@@ -59,18 +82,15 @@
5982

6083
function acquireTokenPopupAndCallMSGraph() {
6184
//Call acquireTokenSilent (iframe) to obtain a token for Microsoft Graph
62-
let tokenRequest = {
63-
scopes: applicationConfig.graphScopes
64-
};
85+
6586
myMSALObj.acquireTokenSilent(tokenRequest).then(function (tokenResponse) {
66-
console.log(tokenResponse.scopes);
67-
callMSGraph(applicationConfig.graphEndpoint, tokenResponse.accessToken, graphAPICallback);
87+
callMSGraph(graphConfig.graphMeEndpoint, tokenResponse.accessToken, graphAPICallback);
6888
}).catch(function (error) {
69-
console.log(error);
89+
console.log(error.errorMessage);
7090
// Call acquireTokenPopup (popup window) in case of acquireTokenSilent failure due to consent or interaction required ONLY
7191
if (requiresInteraction(error.errorMessage)) {
7292
myMSALObj.acquireTokenPopup(tokenRequest).then(function (tokenResponse) {
73-
callMSGraph(applicationConfig.graphEndpoint, tokenResponse.accessToken, graphAPICallback);
93+
callMSGraph(graphConfig.graphMeEndpoint, tokenResponse.accessToken, graphAPICallback);
7494
}).catch(function (error) {
7595
console.log(error);
7696
});
@@ -96,7 +116,7 @@
96116

97117
function showWelcomeMessage() {
98118
var divWelcome = document.getElementById('WelcomeMessage');
99-
divWelcome.innerHTML = 'Welcome ' + myMSALObj.getAccount().userName + "to Microsoft Graph API";
119+
divWelcome.innerHTML = "Welcome " + myMSALObj.getAccount().userName + " to Microsoft Graph API";
100120
var loginbutton = document.getElementById('SignIn');
101121
loginbutton.innerHTML = 'Sign Out';
102122
loginbutton.setAttribute('onclick', 'signOut();');
@@ -106,11 +126,8 @@
106126
// This function can be removed if you do not need to support IE
107127
function acquireTokenRedirectAndCallMSGraph() {
108128
//Call acquireTokenSilent (iframe) to obtain a token for Microsoft Graph
109-
let tokenRequest = {
110-
scopes: applicationConfig.graphScopes
111-
};
112129
myMSALObj.acquireTokenSilent(tokenRequest).then(function (tokenResponse) {
113-
callMSGraph(applicationConfig.graphEndpoint, tokenResponse.accessToken, graphAPICallback);
130+
callMSGraph(graphConfig.graphMeEndpoint, tokenResponse.accessToken, graphAPICallback);
114131
}).catch(function (error) {
115132
console.log(error);
116133
//Call acquireTokenRedirect in case of acquireToken Failure
@@ -122,7 +139,7 @@
122139

123140
function acquireTokenRedirectCallBack(response) {
124141
if (response.tokenType === "access_token") {
125-
callMSGraph(applicationConfig.graphEndpoint, response.accessToken, graphAPICallback);
142+
callMSGraph(graphConfig.graphMeEndpoint, response.accessToken, graphAPICallback);
126143
} else {
127144
console.log("token type is:" + response.tokenType);
128145
}
@@ -133,33 +150,26 @@
133150
}
134151

135152
function requiresInteraction(errorMessage) {
153+
console.log(errorMessage)
136154
if (!errorMessage || !errorMessage.length) {
137155
return false;
138156
}
139157
return errorMessage.indexOf("consent_required") !== -1 ||
140158
errorMessage.indexOf("interaction_required") !== -1 ||
141159
errorMessage.indexOf("login_required") !== -1;
142160
}
143-
// Browser check variables
144-
var ua = window.navigator.userAgent;
145-
var msie = ua.indexOf('MSIE ');
146-
var msie11 = ua.indexOf('Trident/');
147-
var msedge = ua.indexOf('Edge/');
148-
var isIE = msie > 0 || msie11 > 0;
149-
var isEdge = msedge > 0;
150161

151-
//If you support IE, our recommendation is that you sign-in using Redirect APIs
152-
//If you as a developer are testing using Edge InPrivate mode, please add "isEdge" to the if check
153-
if (!isIE) {
162+
// runs on page load, change config to try different login types to see what is best for your application
163+
if (loginType === 'POPUP') {
154164
if (myMSALObj.getAccount()) {// avoid duplicate code execution on page load in case of iframe and popup window.
155165
showWelcomeMessage();
156166
acquireTokenPopupAndCallMSGraph();
157167
}
158168
}
159-
else {
169+
else if (loginType === 'REDIRECT') {
160170
document.getElementById("SignIn").onclick = function () {
161171
let redirectTokenRequest = {
162-
scopes: applicationConfig.graphScopes
172+
scopes: graphConfig.graphMeEndpoint
163173
};
164174
myMSALObj.loginRedirect(redirectTokenRequest);
165175
};
@@ -168,6 +178,8 @@
168178
showWelcomeMessage();
169179
acquireTokenRedirectAndCallMSGraph();
170180
}
181+
} else {
182+
console.error('Please choose a valid login type');
171183
}
172184
</script>
173185
</body>

JavaScriptSPA/msal-0.9.0.min.js

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

JavaScriptSPA/msal-1.0.0-preview.min.js

Lines changed: 17 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

JavaScriptSPA/style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ body {
1010

1111
.leftContainer {
1212
color: white;
13-
font-size: 50px;
13+
font-size: 46px;
1414
font-weight: 200;
1515
text-align: center;
1616
}

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"dependencies": {
66
"express": "^4.12.3",
77
"morgan": "^1.5.2",
8+
"msal": "^1.0.0-preview.0",
89
"path": "^0.11.14"
910
}
1011
}

0 commit comments

Comments
 (0)