How to Setup Azure Front door for ASP.NET MVC Webapp hosted in Azure App Service with Azure AD Authentication
Published: 2022-07-05 10:44:27

---
title: How to Setup Azure Front door for ASP.NET MVC Webapp hosted in Azure App Service with Azure AD Authentication
published: true
date: 2022-06-16 09:59:51 UTC
tags: 
canonical_url: https://lkgforit.com/how-to-setup-azure-front-door-for-aspnet-mvc-webapp-hosted-in-azure-app-service-with-azure-ad-authentication
---

# Create Webapp - Azure App Service

Create a webapp - azure app service to host the webapp we are creating.

# Create Azure AD protected Webapp

Create a dotnet core webapp with Azure AD authentication using Open ID connect.

Follow this article to create a webapp with Azure AD:

[https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-asp-webapp](https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-asp-webapp)

# Create Azure Front Door

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1655364525515/FOniSusml.png)

## Create Front Door endpoint

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1655364591964/SpKI0m5vq_.png)

## Create Front door origin group

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1655364603623/WqPeEFZiB.png)

## Create Front door origin

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1655364608300/THHHaFUOR.png)

## Front door settings look like this after all above steps

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1655365196283/T7foAoxN3.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1655365379553/edHFHHfKY.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1655365358814/tmdJUJwpt.png)

In this we have to update the host header to empty so that the

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1655365480936/gl_JhTQLk.png)

# Update redirect Uri in Azure AD

Update the redirect Uri in Azure AD with the Front door endpoint url

# Update Webapp with the redirect Uri of Front door

When the Web App sits behind Azure Front Door, we need to configure the redirect\_uri in the /authorize request to be the Front Door's address.

In the code below we override the "OnRedirectToIdentityProvider" event and inject the Front Door's address. When I was trying this out, I simply hardcoded the address but ideally, you'd extract it from the headers that Front Door injects into the request.

This is the code I used when trying to authenticate my dotnet core Server App (.net 6) running on an Azure App Service, Protected by Azure AD, running behind Azure Front Door.

```
public void ConfigureServices(IServiceCollection services)
{
    // ... existing code

    services.AddAuthentication(OpenIdConnectDefaults.AuthenticationScheme)
                .AddMicrosoftIdentityWebApp(Configuration.GetSection("AzureAd"))
                .EnableTokenAcquisitionToCallDownstreamApi(new[] { "User.Read" })
                .AddInMemoryTokenCaches();

    services.Configure<OpenIdConnectOptions>(OpenIdConnectDefaults.AuthenticationScheme, options =>
    {
        options.Events = new OpenIdConnectEvents
        {
            OnRedirectToIdentityProvider = (context) =>
            {   
                // Override the redirect_uri
                // Ideally extract this from config 
                // Or context.Request.Headers["X-Forwarded-Host"]
                // see: https://docs.microsoft.com/en-us/azure/frontdoor/front-door-http-headers-protocol#front-door-to-backend

                context.ProtocolMessage.RedirectUri 
                    = "https://YOUR-FRONT-DOOR-or-APP-GATEWAY/signin-oidc";
                return Task.FromResult(0);
            }
        };
    });

    services.Configure<ForwardedHeadersOptions>(options =>
    {
        options.ForwardedHeaders = ForwardedHeaders.XForwardedFor |
                        ForwardedHeaders.XForwardedProto;
        options.KnownNetworks.Clear();
        options.KnownProxies.Clear();
    });

    // ... existing code
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    // ... existing code

    // Don't forget to add this ...
    app.UseForwardedHeaders();

    // ... existing code
}

```

When the code works, the "redirect\_uri" param should point to your Front Door/Gateway as shown here.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1655364777509/732_Bfilc.png)

### Reference

[https://stackoverflow.com/questions/61733729/authentication-with-azure-ad-redirect-uri-is-incorrect-using-frontdoor](https://stackoverflow.com/questions/61733729/authentication-with-azure-ad-redirect-uri-is-incorrect-using-frontdoor)