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

Commit 749a067

Browse files
DarylThayilDarylThayil
committed
add qs for new code patterns
1 parent 66c3b08 commit 749a067

File tree

4 files changed

+138
-43
lines changed

4 files changed

+138
-43
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
package-lock.json

‎JavaScriptSPA/index.html‎

Lines changed: 76 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,20 @@
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="https://secure.aadcdn.microsoftonline-p.com/lib/0.2.4/js/msal.js"></script>
6+
<script src="/msal-0.9.0.min.js"></script>
7+
<link rel="stylesheet" type="text/css" href="/style.css">
78
</head>
89

910
<body>
10-
<h4 id="WelcomeMessage"></h4>
11-
<button id="SignIn" onclick="signIn()">Sign In</button>
12-
<br/><br/>
13-
<pre id="json"></pre>
14-
11+
<div class="container">
12+
<div class="leftContainer">
13+
<p id="WelcomeMessage">Welcome to the Microsoft Authentication Library For Javascript Quickstart</p>
14+
<button id="SignIn" onclick="signIn()">Sign In</button>
15+
</div>
16+
<div class="rightContainer">
17+
<pre id="json"></pre>
18+
</div>
19+
</div>
1520
<script>
1621
var applicationConfig = {
1722
clientID: 'Enter_the_Application_Id_here', //This is your client ID
@@ -20,15 +25,30 @@ <h4 id="WelcomeMessage"></h4>
2025
graphEndpoint: "https://graph.microsoft.com/v1.0/me"
2126
};
2227

23-
var myMSALObj = new Msal.UserAgentApplication(applicationConfig.clientID, applicationConfig.authority, acquireTokenRedirectCallBack,
24-
{storeAuthStateInCookie: true, cacheLocation: "localStorage"});
28+
var config = {
29+
auth: {
30+
clientId: applicationConfig.clientID,
31+
authority: applicationConfig.authority,
32+
validateAuthority: true
33+
},
34+
cache: {
35+
cacheLocation: "localStorage",
36+
storeAuthStateInCookie: true
37+
}
38+
};
39+
40+
var myMSALObj = new Msal.UserAgentApplication(config);
41+
myMSALObj.handleRedirectCallbacks(acquireTokenRedirectCallBack, acquireTokenErrorRedirectCallBack);
2542

2643
function signIn() {
27-
myMSALObj.loginPopup(applicationConfig.graphScopes).then(function (idToken) {
44+
let loginRequest = {
45+
scopes: applicationConfig.graphScopes
46+
};
47+
myMSALObj.loginPopup(loginRequest).then(function (loginResponse) {
2848
//Login Success
2949
showWelcomeMessage();
3050
acquireTokenPopupAndCallMSGraph();
31-
}, function (error) {
51+
}).catch(function (error) {
3252
console.log(error);
3353
});
3454
}
@@ -37,17 +57,21 @@ <h4 id="WelcomeMessage"></h4>
3757
myMSALObj.logout();
3858
}
3959

40-
function acquireTokenPopupAndCallMSGraph() {
60+
function acquireTokenPopupAndCallMSGraph() {
4161
//Call acquireTokenSilent (iframe) to obtain a token for Microsoft Graph
42-
myMSALObj.acquireTokenSilent(applicationConfig.graphScopes).then(function (accessToken) {
43-
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
44-
}, function (error) {
62+
let tokenRequest = {
63+
scopes: applicationConfig.graphScopes
64+
};
65+
myMSALObj.acquireTokenSilent(tokenRequest).then(function (tokenResponse) {
66+
console.log(tokenResponse.scopes);
67+
callMSGraph(applicationConfig.graphEndpoint, tokenResponse.accessToken, graphAPICallback);
68+
}).catch(function (error) {
4569
console.log(error);
4670
// Call acquireTokenPopup (popup window) in case of acquireTokenSilent failure due to consent or interaction required ONLY
47-
if (error.indexOf("consent_required") !== -1 || error.indexOf("interaction_required") !== -1 || error.indexOf("login_required") !== -1) {
48-
myMSALObj.acquireTokenPopup(applicationConfig.graphScopes).then(function (accessToken) {
49-
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
50-
}, function (error) {
71+
if (error.errorMessage.indexOf("consent_required") !== -1 || error.errorMessage.indexOf("interaction_required") !== -1 || error.errorMessage.indexOf("login_required") !== -1) {
72+
myMSALObj.acquireTokenPopup(tokenRequest).then(function (tokenResponse) {
73+
callMSGraph(applicationConfig.graphEndpoint, tokenResponse.accessToken, graphAPICallback);
74+
}).catch(function (error) {
5175
console.log(error);
5276
});
5377
}
@@ -65,46 +89,52 @@ <h4 id="WelcomeMessage"></h4>
6589
xmlHttp.send();
6690
}
6791

92+
6893
function graphAPICallback(data) {
69-
//Display user data on DOM
70-
var divWelcome = document.getElementById('WelcomeMessage');
71-
divWelcome.innerHTML += " to Microsoft Graph API!!";
72-
document.getElementById("json").innerHTML = JSON.stringify(data, null, 2);
94+
document.getElementById("json").innerHTML = JSON.stringify(data, null, 2);
7395
}
7496

7597
function showWelcomeMessage() {
7698
var divWelcome = document.getElementById('WelcomeMessage');
77-
divWelcome.innerHTML += 'Welcome ' + myMSALObj.getUser().name;
99+
divWelcome.innerHTML = 'Welcome ' + myMSALObj.getAccount().userName + "to Microsoft Graph API";
100+
console.log(myMSALObj.getAccount());
78101
var loginbutton = document.getElementById('SignIn');
79102
loginbutton.innerHTML = 'Sign Out';
80103
loginbutton.setAttribute('onclick', 'signOut();');
81104
}
82105

83-
// This function can be removed if you do not need to support IE
84-
function acquireTokenRedirectAndCallMSGraph() {
106+
107+
// This function can be removed if you do not need to support IE
108+
function acquireTokenRedirectAndCallMSGraph() {
85109
//Call acquireTokenSilent (iframe) to obtain a token for Microsoft Graph
86-
myMSALObj.acquireTokenSilent(applicationConfig.graphScopes).then(function (accessToken) {
87-
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
88-
}, function (error) {
110+
let tokenRequest = {
111+
scopes: applicationConfig.graphScopes
112+
};
113+
myMSALObj.acquireTokenSilent(tokenRequest).then(function (tokenResponse) {
114+
console.log(tokenResponse.scopes);
115+
callMSGraph(applicationConfig.graphEndpoint, tokenResponse.accessToken, graphAPICallback);
116+
}).catch(function (error) {
89117
console.log(error);
90118
//Call acquireTokenRedirect in case of acquireToken Failure
91-
if (error.indexOf("consent_required") !== -1 || error.indexOf("interaction_required") !== -1 || error.indexOf("login_required") !== -1) {
92-
myMSALObj.acquireTokenRedirect(applicationConfig.graphScopes);
119+
if (error.errorMessage.indexOf("consent_required") !== -1 || error.errorMessage.indexOf("interaction_required") !== -1 || error.errorMessage.indexOf("login_required") !== -1) {
120+
myMSALObj.acquireTokenRedirect(tokenRequest);
93121
}
94-
});
122+
});
95123
}
96124

97-
function acquireTokenRedirectCallBack(errorDesc, token, error, tokenType)
98-
{
99-
if(tokenType === "access_token")
100-
{
101-
callMSGraph(applicationConfig.graphEndpoint, token, graphAPICallback);
102-
} else {
103-
console.log("token type is:"+tokenType);
104-
}
125+
function acquireTokenRedirectCallBack(response) {
126+
if (response.tokenType === "access_token") {
127+
callMSGraph(applicationConfig.graphEndpoint, response.accessToken, graphAPICallback);
128+
} else {
129+
console.log("token type is:" + response.tokenType);
130+
}
131+
}
105132

133+
function acquireTokenErrorRedirectCallBack(error) {
134+
console.log(error);
106135
}
107136

137+
108138
// Browser check variables
109139
var ua = window.navigator.userAgent;
110140
var msie = ua.indexOf('MSIE ');
@@ -114,19 +144,22 @@ <h4 id="WelcomeMessage"></h4>
114144
var isEdge = msedge > 0;
115145

116146
//If you support IE, our recommendation is that you sign-in using Redirect APIs
117-
//If you as a developer are testing using Edge InPrivate mode, please add "isEdge" to the if check
147+
//If you as a developer are testing using Edge InPrivate mode, please add "isEdge" to the if check
118148
if (!isIE) {
119-
if (myMSALObj.getUser()) {// avoid duplicate code execution on page load in case of iframe and popup window.
149+
if (myMSALObj.getAccount()) {// avoid duplicate code execution on page load in case of iframe and popup window.
120150
showWelcomeMessage();
121151
acquireTokenPopupAndCallMSGraph();
122152
}
123153
}
124154
else {
125155
document.getElementById("SignIn").onclick = function () {
126-
myMSALObj.loginRedirect(applicationConfig.graphScopes);
156+
let tokenRequest = {
157+
scopes: applicationConfig.graphScopes
158+
};
159+
myMSALObj.loginRedirect(tokenRequest);
127160
};
128161

129-
if (myMSALObj.getUser() && !myMSALObj.isCallback(window.location.hash)) {// avoid duplicate code execution on page load in case of iframe and popup window.
162+
if (myMSALObj.getAccount() && !myMSALObj.isCallback(window.location.hash)) {// avoid duplicate code execution on page load in case of iframe and popup window.
130163
showWelcomeMessage();
131164
acquireTokenRedirectAndCallMSGraph();
132165
}

‎JavaScriptSPA/msal-0.9.0.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: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
body {
2+
height: 100%;
3+
background-color: #2b5797; /* For browsers that do not support gradients */
4+
background-image: linear-gradient(-90deg, #2b5797, #603cba); /* Standard syntax (must be last) */
5+
}
6+
.container {
7+
width: 100%;
8+
min-height: 600px;
9+
}
10+
11+
.leftContainer {
12+
color: white;
13+
font-size: 50px;
14+
font-weight: 200;
15+
text-align: center;
16+
}
17+
18+
.leftContainer, .rightContainer {
19+
float: left;
20+
width: 100%;
21+
max-width: 800px;
22+
}
23+
24+
#SignIn {
25+
height: 50px;
26+
width: 150px;
27+
background-color: #00A4EF;
28+
padding: 14px 24px;
29+
border: 0 none;
30+
font-weight: 700;
31+
letter-spacing: 1px;
32+
text-transform: uppercase;
33+
color: white;
34+
}
35+
#json {
36+
background-color: white;
37+
opacity: 0.85;
38+
min-height: 600px;
39+
width: 100%;
40+
display: block;
41+
font-size: 14px;
42+
overflow: scroll;
43+
}

0 commit comments

Comments
 (0)