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

Commit a7f2e70

Browse files
sameeragsameerag
committed
Modified for msal-1.0.0-preview
1 parent b3e3462 commit a7f2e70

File tree

3 files changed

+152
-110
lines changed

3 files changed

+152
-110
lines changed

‎index.html‎

Lines changed: 133 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,142 @@
11
<html>
2+
23
<head>
3-
<title>Calling a Web API as a user authenticated with Msal.js app</title>
4-
<style>
5-
.hidden {
6-
visibility: hidden
7-
}
8-
9-
.visible {
10-
visibility: visible
11-
}
12-
13-
.response {
14-
border: solid;
15-
border-width: thin;
16-
background-color: azure;
17-
padding: 2px;
18-
}
19-
</style>
4+
<title>Calling a Web API as a user authenticated with Msal.js app</title>
5+
<style>
6+
.hidden {
7+
visibility: hidden
8+
}
9+
10+
.visible {
11+
visibility: visible
12+
}
13+
14+
.response {
15+
border: solid;
16+
border-width: thin;
17+
background-color: azure;
18+
padding: 2px;
19+
}
20+
</style>
2021
</head>
22+
2123
<body>
22-
<!-- bluebird only needed if this page needs to run on Internet Explorer -->
23-
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js" class="pre"></script>
24-
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/0.1.1/js/msal.min.js"></script>
25-
<script src="https://code.jquery.com/jquery-3.2.1.min.js" class="pre"></script>
26-
27-
<h2>Getting an access token with Azure AD B2C and calling a Web API</h2>
28-
<div>
29-
<div id="label">Sign-in with Microsoft Azure AD B2C</div>
30-
<button id="auth" onclick="login()">Login</button>
31-
<button id="callApiButton" class="hidden" onclick="callApi()">Call Web API</button>
32-
</div>
33-
34-
<pre class="response"></pre>
35-
36-
<script class="pre">
37-
// The current application coordinates were pre-registered in a B2C tenant.
38-
var applicationConfig = {
39-
clientID: 'e760cab2-b9a1-4c0d-86fb-ff7084abd902',
40-
authority: "https://login.microsoftonline.com/tfp/fabrikamb2c.onmicrosoft.com/b2c_1_susi",
41-
b2cScopes: ["https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read"],
42-
webApi: 'https://fabrikamb2chello.azurewebsites.net/hello',
24+
<!-- bluebird only needed if this page needs to run on Internet Explorer -->
25+
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js" class="pre"></script>
26+
<script src="msal.min.js"></script>
27+
<script src="https://code.jquery.com/jquery-3.2.1.min.js" class="pre"></script>
28+
29+
<h2>Getting an access token with Azure AD B2C and calling a Web API</h2>
30+
<div>
31+
<div id="label">Sign-in with Microsoft Azure AD B2C</div>
32+
<button id="auth" onclick="login()">Login</button>
33+
<button id="callApiButton" class="hidden" onclick="callApi()">Call Web API</button>
34+
</div>
35+
36+
<pre class="response"></pre>
37+
38+
<script class="pre">
39+
// The current application coordinates were pre-registered in a B2C tenant.
40+
var applicationConfig = {
41+
clientID: 'e760cab2-b9a1-4c0d-86fb-ff7084abd902',
42+
authority: "https://login.microsoftonline.com/tfp/fabrikamb2c.onmicrosoft.com/b2c_1_susi",
43+
b2cScopes: ["https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read"],
44+
webApi: 'https://fabrikamb2chello.azurewebsites.net/hello',
45+
};
46+
</script>
47+
48+
<script>
49+
"use strict";
50+
51+
var config = {
52+
auth: {
53+
clientId: applicationConfig.clientID,
54+
authority: applicationConfig.authority,
55+
}
56+
};
57+
58+
var clientApplication = new Msal.UserAgentApplication(config);
59+
// myMSALObj.handleRedirectCallbacks(acquireTokenRedirectCallBack, acquireTokenErrorRedirectCallBack);
60+
61+
function login() {
62+
63+
var loginRequest = {
64+
scopes: applicationConfig.b2cScopes
65+
};
66+
67+
clientApplication.loginPopup(loginRequest).then(function (loginResponse) {
68+
var tokenRequest = {
69+
scopes: applicationConfig.b2cScopes
4370
};
44-
</script>
4571

46-
<script>
47-
"use strict";
48-
var clientApplication = new Msal.UserAgentApplication(applicationConfig.clientID, applicationConfig.authority, function (errorDesc, token, error, tokenType) {
49-
// Called after loginRedirect or acquireTokenPopup
72+
clientApplication.acquireTokenSilent(tokenRequest).then(function (tokenResponse) {
73+
updateUI();
74+
}).catch(function (error) {
75+
clientApplication.acquireTokenPopup(tokenRequest).then(function (tokenResponse) {
76+
updateUI();
77+
}).catch (function (error) {
78+
logMessage("Error acquiring the popup:\n" + error);
79+
});
80+
})
81+
}).catch (function (error) {
82+
logMessage("Error during login:\n" + error);
83+
});
84+
}
85+
86+
function updateUI() {
87+
var userName = clientApplication.getAccount().name;
88+
console.log(clientApplication.getAccount());
89+
logMessage("User '" + userName + "' logged-in");
90+
var authButton = document.getElementById('auth');
91+
authButton.innerHTML = 'logout';
92+
authButton.setAttribute('onclick', 'logout();');
93+
var label = document.getElementById('label');
94+
label.innerText = "Hello " + userName;
95+
var callWebApiButton = document.getElementById('callApiButton');
96+
callWebApiButton.setAttribute('class', 'visible');
97+
}
98+
99+
function callApi() {
100+
var tokenRequest = {
101+
scopes: applicationConfig.b2cScopes
102+
}
103+
clientApplication.acquireTokenSilent(tokenRequest).then(function (tokenResponse) {
104+
callApiWithAccessToken(tokenResponse.accessToken);
105+
}).catch(function (error) {
106+
clientApplication.acquireTokenPopup(tokenRequest).then(function (tokenResponse) {
107+
callApiWithAccessToken(tokenResponse.accessToken);
108+
}).catch(function (error) {
109+
logMessage("Error acquiring the access token to call the Web api:\n" + error);
50110
});
111+
})
112+
}
51113

52-
function login() {
53-
clientApplication.loginPopup(applicationConfig.b2cScopes).then(function (idToken) {
54-
clientApplication.acquireTokenSilent(applicationConfig.b2cScopes).then(function (accessToken) {
55-
updateUI();
56-
}, function (error) {
57-
clientApplication.acquireTokenPopup(applicationConfig.b2cScopes).then(function (accessToken) {
58-
updateUI();
59-
}, function (error) {
60-
logMessage("Error acquiring the popup:\n" + error);
61-
});
62-
})
63-
}, function (error) {
64-
logMessage("Error during login:\n" + error);
65-
});
66-
}
67-
68-
function updateUI() {
69-
var userName = clientApplication.getUser().name;
70-
logMessage("User '" + userName + "' logged-in");
71-
var authButton = document.getElementById('auth');
72-
authButton.innerHTML = 'logout';
73-
authButton.setAttribute('onclick', 'logout();');
74-
var label = document.getElementById('label');
75-
label.innerText = "Hello " + userName;
76-
var callWebApiButton = document.getElementById('callApiButton');
77-
callWebApiButton.setAttribute('class', 'visible');
78-
}
79-
80-
function callApi() {
81-
clientApplication.acquireTokenSilent(applicationConfig.b2cScopes).then(function (accessToken) {
82-
callApiWithAccessToken(accessToken);
83-
}, function (error) {
84-
clientApplication.acquireTokenPopup(applicationConfig.b2cScopes).then(function (accessToken) {
85-
callApiWithAccessToken(accessToken);
86-
}, function (error) {
87-
logMessage("Error acquiring the access token to call the Web api:\n" + error);
88-
});
89-
})
90-
}
91-
92-
function callApiWithAccessToken(accessToken) {
93-
// Call the Web API with the AccessToken
94-
$.ajax({
95-
type: "GET",
96-
url: applicationConfig.webApi,
97-
headers: {
98-
'Authorization': 'Bearer ' + accessToken,
99-
},
100-
}).done(function (data) {
101-
logMessage("Web APi returned:\n" + JSON.stringify(data));
102-
})
103-
.fail(function (jqXHR, textStatus) {
104-
logMessage("Error calling the Web api:\n" + textStatus);
105-
})
106-
}
107-
108-
function logout() {
109-
// Removes all sessions, need to call AAD endpoint to do full logout
110-
clientApplication.logout();
111-
}
112-
113-
function logMessage(s) {
114-
document.body.querySelector('.response').appendChild(document.createTextNode('\n' + s));
115-
}
116-
117-
</script>
114+
function callApiWithAccessToken(accessToken) {
115+
// Call the Web API with the AccessToken
116+
$.ajax({
117+
type: "GET",
118+
url: applicationConfig.webApi,
119+
headers: {
120+
'Authorization': 'Bearer ' + accessToken,
121+
},
122+
}).done(function (data) {
123+
logMessage("Web APi returned:\n" + JSON.stringify(data));
124+
})
125+
.fail(function (jqXHR, textStatus) {
126+
logMessage("Error calling the Web api:\n" + textStatus);
127+
})
128+
}
129+
130+
function logout() {
131+
// Removes all sessions, need to call AAD endpoint to do full logout
132+
clientApplication.logout();
133+
}
134+
135+
function logMessage(s) {
136+
document.body.querySelector('.response').appendChild(document.createTextNode('\n' + s));
137+
}
138+
139+
</script>
118140
</body>
119-
</html>
141+
142+
</html>

‎msal.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.

‎server.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ var port = 6420; // process.env.PORT || 8080;
1515
app.use(morgan('dev'));
1616

1717
// Set the front-end folder to serve public assets.
18+
// Set the front-end folder to serve public assets.
19+
app.use("/", express.static(__dirname));
1820
console.log(path.join(__dirname, '../../out'));
1921
app.use("/out", express.static(path.join(__dirname, "../../out")));
2022
app.use("/bower_components", express.static(path.join(__dirname, 'bower_components')));

0 commit comments

Comments
 (0)