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
- In the App Service’s Authentication / Authorization menu blade
- Set App Service Authentication to On
- Action to take when request is not authentication should be Log in with Azure Active Directory
- Create a new Azure AD App
- 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.
- Then, in your organization’s Azure Active Directory section
- Go to App registrations -> YourApp -> API permissions
- Remove any PowerApps Runtime Service permissions (in my case, it was user_impersonation)
- 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"}'