138 lines
5.6 KiB
HTML
138 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Quickstart for MSAL JS</title>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>
|
|
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/0.2.3/js/msal.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<h4 id="WelcomeMessage"></h4>
|
|
<button id="SignIn" onclick="signIn()">Sign In</button>
|
|
<br/><br/>
|
|
<pre id="json"></pre>
|
|
|
|
<script>
|
|
var applicationConfig = {
|
|
clientID: "24d81a32-6a9a-4f5c-b7cc-53bc1ba178c7",
|
|
authority: "https://login.microsoftonline.com/common",
|
|
graphScopes: ["user.read"],
|
|
graphEndpoint: "https://graph.microsoft.com/v1.0/me"
|
|
};
|
|
|
|
var myMSALObj = new Msal.UserAgentApplication(applicationConfig.clientID, applicationConfig.authority, acquireTokenRedirectCallBack,
|
|
{storeAuthStateInCookie: true, cacheLocation: "localStorage"});
|
|
|
|
function signIn() {
|
|
myMSALObj.loginPopup(applicationConfig.graphScopes).then(function (idToken) {
|
|
//Login Success
|
|
showWelcomeMessage();
|
|
acquireTokenPopupAndCallMSGraph();
|
|
}, function (error) {
|
|
console.log(error);
|
|
});
|
|
}
|
|
|
|
function signOut() {
|
|
myMSALObj.logout();
|
|
}
|
|
|
|
function acquireTokenPopupAndCallMSGraph() {
|
|
//Call acquireTokenSilent (iframe) to obtain a token for Microsoft Graph
|
|
myMSALObj.acquireTokenSilent(applicationConfig.graphScopes).then(function (accessToken) {
|
|
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
|
|
}, function (error) {
|
|
console.log(error);
|
|
// Call acquireTokenPopup (popup window) in case of acquireTokenSilent failure due to consent or interaction required ONLY
|
|
if (error.indexOf("consent_required") !== -1 || error.indexOf("interaction_required") !== -1 || error.indexOf("login_required") !== -1) {
|
|
myMSALObj.acquireTokenPopup(applicationConfig.graphScopes).then(function (accessToken) {
|
|
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
|
|
}, function (error) {
|
|
console.log(error);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function callMSGraph(theUrl, accessToken, callback) {
|
|
var xmlHttp = new XMLHttpRequest();
|
|
xmlHttp.onreadystatechange = function () {
|
|
if (this.readyState == 4 && this.status == 200)
|
|
callback(JSON.parse(this.responseText));
|
|
}
|
|
xmlHttp.open("GET", theUrl, true); // true for asynchronous
|
|
xmlHttp.setRequestHeader('Authorization', 'Bearer ' + accessToken);
|
|
xmlHttp.send();
|
|
}
|
|
|
|
function graphAPICallback(data) {
|
|
//Display user data on DOM
|
|
var divWelcome = document.getElementById('WelcomeMessage');
|
|
//divWelcome.innerHTML += " to Microsoft Graph API!!";
|
|
document.getElementById("json").innerHTML = JSON.stringify(data, null, 2);
|
|
}
|
|
|
|
function showWelcomeMessage() {
|
|
var divWelcome = document.getElementById('WelcomeMessage');
|
|
//divWelcome.innerHTML += 'Welcome ' + myMSALObj.getUser().name;
|
|
var loginbutton = document.getElementById('SignIn');
|
|
loginbutton.innerHTML = 'Sign Out';
|
|
loginbutton.setAttribute('onclick', 'signOut();');
|
|
}
|
|
|
|
// This function can be removed if you do not need to support IE
|
|
function acquireTokenRedirectAndCallMSGraph() {
|
|
//Call acquireTokenSilent (iframe) to obtain a token for Microsoft Graph
|
|
myMSALObj.acquireTokenSilent(applicationConfig.graphScopes).then(function (accessToken) {
|
|
callMSGraph(applicationConfig.graphEndpoint, accessToken, graphAPICallback);
|
|
}, function (error) {
|
|
console.log(error);
|
|
//Call acquireTokenRedirect in case of acquireToken Failure
|
|
if (error.indexOf("consent_required") !== -1 || error.indexOf("interaction_required") !== -1 || error.indexOf("login_required") !== -1) {
|
|
myMSALObj.acquireTokenRedirect(applicationConfig.graphScopes);
|
|
}
|
|
});
|
|
}
|
|
|
|
function acquireTokenRedirectCallBack(errorDesc, token, error, tokenType)
|
|
{
|
|
if(tokenType === "access_token")
|
|
{
|
|
callMSGraph(applicationConfig.graphEndpoint, token, graphAPICallback);
|
|
} else {
|
|
console.log("token type is:"+tokenType);
|
|
}
|
|
|
|
}
|
|
|
|
// Browser check variables
|
|
var ua = window.navigator.userAgent;
|
|
var msie = ua.indexOf('MSIE ');
|
|
var msie11 = ua.indexOf('Trident/');
|
|
var msedge = ua.indexOf('Edge/');
|
|
var isIE = msie > 0 || msie11 > 0;
|
|
var isEdge = msedge > 0;
|
|
|
|
//If you support IE, our recommendation is that you sign-in using Redirect APIs
|
|
//If you as a developer are testing using Edge InPrivate mode, please add "isEdge" to the if check
|
|
if (!isIE) {
|
|
if (myMSALObj.getUser()) {// avoid duplicate code execution on page load in case of iframe and popup window.
|
|
showWelcomeMessage();
|
|
acquireTokenPopupAndCallMSGraph();
|
|
}
|
|
}
|
|
else {
|
|
document.getElementById("SignIn").onclick = function () {
|
|
myMSALObj.loginRedirect(applicationConfig.graphScopes);
|
|
};
|
|
|
|
if (myMSALObj.getUser() && !myMSALObj.isCallback(window.location.hash)) {// avoid duplicate code execution on page load in case of iframe and popup window.
|
|
showWelcomeMessage();
|
|
acquireTokenRedirectAndCallMSGraph();
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|