Add b2c sample

samples/VanillaJSTestApp/app/b2c/auth.js

@@ -0,0 +1,93 @@
+// Browser check variables
+// 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
+const ua = window.navigator.userAgent;
+const msie = ua.indexOf("MSIE ");
+const msie11 = ua.indexOf("Trident/");
+const msedge = ua.indexOf("Edge/");
+const isIE = msie > 0 || msie11 > 0;
+const isEdge = msedge > 0;
+
+let signInType;
+
+// Create the main myMSALObj instance
+// configuration parameters are located at authConfig.js
+const myMSALObj = new Msal.UserAgentApplication(msalConfig);
+
+// Register Callbacks for Redirect flow
+myMSALObj.handleRedirectCallback(authRedirectCallBack);
+
+function authRedirectCallBack(error, response) {
+    if (error) {
+        console.log(error);
+    } else {
+        if (response.tokenType === "id_token" && myMSALObj.getAccount() && !myMSALObj.isCallback(window.location.hash)) {
+            console.log('id_token acquired at: ' + new Date().toString());
+            showWelcomeMessage(myMSALObj.getAccount());
+        } else if (response.tokenType === "access_token") {
+            console.log('access_token acquired at: ' + new Date().toString());
+            updateUI(response);
+            accessTokenButtonPopup.style.display = 'none';
+            accessTokenButtonRedirect.style.display = 'none';
+        } else {
+            console.log("token type is:" + response.tokenType);
+        }
+    }
+}
+
+// Redirect: once login is successful and redirects with tokens, call Graph API
+if (myMSALObj.getAccount() && !myMSALObj.isCallback(window.location.hash)) {
+    // avoid duplicate code execution on page load in case of iframe and Popup window.
+    showWelcomeMessage(myMSALObj.getAccount());
+}
+
+function signIn(method) {
+    signInType = isIE ? "loginRedirect" : method;
+    if (signInType === "loginPopup") {
+        myMSALObj.loginPopup(loginRequest)
+            .then(loginResponse => {
+            console.log(loginResponse);
+            if (myMSALObj.getAccount()) {
+                showWelcomeMessage(myMSALObj.getAccount());
+            }
+        }).catch(function (error) {
+            console.log(error);
+        });
+    } else if (signInType === "loginRedirect") {
+        myMSALObj.loginRedirect(loginRequest)
+    }
+}
+
+function signOut() {
+    myMSALObj.logout();
+}
+
+function getAccessTokenPopup() {
+    if (myMSALObj.getAccount()) {
+        myMSALObj.acquireTokenPopup(loginRequest).then(response => {
+            updateUI(response);
+            accessTokenButtonPopup.style.display = 'none';
+            accessTokenButtonRedirect.style.display = 'none';
+        }).catch(error => {
+            console.log(error);
+        });
+    }
+}
+
+function getAccessTokenRedirect() {
+    if (myMSALObj.getAccount()) {
+        myMSALObj.acquireTokenRedirect(loginRequest);
+    }
+}
+
+function getAccessTokenSilent() {
+    if (myMSALObj.getAccount()) {
+        myMSALObj.acquireTokenSilent(loginRequest).then(response => {
+            updateUI(response);
+            accessTokenButtonPopup.style.display = 'none';
+            accessTokenButtonRedirect.style.display = 'none';
+        }).catch(error => {
+            console.log(error);
+        })
+    }
+}

samples/VanillaJSTestApp/app/b2c/authConfig.js

@@ -0,0 +1,27 @@
+// Config object to be passed to Msal on creation
+const msalConfig = {
+    auth: {
+        clientId: "e3b9ad76-9763-4827-b088-80c7a7888f79",
+        authority: "https://login.microsoftonline.com/tfp/msidlabb2c.onmicrosoft.com/B2C_1_SISOPolicy/",
+        knownAuthorities: ["login.microsoftonline.com"]
+    },
+    cache: {
+        cacheLocation: "localStorage", // This configures where your cache will be stored
+        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
+    },
+    system: {
+        telemetry: {
+            applicationName: 'msalVanillaTestApp',
+            applicationVersion: 'test1.0',
+            telemetryEmitter: (events) => {
+                console.log("Telemetry Events", events);
+            }
+        }
+    }
+};
+
+// Add here scopes for id token to be used at MS Identity Platform endpoints.
+const loginRequest = {
+    scopes: ["https://msidlabb2c.onmicrosoft.com/msidlabb2capi/read"],
+    forceRefresh: false // Set this to "true" to skip a cached token and go to the server to get a new token
+};

samples/VanillaJSTestApp/app/b2c/index.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
+    <title>Quickstart | MSAL.JS Vanilla JavaScript SPA</title>
+
+    <!-- IE support: add promises polyfill before msal.js  -->    
+    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/js/browser/bluebird.min.js"></script>
+    <script src="./dist/msal.js"></script>
+
+    <!-- adding Bootstrap 4 for UI components  -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+      <a class="navbar-brand" href="/">MS Identity Platform</a>
+      <div class="btn-group ml-auto dropleft">
+          <button type="button" id="SignIn" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Sign In
+          </button>
+          <div class="dropdown-menu">
+            <button class="dropdown-item" id="loginPopup" onclick="signIn(this.id)">Sign in using Popup</button>
+            <button class="dropdown-item" id="loginRedirect" onclick="signIn(this.id)">Sign in using Redirect</button>
+          </div>
+      </div>
+    </nav>
+    <br>
+    <h5 class="card-header text-center">Vanilla JavaScript SPA calling MS Graph API with MSAL.JS</h5>
+    <br>
+    <div class="row" style="margin:auto" >
+    <div id="card-div" class="col-md-3" style="display:none">
+    <div class="card text-center">
+      <div class="card-body">
+        <h5 class="card-title" id="WelcomeMessage">Please sign-in to see your profile and read your mails</h5>
+        <div id="profile-div"></div>
+        <br>
+        <br>
+        <button class="btn btn-primary" id="getAccessTokenRedirect" onclick="getAccessTokenRedirect()">Get Access Token (Redirect)</button>
+        <br>
+        <br>
+        <button class="btn btn-primary" id="getAccessTokenPopup" onclick="getAccessTokenPopup()">Get Access Token (Popup)</button>
+        <br>
+        <br>
+        <button class="btn btn-primary" id="getAccessTokenSilent" onclick="getAccessTokenSilent()">Get Access Token (Silent)</button>
+      </div>
+    </div>
+    </div>
+    <br>
+    <br>
+      <div class="col-md-4">
+        <div class="list-group" id="list-tab" role="tablist">
+        </div>
+      </div>
+      <div class="col-md-5">
+        <div class="tab-content" id="nav-tabContent">
+        </div>
+      </div>
+    </div>
+    <br>
+    <br>
+
+    <!-- importing bootstrap.js and supporting js libraries -->
+    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>  
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+
+    <!-- importing app scripts | load order is important -->
+    <script type="text/javascript" src="./authConfig.js"></script>
+    <script type="text/javascript" src="./ui.js"></script> 
+    <script type="text/javascript" src="./auth.js"></script>
+  </body>
+</html>

samples/VanillaJSTestApp/app/b2c/ui.js

@@ -0,0 +1,33 @@
+// Select DOM elements to work with
+const welcomeDiv = document.getElementById("WelcomeMessage");
+const signInButton = document.getElementById("SignIn");
+const cardDiv = document.getElementById("card-div");
+const accessTokenButtonRedirect = document.getElementById("getAccessTokenRedirect");
+const accessTokenButtonPopup = document.getElementById("getAccessTokenPopup");
+const accessTokenButtonSilent = document.getElementById("getAccessTokenSilent");
+const profileDiv = document.getElementById("profile-div");
+
+function showWelcomeMessage(account) {
+    // Reconfiguring DOM elements
+    cardDiv.style.display = 'initial';
+    welcomeDiv.innerHTML = `Welcome ${account.name}`;
+    signInButton.nextElementSibling.style.display = 'none';
+    signInButton.setAttribute("onclick", "signOut();");
+    signInButton.setAttribute('class', "btn btn-success")
+    signInButton.innerHTML = "Sign Out";
+}
+
+function updateUI(response) {
+    const oldAccessTokenDiv = document.getElementById('access-token-info');
+    if (oldAccessTokenDiv) {
+        oldAccessTokenDiv.remove();
+    }
+    const accessTokenDiv = document.createElement('div');
+    accessTokenDiv.id = "access-token-info";
+    profileDiv.appendChild(accessTokenDiv);
+
+    const scopes = document.createElement('p');
+    scopes.innerHTML = "<strong>Access Token Acquired for Scopes: </strong>" + response.scopes;
+
+    accessTokenDiv.appendChild(scopes);
+}