Edit

Authenticate to Azure resources from on-premises JavaScript apps

  • Article

Apps running outside of Azure (for example on-premises or at a third-party data center) should use an application service principal to authenticate to Azure when accessing Azure resources. Application service principal objects are created using the app registration process in Azure. When an application service principal is created, a client ID and client secret are generated for your app. You store the client ID, client secret, and your tenant ID in environment variables so that the Azure SDK for JavaScript uses the environment variables to authenticate your app to Azure at runtime.

A different app registration should be created for each environment (such as test, stage, production) the app is running in. This allows environment-specific resource permissions to be configured for each service principal and make sure an app deployed to one environment doesn't talk to Azure resources that are part of another environment.

1 - Register the application in Azure

An app can be registered with Azure using either the Azure portal or the Azure CLI.

Sign in to the Azure portal and follow these steps.

Instructions Screenshot
In the Azure portal:
  1. Enter app registrations in the search bar at the top of the Azure portal.
  2. Select the item labeled App registrations under the under Services heading on the menu that appears below the search bar.
 A screenshot showing how to use the top search bar in the Azure portal to find and navigate to the App registrations page.
On the App registrations page, select + New registration. A screenshot showing the location of the New registration button in the App registrations page.
On the Register an application page, fill out the form as follows.
  1. Name → Enter a name for the app registration in Azure. It is recommended this name include the app name and environment (test, prod) the app registration is for.
  2. Supported account types → Accounts in this organizational directory only.
Select Register to register your app and create the application service principal.		 A screenshot to fill out Register by giving the app a name and specifying supported account types as accounts in this organizational directory only.
On the App registration page for your app:
  1. Application (client) ID → This is the app ID that your app will use to access Azure during local development. Copy this value to a temporary location in a text editor as you'll need it in a future step.
  2. Directory (tenant) ID → This value will also be needed by your app when it authenticates to Azure. Copy this value to a temporary location in a text editor it will also be needed it in a future step.
  3. Client credentials → You must set the client credentials for the app before your app can authenticate to Azure and use Azure services. Select Add a certificate or secret to add credentials for your app.
 A screenshot of the App registration after completion. This screenshot shows the application and tenant IDs, which will be needed in a future step.
On the Certificates & secrets page, select + New client secret. A screenshot showing the location of the link to use to create a new client secret on the certificates and secrets page.
The Add a client secret dialog will pop out from the right-hand side of the page. In this dialog:
  1. Description → Enter a value of Current.
  2. Expires → Select a value of 24 months.
Select Add to add the secret.

IMPORTANT: Set a reminder in your calendar prior to the expiration date of the secret. This way, you can add a new secret prior and update your apps prior to the expiration of this secret and avoid a service interruption in your app.		 A screenshot showing the page where a new client secret is added for the application service principal created by the app registration process.
The Certificates & secrets page shows the value of the client secret.

Copy this value to a temporary location in a text editor because you need it in a future step.

IMPORTANT: This is the only time you will see this value. Once you leave or refresh this page, you won't be able to see this value again. You may add another client secret without invalidating this client secret, but you won't see this value again.		 A screenshot showing the page with the generated client secret.

2 - Assign roles to the application service principal

Next, you need to determine what roles (permissions) your app needs on what resources and assign those roles to your app. Roles can be assigned a role at a resource, resource group, or subscription scope. This example will show how to assign roles for the service principal at the resource group scope since most applications group all their Azure resources into a single resource group.

Instructions Screenshot
Locate the resource group for your application by searching for the resource group name using the search box at the top of the Azure portal.

Navigate to your resource group by selecting the resource group name under the Resource Groups heading in the dialog box.		 A screenshot showing the top search box in the Azure portal to locate and navigate to the resource group you want to assign roles (permissions) to.
On the page for the resource group, select Access control (IAM) from the left-hand menu. A screenshot of the resource group page showing the location of the Access control (IAM) menu item.
On the Access control (IAM) page:
  1. Select the Role assignments tab.
  2. Select + Add from the top menu and then Add role assignment from the resulting drop-down menu.
 A screenshot showing how to navigate to the role assignments tab and the location of the button used to add role assignments to a resource group.
The Add role assignment page lists all of the roles that can be assigned for the resource group.
  1. Use the search box to filter the list to a more manageable size. This example shows how to filter for Storage Blob roles.
  2. Select the role that you want to assign.
    Select Next to go to the next screen.
 A screenshot showing how to filter and select role assignments to be added to the resource group.
The next Add role assignment page allows you to specify what user to assign the role to.
  1. Select User, group, or service principal under Assign access to.
  2. Select + Select members under Members
A dialog box opens on the right-hand side of the Azure portal.		 A screenshot showing the radio button to select to assign a role to a Microsoft Entra group and the link used to select the group to assign the role to.
In the Select members dialog:
  1. The Select text box can be used to filter the list of users and groups in your subscription. If needed, type the first few characters of the service principal you created for the app to filter the list.
  2. Select the service principal associated with your application.
Select Select at the bottom of the dialog to continue.		 A screenshot showing how to filter for and select the Microsoft Entra group for the application in the Select members dialog box.
The service principal shows as selected on the Add role assignment screen.

Select Review + assign to go to the final page and then Review + assign again to complete the process.		 A screenshot showing the completed Add role assignment page and the location of the Review + assign button used to complete the process.

3 - Configure environment variables for application

You must set the AZURE_CLIENT_ID, AZURE_TENANT_ID, and AZURE_CLIENT_SECRET environment variables for the process that runs your JavaScript app to make the application service principal credentials available to your app at runtime. The DefaultAzureCredential object looks for the service principal information in these environment variables.

AZURE_CLIENT_ID=<value>
AZURE_TENANT_ID=<value>
AZURE_CLIENT_SECRET=<value>

4 - Implement DefaultAzureCredential in application

To authenticate Azure SDK client objects to Azure, your application should use the DefaultAzureCredential class from the @azure/identity package.

First, add the @azure/identity package to your application.

npm install @azure/identity

Next, for any JavaScript code that creates an Azure SDK client object in your app, you'll want to:

  1. Import the DefaultAzureCredential class from the @azure/identity module.
  2. Create a DefaultAzureCredential object.
  3. Pass the DefaultAzureCredential object to the Azure SDK client object constructor.

An example of this is shown in the following code segment.

// connect-with-default-azure-credential.js
import { BlobServiceClient } from '@azure/storage-blob';
import { DefaultAzureCredential } from '@azure/identity';
import 'dotenv/config'

const accountName = process.env.AZURE_STORAGE_ACCOUNT_NAME;
if (!accountName) throw Error('Azure Storage accountName not found');

const blobServiceClient = new BlobServiceClient(
  `https://${accountName}.blob.core.windows.net`,
  new DefaultAzureCredential()
);

When the above code instantiates the DefaultAzureCredential object, DefaultAzureCredential reads the environment variables AZURE_SUBSCRIPTION_ID, AZURE_TENANT_ID, AZURE_CLIENT_ID, and AZURE_CLIENT_SECRET for the application service principal information to connect to Azure with.