Configuring Authentication Providers for Azure Web Apps
TypeScriptTo configure authentication providers for Azure Web Apps using Pulumi, you can utilize the
WebAppAuthSettings
orWebAppAuthSettingsV2Slot
resource from theazure-native
provider. These resources allow you to define the settings for enabling authentication and specifying the authentication providers such as Azure Active Directory, Facebook, Google, Microsoft Account, and Twitter.Below is a Pulumi program in TypeScript that demonstrates how you can configure authentication for an Azure Web App using Azure Active Directory (AAD) as the authentication provider. This example assumes you're already familiar with Azure AD and have the necessary application registration and configuration in place.
First, let me explain the key components of this configuration:
name
: The name of the Azure Web App to which the authentication settings will be applied.resourceGroupName
: The name of the resource group containing the Azure Web App.enabled
: This flag enables or disables the authentication functionality on the Web App.defaultProvider
: This setting specifies the default authentication provider to use.clientId
,clientSecretSettingName
,issuer
: These are specifics to Azure AD and will be used to set up the OpenID Connect provider.clientId
is the Application (client) ID in Azure AD,clientSecretSettingName
refers to the name of the setting that contains the client secret, andissuer
is the issuer URL of the Azure AD instance.allowedAudiences
: This is an array of allowed audiences for tokens, typically your app's client ID.
Now, let's move to the program:
import * as pulumi from "@pulumi/pulumi"; import * as azure_native from "@pulumi/azure-native"; // Define the settings for Azure Active Directory authentication. const activeDirectorySettings: azure_native.web.WebAppAuthSettingsV2SlotIdentityProvidersAzureActiveDirectory = { clientId: "<Azure-AD-Application-Client-ID>", // Your registered Azure AD application client ID. clientSecretSettingName: "<Azure-AD-Client-Secret-Setting-Name>", // The setting name that contains your client secret. issuer: "<Azure-AD-Issuer-URL>", // The issuer URL from your Azure AD directory, for example: https://login.microsoftonline.com/{tenantId}/v2.0 // You can specify additional settings if needed, such as token validation parameters, claims, etc. }; // Apply the authentication settings to an existing Azure Web App. const appAuthSettings = new azure_native.web.WebAppAuthSettings("appAuthSettings", { name: "<Your-Web-App-Name>", // The name of your Azure Web App. resourceGroupName: "<Your-Resource-Group-Name>", // The resource group name where your web app is deployed. enabled: true, // Set to 'true' to enable authentication on your web app. defaultProvider: azure_native.web.BuiltInAuthenticationProvider.AzureActiveDirectory, // Set Azure Active Directory as the default auth provider. clientId: activeDirectorySettings.clientId, // Your registered Azure AD application client ID. clientSecretSettingName: activeDirectorySettings.clientSecretSettingName, // The setting name that contains your client secret. issuer: activeDirectorySettings.issuer, // The issuer URL from your Azure AD. allowedAudiences: ["<Your-Azure-Web-App-Client-ID>"], // Allowed audience for tokens (usually the client ID of your app). // Optionally, you can configure other properties like token store, additional login parameters, etc. }); // Export the App Service's hostname to access it after deployment. export const hostname = pulumi.interpolate`https://${appAuthSettings.name}.azurewebsites.net`;
Please ensure you replace
<Azure-AD-Application-Client-ID>
,<Azure-AD-Client-Secret-Setting-Name>
,<Azure-AD-Issuer-URL>
,<Your-Web-App-Name>
,<Your-Resource-Group-Name>
, and<Your-Azure-Web-App-Client-ID>
with actual values from your environment.Before running this program, you must have the Pulumi CLI installed and configured, as well as access to an Azure subscription.
Remember to install the required Pulumi Azure Native package if you haven't already:
npm install @pulumi/azure-native
Once everything is set up, you can deploy your Pulumi stack with the following commands:
pulumi up
This command will prompt you to review the changes before applying them.
After the deployment is successful, you can visit the exported
hostname
URL to see your Azure Web App with Azure AD authentication configured. If someone tries to access the web app, they will be redirected to the Azure AD login page to authenticate before accessing the web content.