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

Commit c4b04b6

Browse files
navyasricnavyasric
committed
New quickstart with login popup and redirect
1 parent aa36a74 commit c4b04b6

File tree

4 files changed

+193
-201
lines changed

4 files changed

+193
-201
lines changed

‎JavaScriptSPA/app.js‎

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

‎JavaScriptSPA/index.html‎

Lines changed: 92 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,97 @@
1-
<!DOCTYPE html>
1+
<!DOCTYPE html>
22
<html>
33
<head>
4-
<!-- bootstrap reference used for styling the page -->
5-
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
6-
<title>JavaScript SPA Guided Setup</title>
4+
<title>Quickstart for MSAL JS</title>
5+
<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>
713
</head>
8-
<body style="margin: 40px">
9-
<button id="callGraphButton" type="button" class="btn btn-primary" onclick="callGraphApi()">Call Microsoft Graph API</button>
10-
<div id="errorMessage" class="text-danger"></div>
11-
<div class="hidden">
12-
<h3>Graph API Call Response</h3>
13-
<pre class="well" id="graphResponse"></pre>
14-
</div>
15-
<div class="hidden">
16-
<h3>Access Token</h3>
17-
<pre class="well" id="accessToken"></pre>
18-
</div>
19-
<div class="hidden">
20-
<h3>ID Token Claims</h3>
21-
<pre class="well" id="userInfo"></pre>
22-
</div>
23-
<button id="signOutButton" type="button" class="btn btn-primary hidden" onclick="signOut()">Sign out</button>
24-
25-
<!-- This app uses cdn to reference msal.js (recommended).
26-
You can also download it from: https://github.com/AzureAD/microsoft-authentication-library-for-js -->
27-
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/0.2.3/js/msal.min.js"></script>
28-
<!--<script type="text/javascript" src="msal.js"></script>-->
29-
<script type="text/javascript" src="msalconfig.js"></script>
30-
31-
<!-- The 'bluebird' and 'fetch' references below are required if you need to run this application on Internet Explorer -->
32-
<script src="//cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>
33-
<script src="//cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
34-
35-
<script type="text/javascript" src="app.js"></script>
14+
15+
<body>
16+
<h2>Welcome to MSAL.js Quickstart</h2><br/>
17+
<h4 id="WelcomeMessage"></h4>
18+
<button id="SignIn" onclick="signIn()">Sign In</button><br/><br/>
19+
<table id="graphData"></table>
20+
21+
<script>
22+
var applicationConfig = {
23+
clientID: "Enter_the_Application_Id_here", //This is your client ID
24+
graphScopes: ["user.read"],
25+
graphEndpoint: "https://graph.microsoft.com/v1.0/me"
26+
};
27+
28+
//Pass null for default authority (https://login.microsoftonline.com/common) and tokenReceivedCallback if using popup apis
29+
var myMSALObj = new Msal.UserAgentApplication(applicationConfig.clientID, null, null);
30+
31+
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+
});
39+
}
40+
41+
function signOut() {
42+
myMSALObj.logout();
43+
}
44+
45+
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+
});
58+
}
59+
60+
function callMSGraph(theUrl, accessToken, callback) {
61+
var xmlHttp = new XMLHttpRequest();
62+
xmlHttp.onreadystatechange = function () {
63+
if (this.readyState == 4 && this.status == 200)
64+
callback(JSON.parse(this.responseText));
65+
}
66+
xmlHttp.open("GET", theUrl, true); // true for asynchronous
67+
xmlHttp.setRequestHeader('Authorization', 'Bearer ' + accessToken);
68+
xmlHttp.send();
69+
}
70+
71+
function graphAPICallback(data) {
72+
//Display user data on DOM
73+
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+
});
81+
}
82+
83+
function showWelcomeMessage() {
84+
var divWelcome = document.getElementById('WelcomeMessage');
85+
divWelcome.innerHTML += 'Welcome ' + myMSALObj.getUser().name;
86+
var loginbutton = document.getElementById('SignIn');
87+
loginbutton.innerHTML = 'Sign Out';
88+
loginbutton.setAttribute('onclick', 'signOut();');
89+
}
90+
91+
if (myMSALObj.getUser() && !myMSALObj.isCallback(window.location.hash)) {// avoid duplicate code execution on page load in case of iframe and popup window.
92+
showWelcomeMessage();
93+
acquireTokenAndCallMSGraph();
94+
}
95+
</script>
3696
</body>
3797
</html>

‎JavaScriptSPA/index_login_redirect.html‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Quickstart for MSAL JS</title>
5+
<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>
13+
</head>
14+
15+
<body>
16+
<h2>Welcome to MSAL.js Quickstart</h2><br/>
17+
<h4 id="WelcomeMessage"></h4>
18+
<button id="SignIn" onclick="signIn()">Sign In</button><br /><br />
19+
<table id="graphData"></table>
20+
21+
<script>
22+
var applicationConfig = {
23+
clientID: 'Enter_the_Application_Id_here', //This is your client ID
24+
graphScopes: ["user.read"],
25+
graphEndpoint: "https://graph.microsoft.com/v1.0/me"
26+
};
27+
28+
//pass null for default authority (https://login.microsoftonline.com/common) and tokenReceivedCallback if using popup api's'
29+
var myMSALObj = new Msal.UserAgentApplication(applicationConfig.clientID, null, userSignedIn);
30+
31+
function signIn() {
32+
myMSALObj.loginRedirect(applicationConfig.graphScopes);
33+
}
34+
35+
function signOut() {
36+
myMSALObj.logout();
37+
}
38+
39+
function userSignedIn(errorDesc, token, error, tokenType) {
40+
//In redirect mode, use this inside callback to access an instance of userAgentApplication
41+
var self = this;
42+
if (token) {
43+
if (tokenType === "id_token") {
44+
showWelcomeMessage(self);
45+
}
46+
}
47+
else if (errorDesc || error) {
48+
console.log(error + ' : ' + errorDesc);
49+
}
50+
}
51+
52+
function acquireTokenAndCallMSGraph(myMSALObj) {
53+
//Call acquireTokenSilent (iframe) to obtain a token for Microsoft Graph
54+
myMSALObj.acquireTokenSilent(applicationConfig.graphScopes).then(function (accessToken) {
55+
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
56+
}, function (error) {
57+
//Call acquireTokenRedirect in case of acquireToken Failure
58+
if (error.indexOf("consent_required") !== -1 || error.indexOf("interaction_required") !== -1) {
59+
myMSALObj.acquireTokenRedirect(applicationConfig.graphScopes);
60+
}
61+
});
62+
}
63+
64+
function callMSGraph(theUrl, accessToken, callback) {
65+
var xmlHttp = new XMLHttpRequest();
66+
xmlHttp.onreadystatechange = function () {
67+
if (this.readyState == 4 && this.status == 200)
68+
callback(JSON.parse(this.responseText));
69+
}
70+
xmlHttp.open("GET", theUrl, true); // true for asynchronous
71+
xmlHttp.setRequestHeader('Authorization', 'Bearer ' + accessToken);
72+
xmlHttp.send();
73+
}
74+
75+
function graphAPICallback(data) {
76+
//Display user data on DOM
77+
var divWelcome = document.getElementById('WelcomeMessage');
78+
divWelcome.innerHTML += " to Microsoft Graph API!!";
79+
$.each(data, function (key, value) {
80+
var tr = $('<tr></tr>');
81+
$('<td>' + '<i>' + key + '</i>' + '</td>').appendTo(tr);
82+
$('<td>' + value + '</td>').appendTo(tr);
83+
tr.appendTo('#graphData');
84+
});
85+
}
86+
87+
function showWelcomeMessage(myMSALObj) {
88+
var divWelcome = document.getElementById('WelcomeMessage');
89+
divWelcome.innerHTML = 'Welcome ' + myMSALObj.getUser().name;
90+
var loginbutton = document.getElementById('SignIn');
91+
loginbutton.innerHTML = 'Sign Out';
92+
loginbutton.setAttribute('onclick', 'signOut();');
93+
}
94+
95+
if (myMSALObj && myMSALObj.getUser() && !myMSALObj.loginInProgress() && !myMSALObj.isCallback(window.location.hash)) {// avoid duplicate code execution on page load in case of iframe and popup window.
96+
showWelcomeMessage(myMSALObj);
97+
acquireTokenAndCallMSGraph(myMSALObj);
98+
}
99+
</script>
100+
</body>
101+
</html>

0 commit comments

Comments
 (0)