Skip to content

Latest commit

 

History

History
66 lines (46 loc) · 3.89 KB

README.md

File metadata and controls

66 lines (46 loc) · 3.89 KB
Raw

Javascript Web App Sample

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 (MSAL.js) enables javascript application developers to setup interactive authentication flows and obtain access tokens for API usage.

Sample Application

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:

  • Node.js 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 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
  • 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

Step 1: Clone or download azure-devops-auth-samples repository

From a shell or command line:

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:

npm install

Step 2: Register the app

  1. Navigate to the Microsoft identity platform for developers App registrations page.
  2. Select New registration.
  3. 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/.
  4. Select Register to create the application.
  5. 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.
  6. Select Save to save your changes.

Step 3: Configure the app to use your app registration

Open the project in your IDE (like Visual Studio or Visual Studio Code) to configure the code.

In the steps below, "ClientID" is the same as "Application ID" or "AppId".

  1. Open the config.js file
  2. Find the key Enter_the_Application_Id_Here and replace it with the application ID (clientId) of the devops-js-app application copied from the Azure portal.
  3. Find the key Enter_the_Tenant_Id_Here and replace it with the ID of your Azure AD tenant.
  4. Find the key Enter_the_Redirect_Uri_Here and replace it with the base address of the devops-js-app project (by default http://localhost:8081).
  5. Find the key Enter_the_Tenant_Name_Here and replace it with the name of your Azure AD tenant.

Running the sample

    npm start

Explore the sample

  1. Open your browser and navigate to http://localhost:8081.
  2. Click the sign-in button on the top right corner.
  3. Once signed-in, select the Call DevOps Rest API button at the center.