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

Commit 92e7fda

Browse files
navyasricnavyasric
authored
Merge pull request #11 from Azure-Samples/qs
add qs for new code patterns
2 parents 94a7ac1 + 1fd81f5 commit 92e7fda

File tree

3 files changed

+112
-55
lines changed

3 files changed

+112
-55
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: 93 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,54 @@
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-1.0.0-preview.4.min.js"></script>
77
</head>
88

99
<body>
10-
<h4 id="WelcomeMessage"></h4>
11-
<button id="SignIn" onclick="signIn()">Sign In</button>
12-
<br/><br/>
13-
<pre id="json"></pre>
14-
10+
<div class="container">
11+
<div class="leftContainer">
12+
<p id="WelcomeMessage">Welcome to the Microsoft Authentication Library For Javascript Quickstart</p>
13+
<button id="SignIn" onclick="signIn()">Sign In</button>
14+
</div>
15+
<div class="rightContainer">
16+
<pre id="json"></pre>
17+
</div>
18+
</div>
1519
<script>
16-
var applicationConfig = {
17-
clientID: 'Enter_the_Application_Id_here', //This is your client ID
18-
authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here", //Default authority value is https://login.microsoftonline.com/common
19-
graphScopes: ["user.read"],
20-
graphEndpoint: "https://graph.microsoft.com/v1.0/me"
20+
var msalConfig = {
21+
auth: {
22+
clientId: 'Enter_the_Application_Id_here', //This is your client ID
23+
authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here" //This is your tenant info
24+
},
25+
cache: {
26+
cacheLocation: "localStorage",
27+
storeAuthStateInCookie: true
28+
}
29+
};
30+
31+
var graphConfig = {
32+
graphMeEndpoint: "https://graph.microsoft.com/v1.0/me"
2133
};
2234

23-
var myMSALObj = new Msal.UserAgentApplication(applicationConfig.clientID, applicationConfig.authority, acquireTokenRedirectCallBack,
24-
{storeAuthStateInCookie: true, cacheLocation: "localStorage"});
35+
// create a request object for login or token request calls
36+
// In scenarios with incremental consent, the request object can be further customized
37+
var requestObj = {
38+
scopes: ["user.read"]
39+
};
40+
41+
var myMSALObj = new Msal.UserAgentApplication(msalConfig);
42+
43+
// Register Callbacks for redirect flow
44+
myMSALObj.handleRedirectCallbacks(acquireTokenRedirectCallBack, acquireTokenErrorRedirectCallBack);
2545

2646
function signIn() {
27-
myMSALObj.loginPopup(applicationConfig.graphScopes).then(function (idToken) {
28-
//Login Success
47+
myMSALObj.loginPopup(requestObj).then(function (loginResponse) {
48+
//Successful login
2949
showWelcomeMessage();
50+
//Call MS Graph using the token in the response
3051
acquireTokenPopupAndCallMSGraph();
31-
}, function (error) {
52+
}).catch(function (error) {
53+
//Please check the console for errors
3254
console.log(error);
3355
});
3456
}
@@ -37,17 +59,18 @@ <h4 id="WelcomeMessage"></h4>
3759
myMSALObj.logout();
3860
}
3961

40-
function acquireTokenPopupAndCallMSGraph() {
41-
//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+
function acquireTokenPopupAndCallMSGraph() {
63+
//Always start with acquireTokenSilent to obtain a token in the signed in user from cache
64+
myMSALObj.acquireTokenSilent(requestObj).then(function (tokenResponse) {
65+
callMSGraph(graphConfig.graphMeEndpoint, tokenResponse.accessToken, graphAPICallback);
66+
}).catch(function (error) {
4567
console.log(error);
46-
// 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) {
68+
// Upon acquireTokenSilent failure (due to consent or interaction or login required ONLY)
69+
// Call acquireTokenPopup(popup window)
70+
if (requiresInteraction(error.errorCode)) {
71+
myMSALObj.acquireTokenPopup(requestObj).then(function (tokenResponse) {
72+
callMSGraph(graphConfig.graphMeEndpoint, tokenResponse.accessToken, graphAPICallback);
73+
}).catch(function (error) {
5174
console.log(error);
5275
});
5376
}
@@ -66,43 +89,51 @@ <h4 id="WelcomeMessage"></h4>
6689
}
6790

6891
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);
92+
document.getElementById("json").innerHTML = JSON.stringify(data, null, 2);
7393
}
7494

7595
function showWelcomeMessage() {
7696
var divWelcome = document.getElementById('WelcomeMessage');
77-
divWelcome.innerHTML += 'Welcome ' + myMSALObj.getUser().name;
97+
divWelcome.innerHTML = "Welcome " + myMSALObj.getAccount().userName + " to Microsoft Graph API";
7898
var loginbutton = document.getElementById('SignIn');
7999
loginbutton.innerHTML = 'Sign Out';
80100
loginbutton.setAttribute('onclick', 'signOut();');
81101
}
82102

83-
// This function can be removed if you do not need to support IE
84-
function acquireTokenRedirectAndCallMSGraph() {
85-
//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) {
103+
//This function can be removed if you do not need to support IE
104+
function acquireTokenRedirectAndCallMSGraph() {
105+
//Always start with acquireTokenSilent to obtain a token in the signed in user from cache
106+
myMSALObj.acquireTokenSilent(requestObj).then(function (tokenResponse) {
107+
callMSGraph(graphConfig.graphMeEndpoint, tokenResponse.accessToken, graphAPICallback);
108+
}).catch(function (error) {
89109
console.log(error);
90-
//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);
110+
// Upon acquireTokenSilent failure (due to consent or interaction or login required ONLY)
111+
// Call acquireTokenRedirect
112+
if (requiresInteraction(error.errorCode)) {
113+
myMSALObj.acquireTokenRedirect(requestObj);
93114
}
94-
});
115+
});
116+
}
117+
118+
function acquireTokenRedirectCallBack(response) {
119+
if (response.tokenType === "access_token") {
120+
callMSGraph(graphConfig.graphMeEndpoint, response.accessToken, graphAPICallback);
121+
} else {
122+
console.log("token type is:" + response.tokenType);
123+
}
95124
}
96125

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-
}
126+
function acquireTokenErrorRedirectCallBack(error) {
127+
console.log(error);
128+
}
105129

130+
function requiresInteraction(errorCode) {
131+
if (!errorCode || !errorCode.length) {
132+
return false;
133+
}
134+
return errorCode === "consent_required" ||
135+
errorCode === "interaction_required" ||
136+
errorCode === "login_required";
106137
}
107138

108139
// Browser check variables
@@ -114,22 +145,29 @@ <h4 id="WelcomeMessage"></h4>
114145
var isEdge = msedge > 0;
115146

116147
//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
118-
if (!isIE) {
119-
if (myMSALObj.getUser()) {// avoid duplicate code execution on page load in case of iframe and popup window.
148+
//If you as a developer are testing using Edge InPrivate mode, please add "isEdge" to the if check
149+
150+
// can change this to default an experience outside browser use
151+
var loginType = isIE ? "REDIRECT" : "POPUP";
152+
153+
// runs on page load, change config to try different login types to see what is best for your application
154+
if (loginType === 'POPUP') {
155+
if (myMSALObj.getAccount()) {// avoid duplicate code execution on page load in case of iframe and popup window.
120156
showWelcomeMessage();
121157
acquireTokenPopupAndCallMSGraph();
122158
}
123159
}
124-
else {
160+
else if (loginType === 'REDIRECT') {
125161
document.getElementById("SignIn").onclick = function () {
126-
myMSALObj.loginRedirect(applicationConfig.graphScopes);
162+
myMSALObj.loginRedirect(requestObj);
127163
};
128164

129-
if (myMSALObj.getUser() && !myMSALObj.isCallback(window.location.hash)) {// avoid duplicate code execution on page load in case of iframe and popup window.
165+
if (myMSALObj.getAccount() && !myMSALObj.isCallback(window.location.hash)) {// avoid duplicate code execution on page load in case of iframe and popup window.
130166
showWelcomeMessage();
131167
acquireTokenRedirectAndCallMSGraph();
132168
}
169+
} else {
170+
console.error('Please set a valid login type');
133171
}
134172
</script>
135173
</body>

‎JavaScriptSPA/msal-1.0.0-preview.4.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.

0 commit comments

Comments
 (0)