AzureAD · rohitnarula7176 · May 17, 2017 · May 10, 2017 · May 10, 2017
@@ -0,0 +1,28 @@
+What is this sample?
+--------------------
+This is a simple JavaScript Simple page application 
+showcasing how to use MSAL.js to authenticate users 
+via Azure Active Directory B2C, 
+and access a Web API with the resulting tokens. 
+
+
+How to run this AzureAD B2C sample
+----------------------------------
+Pre-requisite
+- Install node.js if needed (https://nodejs.org/en/)
+
+Resolving the server.js references
+- In a command prompt, run npm install
+
+Running the sample
+- In a command prompt, run �node server.js�
+
+- Navigate to http://localhost:6420 with the browser of your choice
+
+- In the web page, click on the �Login� button
+- Sign-up with a local account (at the bottom of the page click sign-up, and then answer the questions)
+  alternatively sign-in with a gmail account
+- Once signed-in, the "Logout" button appears
+- 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)
+
+ Signing-in with an MSA or a Twitter account does not work yet.
@@ -0,0 +1,119 @@
+<html>
+<head>
+    <title>Calling a Web API as a user authenticated with Msal.js app</title>
+    <style>
+        .hidden {
+            visibility: hidden
+        }
+
+        .visible {
+            visibility: visible
+        }
+
+        .response {
+            border: solid;
+            border-width: thin;
+            background-color: azure;
+            padding: 2px;
+        }
+    </style>
+</head>
+<body>
+    <!-- bluebird only needed if this page needs to run on Internet Explorer -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js" class="pre"></script>
+    <script src="out/msal.js" class="pre"></script>
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js" class="pre"></script>
+
+    <h2>Getting an access token with Azure AD B2C and calling a Web API</h2>
+    <div>
+        <div id="label">Sign-in with Microsoft Azure AD B2C</div>
+        <button id="auth" onclick="login()">Login</button>
+        <button id="callApiButton" class="hidden" onclick="callApi()">Call Web API</button>
+    </div>
+
+    <pre class="response"></pre>
+
+    <script class="pre">
+        // The current application coordinates were pre-registered in a B2C tenant.
+        var applicationConfig = {
+            clientID: 'e760cab2-b9a1-4c0d-86fb-ff7084abd902',
+            authority: "https://login.microsoftonline.com/tfp/fabrikamb2c.onmicrosoft.com/b2c_1_susi",
+            b2cScopes: ["https://fabrikamb2c.onmicrosoft.com/demoapi/demo.read"],
+            webApi: 'https://fabrikamb2chello.azurewebsites.net/hello',
+        };
+    </script>
+
+    <script>
+        "use strict";
+        var clientApplication = new Msal.UserAgentApplication(applicationConfig.clientID, applicationConfig.authority, function (errorDesc, token, error, tokenType) {
+            // Called after loginRedirect or acquireTokenPopup
+        });
+
+        function login() {
+            clientApplication.loginPopup(applicationConfig.b2cScopes).then(function (idToken) {
+                clientApplication.acquireTokenSilent(applicationConfig.b2cScopes).then(function (accessToken) {
+                    updateUI();
+                }, function (error) {
+                    clientApplication.acquireTokenPopup(applicationConfig.b2cScopes).then(function (accessToken) {
+                        updateUI();
+                    }, function (error) {
+                        logMessage("Error acquiring the popup:\n" + error);
+                    });
+                })
+            }, function (error) {
+                logMessage("Error during login:\n" + error);
+            });
+        }
+
+        function updateUI() {
+            var userName = clientApplication.getUser().name;
+            logMessage("User '" + userName + "' logged-in");
+            var authButton = document.getElementById('auth');
+            authButton.innerHTML = 'logout';
+            authButton.setAttribute('onclick', 'logout();');
+            var label = document.getElementById('label');
+            label.innerText = "Hello " + userName;
+            var callWebApiButton = document.getElementById('callApiButton');
+            callWebApiButton.setAttribute('class', 'visible');
+        }
+
+        function callApi() {
+            clientApplication.acquireTokenSilent(applicationConfig.b2cScopes).then(function (accessToken) {
+                callApiWithAccessToken(accessToken);
+            }, function (error) {
+                clientApplication.acquireTokenPopup(applicationConfig.b2cScopes).then(function (accessToken) {
+                    callApiWithAccessToken(accessToken);
+                }, function (error) {
+                    logMessage("Error acquiring the access token to call the Web api:\n" + error);
+                });
+            })
+        }
+
+        function callApiWithAccessToken(accessToken) {
+            // Call the Web API with the AccessToken
+            $.ajax({
+                type: "GET",
+                url: applicationConfig.webApi,
+                headers: {
+                    'Authorization': 'Bearer ' + accessToken,
+                },
+            }).done(function (data) {
+                logMessage("Web APi returned:\n" + JSON.stringify(data));
+            })
+                .fail(function (jqXHR, textStatus) {
+                    logMessage("Error calling the Web api:\n" + textStatus);
+                })
+        }
+
+        function logout() {
+            // Removes all sessions, need to call AAD endpoint to do full logout
+            clientApplication.logout();
+        }
+
+        function logMessage(s) {
+            document.body.querySelector('.response').appendChild(document.createTextNode('\n' + s));
+        }
+
+    </script>
+</body>
+</html>
@@ -0,0 +1,11 @@
+{
+  "name": "msal-js-devapp-b2c",
+  "version": "1.1.0",
+  "license": "MIT",
+  "main": "server.js",
+  "dependencies": {
+    "express": "^4.12.3",
+    "morgan": "^1.5.2",
+    "path": "^0.11.14"
+  }
+}
@@ -0,0 +1,29 @@
+/*
+*  Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license.
+*  See LICENSE in the source repository root for complete license information.
+*/
+
+var express = require('express');
+var app = express();
+var morgan = require('morgan');
+var path = require('path');
+
+// Initialize variables.
+var port = 6420; // process.env.PORT || 8080;
+
+// Configure morgan module to log all requests.
+app.use(morgan('dev'));
+
+// Set the front-end folder to serve public assets.
+console.log(path.join(__dirname, '../../out'));
+app.use("/out", express.static(path.join(__dirname, "../../out")));
+app.use("/bower_components", express.static(path.join(__dirname, 'bower_components')));
+
+// Set up our one route to the index.html file.
+app.get('*', function (req, res) {
+    res.sendFile(path.join(__dirname + '/index.html'));
+});
+
+// Start the server.
+app.listen(port);
+console.log('Listening on port ' + port + '...'); 
@@ -0,0 +1,20 @@
+What are the dev apps?
+----------------------
+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. 
+
+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.
+
+How to run the dev apps:
+--------------------
+Pre-requisite
+- Install node.js if needed (https://nodejs.org/en/)
+
+Resolving the server.js references
+- In a command prompt, run npm install
+
+Running the sample
+- In a command prompt, run �node server.js�
+
+- Navigate to http://localhost:1530 with the browser of your choice
+
+- In the web page, click on the �Login� button