Skip to content

Files

Latest commit

pritamsopritamso
Broken link fixed
May 26, 2022
d58316b · May 26, 2022

History

History
328 lines (210 loc) · 18.9 KB

tutorial-connect-web-app-app-configuration.md

File metadata and controls

328 lines (210 loc) · 18.9 KB
title description author ms.author ms.service ms.topic ms.date
Tutorial: Connect a web app to Azure App Configuration with Service Connector
Learn how you can connect an ASP.NET Core application hosted in Azure Web Apps to App Configuration using Service Connector'
maud-lv
malev
service-connector
tutorial
05/01/2022

Tutorial: Connect a web app to Azure App Configuration with Service Connector

Learn how to connect an ASP.NET Core app running on Azure App Service, to Azure App Configuration, using one of the following methods:

  • System-assigned managed identity (SMI)
  • User-assigned managed identity (UMI)
  • Service principal
  • Connection string

In this tutorial, use the Azure CLI to complete the following tasks:

[!div class="checklist"]

  • Set up Azure resources
  • Create a connection between a web app and App Configuration
  • Build and deploy your app to Azure App Service

Prerequisites

Sign in to Azure

Sign in to the Azure portal at https://portal.azure.com/ with your Azure account.

Set up Azure resources

Start by creating your Azure resources.

  1. Clone the following sample repo:

    git clone https://github.com/Azure-Samples/serviceconnector-webapp-appconfig-dotnet.git

  2. Deploy the web app to Azure

    Run az login to sign in to and follow these steps to create an App Service and deploy the sample app. Make sure you have the Subscription Contributor role.

    SMI

    Create an app service and deploy the sample app that uses system-assigned managed identity to interact with App Config.

    # Change directory to the SMI sample
cd serviceconnector-webapp-appconfig-dotnet\system-managed-identity

# Create a web app

LOCATION='eastus'
RESOURCE_GROUP_NAME='service-connector-tutorial-rg'
APP_SERVICE_NAME='webapp-appconfig-smi'

az webapp up --location $LOCATION --resource-group $RESOURCE_GROUP_NAME --name $APP_SERVICE_NAME
    Parameter Description Example
    Location Choose a location near you. Use az account list-locations --output table to list locations. eastus
    Resource group name You'll use this resource group to organize all the Azure resources needed to complete this tutorial. service-connector-tutorial-rg
    App service name The app service name is used as the name of the resource in Azure and to form the fully qualified domain name for your app, in the form of the server endpoint https://<app-service-name>.azurewebsites.com. This name must be unique across all Azure and the only allowed characters are A-Z, 0-9, and -. webapp-appconfig-smi

    UMI

    Create an app service and deploy the sample app that uses user-assigned managed identity to interact with App Config.

    # Change directory to the UMI sample
cd serviceconnector-webapp-appconfig-dotnet\user-assigned-managed-identity

# Create a web app

LOCATION='eastus'
RESOURCE_GROUP_NAME='service-connector-tutorial-rg'
APP_SERVICE_NAME='webapp-appconfig-umi'

az webapp up --location $LOCATION --resource-group $RESOURCE_GROUP_NAME --name $APP_SERVICE_NAME
    Parameter Description Example
    Location Choose a location near you. Use az account list-locations --output table to list locations. eastus
    Resource group name You'll use this resource group to organize all the Azure resources needed to complete this tutorial. service-connector-tutorial-rg
    App service name The app service name is used as the name of the resource in Azure and to form the fully qualified domain name for your app, in the form of the server endpoint https://<app-service-name>.azurewebsites.com. This name must be unique across all Azure and the only allowed characters are A-Z, 0-9, and -. webapp-appconfig-umi

    Create a user-assigned managed identity. Save the output into a temporary notepad.

    az identity create --resource-group $RESOURCE_GROUP_NAME -n "myIdentity"

    Service principal

    Create an app service and deploy the sample app that uses service principal to interact with App Config.

    # Change directory to the service principal sample
cd serviceconnector-webapp-appconfig-dotnet\service-principal

# Create a web app

LOCATION='eastus'
RESOURCE_GROUP_NAME='service-connector-tutorial-rg'
APP_SERVICE_NAME='webapp-appconfig-sp'

az webapp up --location $LOCATION --resource-group $RESOURCE_GROUP_NAME --name $APP_SERVICE_NAME
    Parameter Description Example
    Location Choose a location near you. Use az account list-locations --output table to list locations. eastus
    Resource group name You'll use this resource group to organize all the Azure resources needed to complete this tutorial. service-connector-tutorial-rg
    App service name The app service name is used as the name of the resource in Azure and to form the fully qualified domain name for your app, in the form of the server endpoint https://<app-service-name>.azurewebsites.com. This name must be unique across all Azure and the only allowed characters are A-Z, 0-9, and -. webapp-appconfig-sp

    Create a service principal, make sure to replace the yourSubscriptionID with your actual subscription ID. Save the output into a temporary notepad.

    az ad sp create-for-rbac --name myServicePrincipal --role Contributor --scopes /subscriptions/{yourSubscriptionID}/resourceGroups/$RESOURCE_GROUP_NAME

    Connection string

    Create an app service and deploy the sample app that uses connection string to interact with App Config.

    # Change directory to the service principal sample
cd serviceconnector-webapp-appconfig-dotnet\connection-string

# Create a web app

LOCATION='eastus'
RESOURCE_GROUP_NAME='service-connector-tutorial-rg'
APP_SERVICE_NAME='webapp-appconfig-cs'

az webapp up --location $LOCATION --resource-group $RESOURCE_GROUP_NAME --name $APP_SERVICE_NAME
    Parameter Description Example
    Location Choose a location near you. Use az account list-locations --output table to list locations. eastus
    Resource group name You'll use this resource group to organize all the Azure resources needed to complete this tutorial. service-connector-tutorial-rg
    App service name The app service name is used as the name of the resource in Azure and to form the fully qualified domain name for your app, in the form of the server endpoint https://<app-service-name>.azurewebsites.com. This name must be unique across all Azure and the only allowed characters are A-Z, 0-9, and -. webapp-appconfig-cs

  3. Create an Azure App Configuration store

    APP_CONFIG_NAME='my-app-config'

az appconfig create -g $RESOURCE_GROUP_NAME -n $APP_CONFIG_NAME --sku Free -l eastus

  4. Import the test configuration file to Azure App Configuration.

    SMI

    Import the test configuration file to Azure App Configuration using a system-assigned managed identity.

    1. Cd into the folder ServiceConnectorSample

    2. Import the ./sampleconfigs.json test configuration file into the App Configuration store. If you're using Cloud Shell, upload sampleconfigs.json before running the command.

      az appconfig kv import -n $APP_CONFIG_NAME --source file --format json --path ./sampleconfigs.json --separator : --yes

    UMI

    Import the test configuration file to Azure App Configuration using a user-assigned managed identity.

    1. Cd into the folder ServiceConnectorSample

    2. Import the ./sampleconfigs.json test configuration file into the App Configuration store. If you're using Cloud Shell, upload sampleconfigs.json before running the command.

      az appconfig kv import -n $APP_CONFIG_NAME --source file --format json --path ./sampleconfigs.json --separator : --yes

    Service principal

    Import the test configuration file to Azure App Configuration using service principal.

    1. Cd into the folder ServiceConnectorSample

    2. Import the ./sampleconfigs.json test configuration file into the App Configuration store. If you're using Cloud Shell, upload sampleconfigs.json before running the command.

      az appconfig kv import -n $APP_CONFIG_NAME --source file --format json --path ./sampleconfigs.json --separator : --yes

    Connection string

    Import the test configuration file to Azure App Configuration using a connection string.

    1. Cd into the folder ServiceConnectorSample

    2. Import the ./sampleconfigs.json test configuration file into the App Configuration store. If you're using Cloud Shell, upload sampleconfigs.json before running the command.

      az appconfig kv import -n $APP_CONFIG_NAME --source file --format json --path ./sampleconfigs.json --separator : --yes

Connect the web app to App Configuration

Create a connection between your web application and your App Configuration store.

SMI

Create a connection between your web application and your App Configuration store, using a system-assigned managed identity authentication. This connection is done through Service Connector.

az webapp connection create appconfig -g $RESOURCE_GROUP_NAME -n $APP_SERVICE_NAME --app-config $APP_CONFIG_NAME --tg $RESOURCE_GROUP_NAME --connection "app_config_smi" --system-identity

system-identity refers to the system-assigned managed identity (SMI) authentication type. Service Connector also supports the following authentications: user-assigned managed identity (UMI), connection string (secret) and service principal.

UMI

Create a connection between your web application and your App Configuration store, using a user-assigned managed identity authentication. This connection is done through Service Connector.

az webapp connection create appconfig -g $RESOURCE_GROUP_NAME -n $APP_SERVICE_NAME --app-config $APP_CONFIG_NAME --tg $RESOURCE_GROUP_NAME --connection "app_config_umi" --user-identity client-id=<myIdentityClientId> subs-id=<myTestSubsId>

user-identity refers to the user-assigned managed identity authentication type. Service Connector also supports the following authentications: system-assigned managed identity, connection string (secret) and service principal.

There are two ways you can find the client-id:

  • In the Azure CLI, enter az identity show -n "myIdentity" -g $RESOURCE_GROUP_NAME --query 'clientId'.
  • In the Azure portal, open the Managed Identity that was created earlier and in Overview, get the value under Client ID.

Service principal

Create a connection between your web application and your App Configuration store, using a service principal. This is done through Service Connector.

az webapp connection create appconfig -g $RESOURCE_GROUP_NAME -n $APP_SERVICE_NAME --app-config $APP_CONFIG_NAME --tg $RESOURCE_GROUP_NAME --connection "app_config_sp" --service-principal client-id=<mySPClientId>  secret=<mySPSecret>

service-principal refers to the service principal authentication type. Service Connector also supports the following authentications: system-assigned managed identity (UMI), user-assigned managed identity (UMI) and connection string (secret).

Connection string

Create a connection between your web application and your App Configuration store, using a connection string. This connection is done through Service Connector.

az webapp connection create appconfig -g $RESOURCE_GROUP_NAME -n $APP_SERVICE_NAME --app-config $APP_CONFIG_NAME --tg $RESOURCE_GROUP_NAME --connection "app_config_cs" --secret

secret refers to the connection-string authentication type. Service Connector also supports the following authentications: system-assigned managed identity, user-assigned managed identity, and service principal.

Validate the connection

  1. To check if the connection is working, navigate to your web app at https://<myWebAppName>.azurewebsites.net/ from your browser. Once the website is up, you'll see it displaying "Hello. Your Azure WebApp is connected to App Configuration by ServiceConnector now".

How it works

Find below what Service Connector manages behind the scenes for each authentication type.

SMI

Service Connector manages the connection configuration for you:

  • Set up the web app's AZURE_APPCONFIGURATION_ENDPOINT to let the application access it and get the App Configuration endpoint. Access sample code.
  • Activate the web app's system-assigned managed authentication and grant App Configuration a Data Reader role to let the application authenticate to the App Configuration using DefaultAzureCredential from Azure.Identity. Access sample code.

UMI

Service Connector manages the connection configuration for you:

  • Set up the web app's AZURE_APPCONFIGURATION_ENDPOINT, AZURE_APPCONFIGURATION_CLIENTID to let the application access it and get app configuration endpoint in code;
  • Activate the web app's user-assigned managed authentication and grant App Configuration a Data Reader role to let the application authenticate to the App Configuration using DefaultAzureCredential from Azure.Identity. Access sample code.

Service principal

Service Connector manages the connection configuration for you:

  • Set up the web app's AZURE_APPCONFIGURATION_ENDPOINT to let the application access it and get the App Configuration endpoint. Access sample code.
  • save service principal credential to WebApp AppSettings AZURE_APPCONFIGURATION_CLIENTID. AZURE_APPCONFIGURATION_TENANTID, AZURE_APPCONFIGURATION_CLIENTSECRET and grant App Configuration Data Reader role to the service principal, so the application could be authenticated to the App Configuration in code, by using ClientSecretCredential from Azure.Identity.

Connection string

Service Connector manages the connection configuration for you:

  • Set up the web app's AZURE_APPCONFIGURATION_CONNECTIONSTRING to let the application access it and get the App Configuration connection string. Access sample code.
  • Activate the web app's system-assigned managed authentication and grant App Configuration a Data Reader role to let the application authenticate to the App Configuration using DefaultAzureCredential from Azure.Identity. Access sample code.

For more information, go to Service Connector internals.

Test (optional)

Optionally, do the following tests:

  1. Update the value of the key SampleApplication:Settings:Messages in the App Configuration Store.

    az appconfig kv set -n <myAppConfigStoreName> --key SampleApplication:Settings:Messages --value hello --yes

  2. Navigate to your Azure web app by going to https://<myWebAppName>.azurewebsites.net/ and refresh the page. You'll see that the message is updated to "hello".

Cleanup

Once you're done, delete the Azure resources you created.

az group delete -n <myResourceGroupName> --yes

Next steps

Follow the tutorials listed below to learn more about Service Connector.

[!div class="nextstepaction"] Learn about Service Connector concepts