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

add qs for new code patterns #11

Merged
merged 7 commits into from
Apr 30, 2019
Merged

add qs for new code patterns #11

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
749a067
add qs for new code patterns
DarylThayil Apr 13, 2019
c933c29
update lib + code changes
DarylThayil Apr 15, 2019
8e63208
add login type
DarylThayil Apr 15, 2019
4f8ca48
Update the dist
sameerag Apr 23, 2019
9e1645d
Update the index.html to point to the new .min.js
sameerag Apr 23, 2019
413ceaf
Added comments
aashiman Apr 23, 2019
1fd81f5
use msal.js 1.0.0-preview.4
navyasric Apr 30, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
node_modules
package-lock.json
119 changes: 76 additions & 43 deletions JavaScriptSPA/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,20 @@
<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.4/js/msal.js"></script>
<script src="/msal-0.9.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>

<body>
<h4 id="WelcomeMessage"></h4>
<button id="SignIn" onclick="signIn()">Sign In</button>
<br/><br/>
<pre id="json"></pre>

<div class="container">
<div class="leftContainer">
<p id="WelcomeMessage">Welcome to the Microsoft Authentication Library For Javascript Quickstart</p>
<button id="SignIn" onclick="signIn()">Sign In</button>
</div>
<div class="rightContainer">
<pre id="json"></pre>
</div>
</div>
<script>
var applicationConfig = {
clientID: 'Enter_the_Application_Id_here', //This is your client ID
Expand All @@ -20,15 +25,30 @@ <h4 id="WelcomeMessage"></h4>
graphEndpoint: "https://graph.microsoft.com/v1.0/me"
};

var myMSALObj = new Msal.UserAgentApplication(applicationConfig.clientID, applicationConfig.authority, acquireTokenRedirectCallBack,
{storeAuthStateInCookie: true, cacheLocation: "localStorage"});
var config = {
auth: {
clientId: applicationConfig.clientID,
authority: applicationConfig.authority,
validateAuthority: true
Copy link
Contributor

@navyasric navyasric Apr 15, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

validateAuthority is by default true. Can we remove the explicitly setting if not needed again? This will be one extra option to explain in the quickstart.

},
cache: {
cacheLocation: "localStorage",
storeAuthStateInCookie: true
}
};

var myMSALObj = new Msal.UserAgentApplication(config);
myMSALObj.handleRedirectCallbacks(acquireTokenRedirectCallBack, acquireTokenErrorRedirectCallBack);

function signIn() {
myMSALObj.loginPopup(applicationConfig.graphScopes).then(function (idToken) {
let loginRequest = {
scopes: applicationConfig.graphScopes
};
myMSALObj.loginPopup(loginRequest).then(function (loginResponse) {
//Login Success
showWelcomeMessage();
acquireTokenPopupAndCallMSGraph();
}, function (error) {
}).catch(function (error) {
console.log(error);
});
}
Expand All @@ -37,17 +57,21 @@ <h4 id="WelcomeMessage"></h4>
myMSALObj.logout();
}

function acquireTokenPopupAndCallMSGraph() {
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) {
let tokenRequest = {
scopes: applicationConfig.graphScopes
};
myMSALObj.acquireTokenSilent(tokenRequest).then(function (tokenResponse) {
console.log(tokenResponse.scopes);
callMSGraph(applicationConfig.graphEndpoint, tokenResponse.accessToken, graphAPICallback);
}).catch(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) {
if (error.errorMessage.indexOf("consent_required") !== -1 || error.errorMessage.indexOf("interaction_required") !== -1 || error.errorMessage.indexOf("login_required") !== -1) {
myMSALObj.acquireTokenPopup(tokenRequest).then(function (tokenResponse) {
callMSGraph(applicationConfig.graphEndpoint, tokenResponse.accessToken, graphAPICallback);
}).catch(function (error) {
console.log(error);
});
}
Expand All @@ -65,46 +89,52 @@ <h4 id="WelcomeMessage"></h4>
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);
document.getElementById("json").innerHTML = JSON.stringify(data, null, 2);
}

function showWelcomeMessage() {
var divWelcome = document.getElementById('WelcomeMessage');
divWelcome.innerHTML += 'Welcome ' + myMSALObj.getUser().name;
divWelcome.innerHTML = 'Welcome ' + myMSALObj.getAccount().userName + "to Microsoft Graph API";
console.log(myMSALObj.getAccount());
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() {

// 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) {
let tokenRequest = {
scopes: applicationConfig.graphScopes
};
myMSALObj.acquireTokenSilent(tokenRequest).then(function (tokenResponse) {
console.log(tokenResponse.scopes);
callMSGraph(applicationConfig.graphEndpoint, tokenResponse.accessToken, graphAPICallback);
}).catch(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);
if (error.errorMessage.indexOf("consent_required") !== -1 || error.errorMessage.indexOf("interaction_required") !== -1 || error.errorMessage.indexOf("login_required") !== -1) {
myMSALObj.acquireTokenRedirect(tokenRequest);
}
});
});
}

function acquireTokenRedirectCallBack(errorDesc, token, error, tokenType)
{
if(tokenType === "access_token")
{
callMSGraph(applicationConfig.graphEndpoint, token, graphAPICallback);
} else {
console.log("token type is:"+tokenType);
}
function acquireTokenRedirectCallBack(response) {
if (response.tokenType === "access_token") {
callMSGraph(applicationConfig.graphEndpoint, response.accessToken, graphAPICallback);
} else {
console.log("token type is:" + response.tokenType);
}
}

function acquireTokenErrorRedirectCallBack(error) {
console.log(error);
}


// Browser check variables
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
Expand All @@ -114,19 +144,22 @@ <h4 id="WelcomeMessage"></h4>
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 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.
if (myMSALObj.getAccount()) {// 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);
let tokenRequest = {
scopes: applicationConfig.graphScopes
};
myMSALObj.loginRedirect(tokenRequest);
};

if (myMSALObj.getUser() && !myMSALObj.isCallback(window.location.hash)) {// avoid duplicate code execution on page load in case of iframe and popup window.
if (myMSALObj.getAccount() && !myMSALObj.isCallback(window.location.hash)) {// avoid duplicate code execution on page load in case of iframe and popup window.
showWelcomeMessage();
acquireTokenRedirectAndCallMSGraph();
}
Expand Down
17 changes: 17 additions & 0 deletions JavaScriptSPA/msal-0.9.0.min.js
View file
Open in desktop

Large diffs are not rendered by default.

43 changes: 43 additions & 0 deletions JavaScriptSPA/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
body {
height: 100%;
background-color: #2b5797; /* For browsers that do not support gradients */
background-image: linear-gradient(-90deg, #2b5797, #603cba); /* Standard syntax (must be last) */
}
.container {
width: 100%;
min-height: 600px;
}

.leftContainer {
color: white;
font-size: 50px;
font-weight: 200;
text-align: center;
}

.leftContainer, .rightContainer {
float: left;
width: 100%;
max-width: 800px;
}

#SignIn {
height: 50px;
width: 150px;
background-color: #00A4EF;
padding: 14px 24px;
border: 0 none;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: white;
}
#json {
background-color: white;
opacity: 0.85;
min-height: 600px;
width: 100%;
display: block;
font-size: 14px;
overflow: scroll;
}