How to activate Azure Active Directory Authentication for an App Service while avoiding “You do not have permission to view this directory or page.” errors

  1. In the App Service’s Authentication / Authorization menu blade
    1. Set App Service Authentication to On
    2. Action to take when request is not authentication should be Log in with Azure Active Directory
    3. Create a new Azure AD App
    4. Test logging into your web app and confirm it doesn’t work, failing with this error message You do not have permission to view this directory or page.
  2. Then, in your organization’s Azure Active Directory section
    1. Go to App registrations -> YourApp -> API permissions
    2. Remove any PowerApps Runtime Service permissions (in my case, it was user_impersonation)
    3. Wonder why it was necessary for this permission to be added by default, then go on with your life

How to log into the right subscription using the Azure CLI

az login --tenant <your-tenant-id>

# check your subscriptions, see what's default and what's not
az account list --output table

# just in case you want to see the tenants, too
az account list --output table --query "[].{tenant:homeTenantId, name:name, id_:id, isDefault: isDefault, state:state}"

# set the default subscription, this is the one you'll run your commands against
az account set --subscription "<your-subscription-id>"

Fix React-Redux routing issues with Windows App Services

Create a web.config file with the following structure and make sure it gets deployed in your wwwroot.

<?xml version="1.0"?>
<configuration>
    <location path="index.html">
        <system.webServer>
            <staticContent>
                <clientCache cacheControlMode="DisableCache" />
            </staticContent>
        </system.webServer>
    </location>
    <system.webServer>
    <staticContent>
        <!-- Serve json files -->
        <remove fileExtension=".json" />
        <mimeMap fileExtension=".json" mimeType="application/json" />

        <!-- Serve fonts, too -->
        <remove fileExtension=".woff" />
        <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
        <remove fileExtension=".woff2" />
        <mimeMap fileExtension=".woff2" mimeType="application/font-woff" />        
    </staticContent>
        <rewrite>
            <rules>
                <rule name="React Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

An alternative web.config template is here.

Don’t show .html extension for static *.html sites

<configuration>
  <system.webServer>
      <rewrite>
            <rules>
                <rule name="RewriteURL" stopProcessing="true">
                    <match url="^(.*)$" />
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="{R:1}.html" />
                </rule> 
           </rules>
       </rewrite>
    </system.webServer>    
 </configuration>

– via Stack Overflow

Naming guidelines/conventions for Azure resources

These guides from Microsoft Learn are quite good:

Configure Web Apps using rich/nested objects

Aka how do you go from defining a rich configuration section in your appsettings.Development.json file to configuring it in the web app’s Configuration blade.

If you’re using Windows web apps, then you just need to use the “:” (colon) character to define nested key structures. If you’re on Linux, then you need to use “__” (double underscore). Arrays are supported in both cases, but you’ll need to manually specify the indexes in the key name i.e. MyConfiguration__ClientEvents__0 or MyConfiguration:ClientEvents:0.

For example:

{
    "MyConfiguration": {
        "ClientId": "marco",
        "ClientSecret": "polo",        
        "ClientEvents": [
            "SimulationStarted",
            "SimulationEnded"
        ],
    }
}

Will be configured in a Linux web app’s Configuration blade as:

[
  {
    "name": "MyConfiguration__ClientId",
    "value": "marco",
    "slotSetting": false
  },
  {
    "name": "MyConfiguration__ClientSecret",
    "value": "polo",
    "slotSetting": false
  },
  {
    "name": "MyConfiguration__ClientEvents__0",
    "value": "SimulationStarted",
    "slotSetting": false
  },
  {
    "name": "MyConfiguration__ClientEvents__1",
    "value": "SimulationEnded",
    "slotSetting": false
  }
]

See also the wiki on injecting configuration objects in your services/controllers to see how you can access these values in your code.

– via StackOverflow

Unable to save app service configuration (or anything, really), due to “Deny Public Network Access” policy

Even though you’re using a VNET and have enabled private endpoints.

In my case, I could see that "publicNetworkAccess": null in the service’s JSON view, which means the public network access is dynamically set based on the networking settings. Guessing the policy doesn’t check for this dynamic setting, I’ve set manually publicNetworkAccess as Disabled. Saving the app service configuration worked afterwards 😬.

az webapp config set --name <function_name> --resource-group <resource_group> --generic-configurations '{"publicNetworkAccess":"Disabled"}'