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

Commit fd3a05d

Browse files
andretmsandretms
committed
v2 - core files
1 parent 50f6ff1 commit fd3a05d

File tree

2 files changed

+205
-149
lines changed

2 files changed

+205
-149
lines changed

‎JavaScriptSPA/app.js‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+

2+
var graphAPIMeEndpoint = "https://graph.microsoft.com/v1.0/me";
3+
var graphAPIScopes = ["https://graph.microsoft.com/user.read"];
4+
5+
// Initialize application
6+
var userAgentApplication = new Msal.UserAgentApplication(msalconfig.clientID, null, displayUserInfo, {
7+
redirectUri: msalconfig.redirectUri
8+
});
9+
10+
//Previous version of msal uses redirect url via a property
11+
if (userAgentApplication.redirectUri) userAgentApplication.redirectUri = msalconfig.redirectUri;
12+
13+
var user = userAgentApplication.getUser();
14+
window.onload = function () {
15+
//Add support to display user info in case of reload of the page
16+
if (!userAgentApplication.isCallback(window.location.hash) && window.parent === window && !window.opener) {
17+
if (user) {
18+
displayUserInfo();
19+
}
20+
}
21+
22+
}
23+
24+
/**
25+
* Display the results from Web API call in json format
26+
*
27+
* @param {object} data - Results from API call
28+
* @param {object} token - The access token
29+
* @param {object} responseElement - HTML element to show the results
30+
* @param {object} showTokenElement - HTML element to show the RAW token
31+
*/
32+
function showAPIResponse(data, token, responseElement, showTokenElement) {
33+
console.log(data);
34+
responseElement.innerHTML = JSON.stringify(data, null, 4);
35+
if (showTokenElement) {
36+
showTokenElement.parentElement.classList.remove("hidden");
37+
showTokenElement.innerHTML = token;
38+
}
39+
}
40+
41+
/**
42+
* Show an error message in the page
43+
* @param {any} endpoint - the endpoint used for the error message
44+
* @param {any} error - the error string
45+
* @param {any} errorElement - the HTML element in the page to display the error
46+
*/
47+
function showError(endpoint, error, errorElement) {
48+
console.error(error);
49+
var formattedError = JSON.stringify(error, null, 4);
50+
if (formattedError.length < 3) {
51+
formattedError = error;
52+
}
53+
errorElement.innerHTML = "Error calling " + endpoint + ": " + formattedError;
54+
}
55+
56+
/**
57+
* Displays user information based on the information contained in the id token
58+
* And also calls the method to display the user profile via Microsoft Graph API
59+
*/
60+
function displayUserInfo() {
61+
var user = userAgentApplication.getUser();
62+
if (!user) {
63+
//If user is not signed in, then prompt user to sing-in via loginRedirect
64+
userAgentApplication.loginRedirect(graphAPIScopes);
65+
} else {
66+
// If user is already signed in, display the user info
67+
var userInfoElement = document.getElementById("userInfo");
68+
userInfoElement.parentElement.classList.remove("hidden");
69+
userInfoElement.innerHTML = JSON.stringify(user, null, 4);
70+
71+
// Show Sign-Out button
72+
document.getElementById("signOutButton").classList.remove("hidden");
73+
74+
//Now Call Graph API to show the user profile information
75+
callGraphAPI();
76+
}
77+
}
78+
79+
/**
80+
* Call the Microsoft Graph API and display the results on the page
81+
*/
82+
function callGraphAPI() {
83+
var user = userAgentApplication.getUser();
84+
if (user) {
85+
var responseElement = document.getElementById("graphResponse");
86+
responseElement.parentElement.classList.remove("hidden");
87+
responseElement.innerText = "Calling Graph ...";
88+
callWebApiWithScope(graphAPIMeEndpoint,
89+
graphAPIScopes,
90+
responseElement,
91+
document.getElementById("errorMessage"),
92+
document.getElementById("accessToken"));
93+
} else {
94+
showError(graphAPIMeEndpoint, "User has not signed-in", document.getElementById("errorMessage"));
95+
}
96+
}
97+
98+
/**
99+
* Call a Web API that requires scope, then display the response
100+
*
101+
* @param {string} endpoint - The Web API endpoint
102+
* @param {object} scope - An array containing the API scopes
103+
* @param {object} responseElement - HTML element used to display the results
104+
* @param {object} errorElement = HTML element used to display an error message
105+
* @param {object} showTokenElement = HTML element used to display the RAW access token
106+
*/
107+
function callWebApiWithScope(endpoint, scope, responseElement, errorElement, showTokenElement) {
108+
//Try to acquire the token silently first
109+
userAgentApplication.acquireTokenSilent(scope)
110+
.then(function (token) {
111+
//After the access token is acquired, call the Web API, sending the acquired token
112+
callWebApiWithToken(endpoint, token, responseElement, errorElement, showTokenElement);
113+
}, function (error) {
114+
//If the acquireTokenSilent fails, then acquire the token interactively via acquireTokenPopup
115+
if (error) {
116+
userAgentApplication.acquireTokenPopup(scope).then(function (token) {
117+
//After the access token is acquired, call the Web API, sending the acquired token
118+
callWebApiWithToken(endpoint, token, responseElement, errorElement, showTokenElement);
119+
},
120+
function (error) {
121+
showError(endpoint, error, errorElement);
122+
});
123+
} else {
124+
showError(endpoint, error, errorElement);
125+
}
126+
});
127+
}
128+
129+
/**
130+
* Call a Web API using an access token.
131+
*
132+
* @param {any} endpoint - Web API endpoint
133+
* @param {any} token - Access token
134+
* @param {object} responseElement - HTML element used to display the results
135+
* @param {object} errorElement = HTML element used to display an error message
136+
* @param {object} showTokenElement = HTML element used to display the RAW access token
137+
*/
138+
function callWebApiWithToken(endpoint, token, responseElement, errorElement, showTokenElement) {
139+
var headers = new Headers();
140+
var bearer = "Bearer " + token;
141+
headers.append("Authorization", bearer);
142+
var options = {
143+
method: "GET",
144+
headers: headers
145+
};
146+
147+
// Note that fetch API is not available in all browsers
148+
fetch(endpoint, options)
149+
.then(function (response) {
150+
var contentType = response.headers.get("content-type");
151+
if (response.status === 200 && contentType && contentType.indexOf("application/json") !== -1) {
152+
response.json()
153+
.then(function (data) {
154+
// Display response in the page
155+
showAPIResponse(data, token, responseElement, showTokenElement);
156+
})
157+
.catch(function (error) {
158+
showError(endpoint, error, errorElement);
159+
});
160+
} else {
161+
response.json()
162+
.then(function (data) {
163+
// Display response in the page
164+
showError(endpoint, data, errorElement);
165+
})
166+
.catch(function (error) {
167+
showError(endpoint, error, errorElement);
168+
});
169+
}
170+
})
171+
.catch(function (error) {
172+
showError(endpoint, error, errorElement);
173+
});
174+
}
175+
176+
/**
177+
* Sign-out the user
178+
*/
179+
function signOut() {
180+
userAgentApplication.logout();
181+
}

‎JavaScriptSPA/index.html‎

Lines changed: 24 additions & 149 deletions
Original file line numberDiff line numberDiff line change
@@ -5,155 +5,30 @@
55
<title>JavaScript SPA Guided Setup</title>
66
</head>
77
<body style="margin: 40px">
8-
<button id="callGraphButton" type="button" class="btn btn-primary" onclick="callGraphAPI()">Call Microsoft Graph API</button>
9-
<div id="errorMessage" class="text-danger"></div>
10-
<div class="hidden">
11-
<h3>Graph API Call Response</h3>
12-
<pre class="well" id="graphResponse"></pre>
13-
</div>
14-
<div class="hidden">
15-
<h3>Access Token</h3>
16-
<pre class="well" id="accessToken"></pre>
17-
</div>
18-
<div class="hidden">
19-
<h3>ID Token Claims</h3>
20-
<pre class="well" id="userInfo"></pre>
21-
</div>
22-
<button id="signOutButton" type="button" class="btn btn-primary hidden" onclick="signOut()">Sign out</button>
8+
<button id="callGraphButton" type="button" class="btn btn-primary" onclick="displayUserInfo()">Call Microsoft Graph API</button>
9+
<div id="errorMessage" class="text-danger"></div>
10+
<div class="hidden">
11+
<h3>Graph API Call Response</h3>
12+
<pre class="well" id="graphResponse"></pre>
13+
</div>
14+
<div class="hidden">
15+
<h3>Access Token</h3>
16+
<pre class="well" id="accessToken"></pre>
17+
</div>
18+
<div class="hidden">
19+
<h3>ID Token Claims</h3>
20+
<pre class="well" id="userInfo"></pre>
21+
</div>
22+
<button id="signOutButton" type="button" class="btn btn-primary hidden" onclick="signOut()">Sign out</button>
23+
24+
<script src="//secure.aadcdn.microsoftonline-p.com/lib/0.1.1/js/msal.min.js"></script>
25+
<script type="text/javascript" src="msalconfig.js"></script>
26+
27+
<!-- The 'bluebird' and 'fetch' references below are required if you need to run this application on Internet Explorer -->
28+
<script src="//cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>
29+
<script src="//cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
30+
31+
<script type="text/javascript" src="app.js"></script>
2332

24-
<script src="//secure.aadcdn.microsoftonline-p.com/lib/0.1.1/js/msal.min.js"></script>
25-
<script type="text/javascript" src="msalconfig.js"></script>
26-
27-
<!-- The 'bluebird' and 'fetch' references below are required if you need to run this application on Internet Explorer -->
28-
<script src="//cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>
29-
<script src="//cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
30-
<script type="text/javascript">
31-
32-
var graphAPIMeEndpoint = "https://graph.microsoft.com/v1.0/me";
33-
var graphAPIScopes = ["https://graph.microsoft.com/user.read"];
34-
35-
// Initialize application
36-
var userAgentApplication = new Msal.UserAgentApplication(msalconfig.clientID);
37-
38-
// Set redirect URI
39-
userAgentApplication.redirectUri = msalconfig.redirectUri;
40-
41-
displayUserInfo();
42-
43-
function displayUserInfo() {
44-
var user = userAgentApplication.getUser();
45-
if (user) {
46-
// Display the user info
47-
var userInfoElement = document.getElementById("userInfo");
48-
userInfoElement.parentElement.classList.remove("hidden");
49-
userInfoElement.innerHTML = JSON.stringify(user, null, 4);
50-
51-
// Show Sign-Out button
52-
document.getElementById("signOutButton").classList.remove("hidden");
53-
}
54-
}
55-
56-
function callGraphAPI() {
57-
if (userAgentApplication.getAllUsers().length === 0) {
58-
userAgentApplication.loginPopup()
59-
.then(function (token) {
60-
console.log(token);
61-
displayUserInfo();
62-
callGraphAPI();
63-
}, function (error) {
64-
showError("login", error, document.getElementById("errorMessage"));
65-
});
66-
} else {
67-
var responseElement = document.getElementById("graphResponse");
68-
responseElement.parentElement.classList.remove("hidden");
69-
responseElement.innerText = "Calling Graph ...";
70-
callWebApiWithScope(graphAPIMeEndpoint,
71-
graphAPIScopes,
72-
responseElement,
73-
document.getElementById("errorMessage"),
74-
document.getElementById("accessToken"));
75-
}
76-
}
77-
78-
function callWebApiWithScope(endpoint, scope, responseElement, errorElement, showTokenElement) {
79-
userAgentApplication.acquireTokenSilent(scope)
80-
.then(function (token) {
81-
callWebApiWithToken(endpoint, token, responseElement, errorElement, showTokenElement);
82-
}, function (error) {
83-
if (error.indexOf("interaction_required" !== -1)) {
84-
userAgentApplication.acquireTokenPopup(scope).then(function(token) {
85-
callWebApiWithToken(endpoint, token, responseElement, errorElement, showTokenElement);
86-
},
87-
function(error) {
88-
showError(endpoint, error, errorElement);
89-
});
90-
} else {
91-
showError(endpoint, error, errorElement);
92-
}
93-
});
94-
}
95-
96-
function showAPIResponse(data, token, responseElement, showTokenElement) {
97-
console.log(data);
98-
responseElement.innerHTML = JSON.stringify(data, null, 4);
99-
if (showTokenElement) {
100-
showTokenElement.parentElement.classList.remove("hidden");
101-
showTokenElement.innerHTML = token;
102-
}
103-
}
104-
105-
function showError(endpoint, error, errorElement) {
106-
console.error(error);
107-
var formattedError = JSON.stringify(error, null, 4);
108-
if (formattedError.length < 3) {
109-
formattedError = error;
110-
}
111-
errorElement.innerHTML = "Error calling " + endpoint + ": " + formattedError;
112-
}
113-
</script>
114-
<script type="text/javascript">
115-
function callWebApiWithToken(endpoint, token, responseElement, errorElement, showTokenElement) {
116-
var headers = new Headers();
117-
var bearer = "Bearer " + token;
118-
headers.append("Authorization", bearer);
119-
var options = {
120-
method: "GET",
121-
headers: headers
122-
};
123-
124-
// Note that fetch API is not available in all browsers
125-
fetch(endpoint, options)
126-
.then(function (response) {
127-
var contentType = response.headers.get("content-type");
128-
if (response.status === 200 && contentType && contentType.indexOf("application/json") !== -1) {
129-
response.json()
130-
.then(function (data) {
131-
// Display response in the page
132-
showAPIResponse(data, token, responseElement, showTokenElement);
133-
})
134-
.catch(function (error) {
135-
showError(endpoint, error, errorElement);
136-
});
137-
} else {
138-
response.json()
139-
.then(function (data) {
140-
// Display response in the page
141-
showError(endpoint, data, errorElement);
142-
})
143-
.catch(function (error) {
144-
showError(endpoint, error, errorElement);
145-
});
146-
}
147-
})
148-
.catch(function (error) {
149-
showError(endpoint, error, errorElement);
150-
});
151-
}
152-
</script>
153-
<script type="text/javascript">
154-
function signOut() {
155-
userAgentApplication.logout();
156-
}
157-
</script>
15833
</body>
15934
</html>

0 commit comments

Comments
 (0)