How to configure appservice authentication for azure webapps

Hey, What's up, Welcome back to another very exiting tutorial by Ciemasen. Today we are going to be take a look at How to configure appservice authentications for azure webapps using azure DevOps. Hope you enjoyed the previous article on How to Deploy Azure Function With Azure DevOps. If you missed the previous article, we suggest you to have a look on that first.

Overview

Azure App Service provides built-in authentication and authorization capabilities which is known as easy auth. Using easy auth you can configure app services to handle authentications without any code changes. You can read more on app service authentication using this official article. In this article we will be configuring azure app service authentications for web app with azure ad login provider using azure DevOps ARM template. You can do the same thing from azure portal also. 

Azure App Registration

• Sign in to the Azure portal
• From the portal menu, select Azure Active Directory, then go to the App registrations tab and select New registration
• In the Register an application page, enter a Name for your app registration
• In Redirect URI, select Web and type <app-url>/.auth/login/aad/callback
• Select Register
• After the app registration is created, copy the Application (client) ID and the Directory (tenant) ID for later
• Select Authentication. Under Implicit grant and hybrid flows, enable ID tokens to allow OpenID Connect user sign-ins from App Service. Select Save
• Select Expose an API, and click Set next to "Application ID URI" and that will looks like api://<application-client-id>
• select API permissions > Add a permission > Microsoft Graph
• select Delegated permissions > OpenId permissions
• select following permissions 
  • email
  • offline_access
  • openid
• Click add permission
• Click Grant admin consent

Azure app service ARM template

You can have a look on our previous article which we discussed about How to Deploy Azure Webapp With Azure DevOps.

Enable app service authentication

Let's create a parameter to accept Application (client) ID

"clientId": {
  "type": "string"
}

Now we can add new Microsoft.Web sites/config 'authsettingsV2' config resource in to resources section of the web app resource in arm template.

{
  "name": "authsettingsV2",
  "type": "config",
  "apiVersion": "2021-03-01",
  "dependsOn": [
    "[resourceId('Microsoft.Web/Sites', parameters('webAppName'))]"
  ],
  "properties": {
    "platform": {
      "enabled": "true"
    },
    "globalValidation": {
      "requireAuthentication": "true",
      "unauthenticatedClientAction": "RedirectToLoginPage",
      "redirectToProvider": "azureActiveDirectory"
    },
    "identityProviders": {
      "azureActiveDirectory": {
        "enabled": "true",
        "registration": {
          "openIdIssuer": "[concat('https://login.microsoftonline.com/',subscription().tenantId,'/v2.0')]",
          "clientId": "[parameters('clientId')]"
        },
        "login": {
          "loginParameters": [
            "[concat('scope=','openid profile email offline_access')]"
          ]
        },
        "validation": {
          "allowedClientApplications": [
            "[parameters('clientId')]"
          ],
          "allowedAudiences": []
        }
      }
    },
    "login": {
      "tokenStore": {
        "enabled": "true"
      },
      "preserveUrlFragmentsForLogins": "true",
      "allowedExternalRedirectUrls": [
        "https://login.windows.net",
        "[concat('https://',parameters('webAppName'),'.azurewebsites.net')]",
        "[concat('https://',parameters('webAppName'),'.azurewebsites.net/.auth/login/aad/callback')]"
      ]
    },
    "httpSettings": {
      "requireHttps": "true"
    }
  }
}

Complete ARM template will look like this

{
  "$schema": "https://schema.management.azure.com/schemas/2019-04-01/deploymentTemplate.json#",
  "contentVersion": "1.0.0.0",
  "parameters": {
    "webAppName": {
      "type": "string",
      "defaultValue": "[concat('webApp-', uniqueString(resourceGroup().id))]",
      "minLength": 2,
      "metadata": {
        "description": "Web app name."
      }
    },
    "location": {
      "type": "string",
      "defaultValue": "[resourceGroup().location]",
      "metadata": {
        "description": "Location for all resources."
      }
    },
    "sku": {
      "type": "string",
      "defaultValue": "F1",
      "metadata": {
        "description": "The SKU of App Service Plan."
      }
    },
    "clientId": {
      "type": "string"
    }
  },
  "variables": {
    "appServicePlanName": "[concat('AppServicePlan-', parameters('webAppName'))]"
  },
  "resources": [
    {
      "type": "Microsoft.Web/serverfarms",
      "apiVersion": "2020-06-01",
      "name": "[variables('appServicePlanName')]",
      "location": "[parameters('location')]",
      "sku": {
        "name": "[parameters('sku')]"
      }
    },
    {
      "type": "Microsoft.Web/sites",
      "apiVersion": "2020-06-01",
      "name": "[parameters('webAppName')]",
      "location": "[parameters('location')]",
      "dependsOn": [
        "[resourceId('Microsoft.Web/serverfarms', variables('appServicePlanName'))]"
      ],
      "properties": {
        "serverFarmId": "[resourceId('Microsoft.Web/serverfarms', variables('appServicePlanName'))]"
      },
      "resources": [
        {
          "name": "authsettingsV2",
          "type": "config",
          "apiVersion": "2021-03-01",
          "dependsOn": [
            "[resourceId('Microsoft.Web/Sites', parameters('webAppName'))]"
          ],
          "properties": {
            "platform": {
              "enabled": "true"
            },
            "globalValidation": {
              "requireAuthentication": "true",
              "unauthenticatedClientAction": "RedirectToLoginPage",
              "redirectToProvider": "azureActiveDirectory"
            },
            "identityProviders": {
              "azureActiveDirectory": {
                "enabled": "true",
                "registration": {
                  "openIdIssuer": "[concat('https://login.microsoftonline.com/',subscription().tenantId,'/v2.0')]",
                  "clientId": "[parameters('backendClientId')]"
                },
                "login": {
                  "loginParameters": [
                    "[concat('scope=','openid profile email offline_access')]"
                  ]
                },
                "validation": {
                  "allowedClientApplications": [
                    "[parameters('clientId')]"
                  ],
                  "allowedAudiences": [
                    "[concat('https://',parameters('webAppName'),'.azurewebsites.net')]"
                  ]
                }
              }
            },
            "login": {
              "tokenStore": {
                "enabled": "true"
              },
              "preserveUrlFragmentsForLogins": "true",
              "allowedExternalRedirectUrls": [
                "https://login.windows.net",
                "[concat('https://',parameters('webAppName'),'.azurewebsites.net')]",
                "[concat('https://',parameters('webAppName'),'.azurewebsites.net/.auth/login/aad/callback')]"
              ]
            },
            "httpSettings": {
              "requireHttps": "true"
            }
          }
        }
      ]
    }
  ]
}

Now you have the ARM template ready and you can continue to the deployment using azure DevOps. You just need to deploy the ARM template using ARM template deployment task and then you can deploy the web application using app service deployment task. Our previous article on How to Deploy Azure Webapp With Azure DevOps has the full details on how to automate the web app deployment using azure DevOps. Your deployment will create a new web app and configure app service authentication with the provided app registration details. 

Hope you enjoy the tutorial and see you soon in another very exiting tutorial