Skip to content

Commit ecb8b18

Browse files
rohitnarula7176rohitnarula7176
authored
Merge pull request AzureAD#52 from AzureAD/jmprieur/b2c-dev-app
Adding a Readme.txt under devApps\VanillaJSTestApp and a B2C devApp
2 parents a006620 + 432f51f commit ecb8b18

File tree

5 files changed

+207
-0
lines changed

5 files changed

+207
-0
lines changed

‎devApps/VanillaJSTestApp-b2c/Readme.txt

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
What is this sample?
2+
--------------------
3+
This is a simple JavaScript Simple page application
4+
showcasing how to use MSAL.js to authenticate users
5+
via Azure Active Directory B2C,
6+
and access a Web API with the resulting tokens.
7+
8+
9+
How to run this AzureAD B2C sample
10+
----------------------------------
11+
Pre-requisite
12+
- Install node.js if needed (https://nodejs.org/en/)
13+
14+
Resolving the server.js references
15+
- In a command prompt, run npm install
16+
17+
Running the sample
18+
- In a command prompt, run �node server.js�
19+
20+
- Navigate to http://localhost:6420 with the browser of your choice
21+
22+
- In the web page, click on the �Login� button
23+
- Sign-up with a local account (at the bottom of the page click sign-up, and then answer the questions)
24+
alternatively sign-in with a gmail account
25+
- Once signed-in, the "Logout" button appears
26+
- Click on "Call Web Api" to call the Web APi application (which source code is in https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi)
27+
28+
Signing-in with an MSA or a Twitter account does not work yet.

‎devApps/VanillaJSTestApp-b2c/index.html

+119
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<html>
2+
<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>
20+
</head>
21+
<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="out/msal.js" class="pre"></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/demoapi/demo.read"],
42+
webApi: 'https://fabrikamb2chello.azurewebsites.net/hello',
43+
};
44+
</script>
45+
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
50+
});
51+
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>
118+
</body>
119+
</html>

‎devApps/VanillaJSTestApp-b2c/package.json

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"name": "msal-js-devapp-b2c",
3+
"version": "1.1.0",
4+
"license": "MIT",
5+
"main": "server.js",
6+
"dependencies": {
7+
"express": "^4.12.3",
8+
"morgan": "^1.5.2",
9+
"path": "^0.11.14"
10+
}
11+
}

‎devApps/VanillaJSTestApp-b2c/server.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/*
2+
* Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
3+
* See LICENSE in the source repository root for complete license information.
4+
*/
5+
6+
var express = require('express');
7+
var app = express();
8+
var morgan = require('morgan');
9+
var path = require('path');
10+
11+
// Initialize variables.
12+
var port = 6420; // process.env.PORT || 8080;
13+
14+
// Configure morgan module to log all requests.
15+
app.use(morgan('dev'));
16+
17+
// Set the front-end folder to serve public assets.
18+
console.log(path.join(__dirname, '../../out'));
19+
app.use("/out", express.static(path.join(__dirname, "../../out")));
20+
app.use("/bower_components", express.static(path.join(__dirname, 'bower_components')));
21+
22+
// Set up our one route to the index.html file.
23+
app.get('*', function (req, res) {
24+
res.sendFile(path.join(__dirname + '/index.html'));
25+
});
26+
27+
// Start the server.
28+
app.listen(port);
29+
console.log('Listening on port ' + port + '...');

‎devApps/VanillaJSTestApp/Readme.txt

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
What are the dev apps?
2+
----------------------
3+
index_loginPopup.html shows how to send an email with the Microsoft Graph, using msal.js loginPopup()/acquireTokenSilent-acquireTokenPopup() APIs. The authentication happens in a popup window of the browser.
4+
5+
indexRedirect.html shows how to send an email with the Microsoft Graph, using msal.js loginRedirect()/acquireTokenSilent-acquireTokenRedirect() APIs. The page for the application is replaced by the authentication page, and when authentication has happened, the application is called back (on its redirectUri) with the user's idToken.
6+
7+
How to run the dev apps:
8+
--------------------
9+
Pre-requisite
10+
- Install node.js if needed (https://nodejs.org/en/)
11+
12+
Resolving the server.js references
13+
- In a command prompt, run npm install
14+
15+
Running the sample
16+
- In a command prompt, run �node server.js�
17+
18+
- Navigate to http://localhost:1530 with the browser of your choice
19+
20+
- In the web page, click on the �Login� button

0 commit comments

Comments
 (0)