migrate js sample from adal to msal (#68)

Author: derisen

JavascriptWebAppSample/README.md

@@ -1,47 +1,65 @@
 # Javascript Web App Sample
 
-For javascript web applications that want access to resources like Azure DevOps REST API's, they will have to support an authentication flow for their users. The [Azure Active Directory Authentication Library (ADAL) for JS](https://github.com/AzureAD/azure-activedirectory-library-for-js) enables javascript application developers to setup inerative authentication flows and obtain access tokens for API usage.
+For javascript web applications that want access to resources like Azure DevOps REST API, they will have to support an authentication flow for their users. The [Microsoft Authentication Library for JavaScript](https://github.com/AzureAD/microsoft-authentication-library-for-js) (MSAL.js) enables javascript application developers to setup interactive authentication flows and obtain access tokens for API usage.
 
 ## Sample Application
 
-This buildable sample will walk you through the steps to create a single page javascript application which uses ADAL to authenticate a user via an interactive prompt and display all projects contained in a Azure DevOps account/TFS collection.
+This sample will walk you through the steps to create a single-page javascript application which uses **MSAL.js** to authenticate a user via an interactive prompt and display all projects contained in an Azure DevOps account/TFS collection.
 
 To run this sample you will need:
-* Http-server. You can download [NPM http server](https://www.npmjs.com/package/http-server) if you need one.
-* An Azure Active Directory (AAD) tenant. If you do not have one, follow these [steps to set up an AAD](https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-howto-tenant)
-* A user account in your AAD tenant
-* A Azure DevOps account backed by your AAD tenant where your user account has access. If you have an existing Azure DevOps account not connected to your AAD tenant follow these [steps to connect your AAD tenant to your Azure DevOps account](https://docs.microsoft.com/en-us/azure/devops/organizations/accounts/manage-azure-active-directory-groups-vsts?view=vsts&tabs=new-nav)
 
-## Step 1: Clone or download vsts-auth-samples repository
+- [Node.js](https://nodejs.org/en/download/) must be installed to run this sample.
+- A modern web browser. This sample uses **ES6** conventions and will not run on **Internet Explorer**.
+- [Visual Studio Code](https://code.visualstudio.com/download) is recommended for running and editing this sample.
+- An Azure Active Directory (Azure AD) tenant. For more information on how to get an Azure AD tenant, see: [How to get an Azure AD tenant](https://azure.microsoft.com/documentation/articles/active-directory-howto-tenant/)
+- A user account in your Azure AD tenant.
+- An Azure DevOps account backed by your AAD tenant where your user account has access. If you have an existing Azure DevOps account not connected to your AAD tenant follow these [steps to connect your AAD tenant to your Azure DevOps account](https://docs.microsoft.com/azure/devops/organizations/accounts/manage-azure-active-directory-groups-vsts?view=vsts&tabs=new-nav)
 
-From a shell or command line: 
-```no-highlight
-git clone https://github.com/Microsoft/vsts-auth-samples.git
+## Step 1: Clone or download azure-devops-auth-samples repository
+
+From a shell or command line:
+
+```console
+git clone https://github.com/microsoft/azure-devops-auth-samples.git
+```
+
+Then locate the sample folder, where `package.json` file resides. Once you do, type:
+
+```console
+npm install
 ```
 
-## Step 2: Register the sample application with you Azure Active Directory tenant
+## Step 2: Register the app
+
+1. Navigate to the Microsoft identity platform for developers [App registrations](https://go.microsoft.com/fwlink/?linkid=2083908) page.
+1. Select **New registration**.
+1. In the **Register an application page** that appears, enter your application's registration information:
+   - In the **Name** section, enter a meaningful application name that will be displayed to users of the app, for example `devops-js-app`.
+   - Under **Supported account types**, select **Accounts in your organizational directory only**.
+   - In the **Redirect URI (optional)** section, select **Single-Page Application** in the combo-box and enter the following redirect URI: `http://localhost:8081/`.
+1. Select **Register** to create the application.
+1. In the app's registration screen, find and note the **Application (client) ID**. You use this value in your app's configuration file(s) later in your code.
+1. Select **Save** to save your changes.
 
-1. Sign in to the [Azure Portal](https://portal.azure.com).
-2. On the top bar, click on your account and under the Directory list, choose the Active Directory tenant where you wish to register your application.
-3. On the left hand navigation menu, select `Azure Active Directory`.
-4. Click on `App registrations` and select `New application registration` from the top bar.
-5. Enter a `name` for you application, ex. "Adal JS sample", choose `Web app/API` for `application type`, and enter `http://localhost:8081` for the `Sign-on URL`. Finally click `create` at the bottom of the screen.
-6. Save the `Application ID` from your new application registration. You will need it later in this sample.
-7. Grant permissions for Azure DevOps. Click `Settings` -> `Required permissions` -> `add` -> `1 Select an API` -> type in and select `Azure DevOps (Microsoft Visual Studio Team Services)` -> check the box for `Delegated Permissions` -> click `Select` -> click `Done` -> click `Grant Permissions` -> click `Yes`.
-8. Click on `Manifest` -> set the value for `oauth2AllowImplicitFlow` to `true` -> click `Save`.
+## Step 3: Configure the app to use your app registration
 
-## Step 3: Run the sample
+Open the project in your IDE (like Visual Studio or Visual Studio Code) to configure the code.
 
-1. Open `index.html` in [Visual Studio Code](https://code.visualstudio.com/download) or another text editor or IDE.
-2. Inside `index.html` there is a section called `Input Vars` you will need to update to run the sample:
-    * `clientId` - (Required) update this with the `application id` you saved from step 2.6 above
-    * `replyUri` - (optional)  In single page apps this should be the app URL itself. We have set this to `http://localhost:8081`(where we will host our app), but if you are hosting your app at another URL please change this value and the reply URI in `portal.azure.com`
-    * `logoutredirectUri` - (optional) update if you are hosting your app at a location other than `http://localhost:8081`
-    * `azureDevOpsApi` - (Required) update this with your Azure DevOps/TFS collection, e.g. http://dev.azure.com/organization/_apis/projects?api-version=4.0 for Azure DevOps or http://myserver:8080/tfs/DefaultCollection/_apis/projects?api-version=4.0 for TFS. If you would like the sample to run a different Azure DevOps API please change the entire string. [Learn more about other Azure DevOps REST API's](https://docs.microsoft.com/en-us/rest/api/vsts/?view=vsts-rest-4.1&viewFallbackFrom=vsts)
-    * `azureDevOpsResourceId` - Do not change this value. It is used to receive Azure DevOps ADAL authentication tokens
-3. Navigate to the ADAL JS sample in cloned repo `vsts-auth-samples/JavascriptWebAppSample/` and start your http-server and set it to serve pages at `localhost:8081` which will by default serve `index.html` at `http://localhost:8081`.
-4. Navigate to `http://localhost:8081`. Sign in with a user account from your AAD tenant which has access to the VSTS account specified in the `azureDevOpsApi`. All projects contained in the account should be displayed.
+> In the steps below, "ClientID" is the same as "Application ID" or "AppId".
 
+1. Open the `config.js` file
+1. Find the key `Enter_the_Application_Id_Here` and replace the existing value with the application ID (clientId) of the `devops-js-app` application copied from the Azure portal.
+1. Find the key `https://login.microsoftonline.com/Enter_the_Tenant_Info_Here` and replace the existing value with `https://login.microsoftonline.com/<your-tenant-id>`.
+1. Find the key `Enter_the_Redirect_Uri_Here` and replace the existing value with the base address of the `devops-js-app` project (by default `http://localhost:8081`).
 
+## Running the sample
+
+```console
+    npm start
+```
 
+## Explore the sample
 
+1. Open your browser and navigate to `http://localhost:8081`.
+1. Click the **sign-in** button on the top right corner.
+1. Once signed-in, select the **Call DevOps Rest API** button at the center.

JavascriptWebAppSample/app.js

@@ -0,0 +1,127 @@
+// Create the main myMSALObj instance
+// configuration parameters are located at config.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 || 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);
+    }
+}
+
+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);
+    } 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)
+    };
+
+    myMSALObj.logout(logoutRequest);
+}
+
+function getTokenRedirect(request) {
+    /**
+     * 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
+     */
+    request.account = myMSALObj.getAccountByUsername(username);
+
+    return myMSALObj.acquireTokenSilent(request)
+        .catch(error => {
+            console.warn("silent token acquisition fails. acquiring token using redirect");
+            if (error instanceof msal.InteractionRequiredAuthError) {
+                // fallback to interaction when silent call fails
+                return myMSALObj.acquireTokenRedirect(request);
+            } else {
+                console.warn(error);   
+            }
+        });
+}
+
+// Acquires and access token and then passes it to the API call
+function passTokenToApi() {
+    getTokenRedirect(tokenRequest)
+        .then(response => {
+            callApiWithToken(apiConfig.endpoint, response.accessToken);
+        }).catch(error => {
+            console.error(error);
+        });
+}
+
+selectAccount();

JavascriptWebAppSample/config.js

@@ -0,0 +1,78 @@
+
+/**
+ * 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: "http://localhost:8081", // You must register this URI on Azure Portal/App Registration. Defaults to window.location.href
+        postLogoutRedirectUri: "http://localhost:8081", // Simply remove this line if you would like navigate to index page after logout.
+        navigateToLoginRequestUrl: false, // 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 btw tabs.
+        storeAuthStateInCookie: false, // If you wish to store cache items in cookies as well as browser cache, set this to "true".
+    },
+    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;
+                }
+            }
+        }
+    }
+};
+
+// Add here the endpoints for services you would like to use.
+const apiConfig = {
+    endpoint: "https://dev.azure.com/msaltestingjs/_apis/projects?api-version=4.0",
+    scopes: ["499b84ac-1321-427f-aa17-267ca6975798/.default"] // do not change this value
+};
+
+/**
+ * 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"],
+};
+
+/**
+ * Add here the scopes to request when obtaining an access token for a web API. For more information, see:
+ * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-browser/docs/resources-and-scopes.md
+ */
+const tokenRequest = {
+    scopes: apiConfig.scopes,
+    forceRefresh: false // Set this to "true" to skip a cached token and go to the server to get a new token
+};
+
+/**
+ * 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: "[email protected]"
+// };

JavascriptWebAppSample/favicon.svg

@@ -0,0 +1,26 @@
+/** 
+ * Helper function to call web API endpoint
+ * using the authorization bearer token scheme
+*/
+function callApiWithToken(endpoint, token, callback) {
+    const headers = new Headers();
+    const bearer = `Bearer ${token}`;
+
+    headers.append("Authorization", bearer);
+
+    const options = {
+        method: "GET",
+        headers: headers
+    };
+
+    logMessage('Calling web API...');
+
+    fetch(endpoint, options)
+        .then(response => response.json())
+        .then(response => {
+            logMessage('Web API responds:');
+            logMessage(JSON.stringify(response.value[0], null, 4));
+        }).catch(error => {
+            console.error(error);
+        });
+}