Add JavaScript SPA to ms-identity-docs code samples

js-spa/App/authConfig.js

@@ -0,0 +1,69 @@
+/**
+ * Configuration object to be passed to MSAL instance on creation. 
+ * For a full list of MSAL.js configuration parameters, visit:
+ * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/configuration.md 
+ */
+
+const msalConfig = {
+    auth: {
+        clientId: 'Enter_the_Application_Id_Here', // This is the ONLY mandatory field that you need to supply.
+        authority: 'https://login.microsoftonline.com/Enter_the_Tenant_Info_Here', // Defaults to "https://login.microsoftonline.com/common"
+        redirectUri: '/', // You must register this URI on Azure Portal/App Registration. Defaults to window.location.href e.g. http://localhost:3000/
+        navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request location before processing the auth code response.
+    },
+    cache: {
+        cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO.
+        storeAuthStateInCookie: false, // set this to true if you have to support IE
+    },
+    system: {
+        loggerOptions: {
+            loggerCallback: (level, message, containsPii) => {
+                if (containsPii) {
+                    return;
+                }
+                switch (level) {
+                    case msal.LogLevel.Error:
+                        console.error(message);
+                        return;
+                    case msal.LogLevel.Info:
+                        console.info(message);
+                        return;
+                    case msal.LogLevel.Verbose:
+                        console.debug(message);
+                        return;
+                    case msal.LogLevel.Warning:
+                        console.warn(message);
+                        return;
+                }
+            },
+        },
+    },
+};
+
+/**
+ * Scopes you add here will be prompted for user consent during sign-in.
+ * By default, MSAL.js will add OIDC scopes (openid, profile, email) to any login request.
+ * For more information about OIDC scopes, visit: 
+ * https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-permissions-and-consent#openid-connect-scopes
+ */
+const loginRequest = {
+  scopes: ["openid", "profile"],
+};
+
+/**
+ * An optional silentRequest object can be used to achieve silent SSO
+ * between applications by providing a "login_hint" property.
+ */
+
+// const silentRequest = {
+//   scopes: ["openid", "profile"],
+//   loginHint: "example@domain.net"
+// };
+
+// exporting config object for jest
+if (typeof exports !== 'undefined') {
+  module.exports = {
+      msalConfig: msalConfig,
+      loginRequest: loginRequest,
+  };
+}

js-spa/App/authPopup.js

@@ -0,0 +1,95 @@
+// Create the main myMSALObj instance
+// configuration parameters are located at authConfig.js
+const myMSALObj = new msal.PublicClientApplication(msalConfig);
+
+let username = "";
+
+function selectAccount () {
+
+    /**
+     * See here for more info on account retrieval: 
+     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
+     */
+
+    const currentAccounts = myMSALObj.getAllAccounts();
+
+    if (!currentAccounts  || currentAccounts.length < 1) {
+        return;
+    } else if (currentAccounts.length > 1) {
+        // Add your account choosing logic here
+        console.warn("Multiple accounts detected.");
+    } else if (currentAccounts.length === 1) {
+        username = currentAccounts[0].username;
+        welcomeUser(username);
+        updateTable();
+    }
+}
+
+function handleResponse(response) {
+
+    /**
+     * To see the full list of response object properties, visit:
+     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#response
+     */
+
+    if (response !== null) {
+        username = response.account.username;
+        welcomeUser(username);
+        updateTable();
+    } else {
+
+        selectAccount();
+
+        /**
+         * If you already have a session that exists with the authentication server, you can use the ssoSilent() API
+         * to make request for tokens without interaction, by providing a "login_hint" property. To try this, comment the 
+         * line above and uncomment the section below.
+         */
+
+        // myMSALObj.ssoSilent(silentRequest).
+        //     then(() => {
+        //         const currentAccounts = myMSALObj.getAllAccounts();
+        //         username = currentAccounts[0].username;
+        //         welcomeUser(username);
+        //         updateTable();
+        //     }).catch(error => {
+        //         console.error("Silent Error: " + error);
+        //         if (error instanceof msal.InteractionRequiredAuthError) {
+        //             signIn();
+        //         }
+        //     });
+    }
+}
+
+function signIn() {
+
+    /**
+     * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
+     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
+     */
+
+    myMSALObj.loginPopup(loginRequest)
+        .then(handleResponse)
+        .catch(error => {
+            console.error(error);
+        });
+}
+
+function signOut() {
+
+    /**
+     * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
+     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
+     */
+
+    // Choose which account to logout from by passing a username.
+    const logoutRequest = {
+        account: myMSALObj.getAccountByUsername(username),
+        mainWindowRedirectUri: 'http://localhost:3000/signout',
+        redirectUri: 'http://localhost:3000/redirect.html',
+    };
+
+    myMSALObj.logoutPopup(logoutRequest);
+}
+
+selectAccount();

js-spa/App/authRedirect.js

@@ -0,0 +1,100 @@
+// Create the main myMSALObj instance
+// configuration parameters are located at authConfig.js
+const myMSALObj = new msal.PublicClientApplication(msalConfig);
+
+let username = "";
+
+/**
+ * A promise handler needs to be registered for handling the
+ * response returned from redirect flow. For more information, visit:
+ * 
+ */
+myMSALObj.handleRedirectPromise()
+    .then(handleResponse)
+    .catch((error) => {
+        console.error(error);
+    });
+
+function selectAccount () {
+
+    /**
+     * See here for more info on account retrieval: 
+     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-common/docs/Accounts.md
+     */
+
+    const currentAccounts = myMSALObj.getAllAccounts();
+
+    if (!currentAccounts) {
+        return;
+    } else if (currentAccounts.length > 1) {
+        // Add your account choosing logic here
+        console.warn("Multiple accounts detected.");
+    } else if (currentAccounts.length === 1) {
+        username = currentAccounts[0].username;
+        welcomeUser(username);
+        updateTable();
+    }
+}
+
+function handleResponse(response) {
+
+    /**
+     * To see the full list of response object properties, visit:
+     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#response
+     */
+
+    if (response !== null) {
+        username = response.account.username;
+        welcomeUser(username);
+        updateTable();
+    } else {
+
+        selectAccount();
+
+        /**
+         * If you already have a session that exists with the authentication server, you can use the ssoSilent() API
+         * to make request for tokens without interaction, by providing a "login_hint" property. To try this, comment the 
+         * line above and uncomment the section below.
+         */
+
+        // myMSALObj.ssoSilent(silentRequest).
+        //     then(() => {
+        //         const currentAccounts = myMSALObj.getAllAccounts();
+        //         username = currentAccounts[0].username;
+        //         welcomeUser(username);
+        //         updateTable();
+        //     }).catch(error => {
+        //         console.error("Silent Error: " + error);
+        //         if (error instanceof msal.InteractionRequiredAuthError) {
+        //             signIn();
+        //         }
+        //     });
+    }
+}
+
+function signIn() {
+
+    /**
+     * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
+     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
+     */
+
+    myMSALObj.loginRedirect(loginRequest);
+}
+
+function signOut() {
+
+    /**
+     * You can pass a custom request object below. This will override the initial configuration. For more information, visit:
+     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/request-response-object.md#request
+     */
+
+    // Choose which account to logout from by passing a username.
+    const logoutRequest = {
+        account: myMSALObj.getAccountByUsername(username),
+        postLogoutRedirectUri: 'http://localhost:3000/signout', // Simply remove this line if you would like navigate to index page after logout.
+
+    };
+
+    myMSALObj.logoutRedirect(logoutRequest);
+}

js-spa/App/index.html

@@ -0,0 +1,69 @@
+<!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>Microsoft identity platform</title>
+  <link rel="SHORTCUT ICON" href="./favicon.svg" type="image/x-icon">
+  <link rel="stylesheet" href="./styles.css">
+
+
+  <!-- msal.min.js can be used in the place of msal.js; included msal.js to make debug easy -->
+  <script id="load-msal" src="https://alcdn.msauth.net/browser/2.31.0/js/msal-browser.js"
+    integrity="sha384-BO4qQ2RTxj2akCJc7t6IdU9aRg6do4LGIkVVa01Hm33jxM+v2G+4q+vZjmOCywYq"
+    crossorigin="anonymous"></script>
+
+  <!-- adding Bootstrap 5 for UI components  -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
+</head>
+
+<body>
+  <nav class="navbar navbar-expand-lg navbar-dark bg-primary navbarStyle">
+    <a class="navbar-brand" href="/">Microsoft identity platform</a>
+    <div class="collapse navbar-collapse justify-content-end">
+      <button type="button" id="signIn" class="btn btn-secondary" onclick="signIn()">Sign-in</button>
+      <button type="button" id="signOut" class="btn btn-success d-none" onclick="signOut()">Sign-out</button>
+    </div>
+  </nav>
+  <br>
+  <h5 id="title-div" class="card-header text-center">Vanilla JavaScript single-page application secured with MSAL.js
+  </h5>
+  <h5 id="welcome-div" class="card-header text-center d-none"></h5>
+  <br>
+  <table id="table-div" class="table table-hover d-none">
+    <thead id="table-head-div">
+      <tr>
+        <th>Claim Type</th>
+        <th>Value</th>
+      </tr>
+    </thead>
+    <tbody id="table-body-div">
+    </tbody>
+  </table>
+  <p id="token-div"></p>
+  <div id="footer" class="footer-copyright text-center py-3 d-none">
+    <p>If you would like to learn more about the claims in your token, copy your <b>id token</b> string in console
+      and
+      head over to the <a href='https://jwt.ms/' target=”_blank”>jwt.ms</a></p>
+  </div>
+
+  <!-- importing bootstrap.js and supporting js libraries -->
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
+  integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
+
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" 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="./authRedirect.js"></script> -->
+  <!-- uncomment the above line and comment the line below if you would like to use the redirect flow -->
+  <script type="text/javascript" src="./authPopup.js"></script>
+</body>
+
+</html>

js-spa/App/redirect.html

@@ -0,0 +1,7 @@
+<!-- 
+    Blank page for redirect purposes. When using popup and silent APIs,
+    we recommend setting the redirectUri to a blank page or a page that does not implement MSAL.
+    For more information, please follow this link: 
+    https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/login-user.md#redirecturi-considerations 
+-->
+<h1>MSAL Redirect</h1>

js-spa/App/signout.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Azure AD | Vanilla JavaScript SPA</title>
+    <link rel="SHORTCUT ICON" href="./favicon.svg" type="image/x-icon">
+
+    <!-- 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>
+    <div class="jumbotron" style="margin: 10%">
+        <h1>Goodbye!</h1>
+        <p>You have signed out and your cache has been cleared.</p>
+        <a class="btn btn-primary" href="/" role="button">Take me back</a>
+    </div>
+</body>
+</html>

js-spa/App/styles.css

@@ -0,0 +1,3 @@
+.navbarStyle {
+    padding: .5rem 1rem !important;
+}