Azure Front Door with Azure Storage Blobs

Artem Shaturskyi 145

Hello!
We have an Azure Blob Storage account containing a large number of media files (.MP4). These files are manually organized into categorized folders under a single container. Our goal is to allow all corporate users to access the container and watch the media files directly in their browsers - no streaming or additional services, just simple playback.

I initially tried using Static Website Hosting with a pre-generated index.html, but generating SAS tokens for every file is not a feasible solution due to the large number of files.

I decided to implement Azure Front Door for the storage account, and it seems to work for file access, but I can't configure it to require user authentication.
How can I configure Azure Front Door to enforce Microsoft Entra ID authentication for accessing storage resources?

hossein jalilian 9,940 Reputation points

2025-02-06T17:52:03.4633333+00:00
Hello Artem Shaturskyi,

Thanks for posting your question in the Microsoft Q&A forum.

Azure Front Door doesn't natively support Microsoft Entra ID authentication for direct blob access. However, you can achieve this by using a combination of Azure Front Door, Azure Functions, and Azure Storage.

Create an Azure Function App: Develop an HTTP-triggered function that acts as a proxy between Front Door and Blob Storage and implement Microsoft Entra ID authentication in the function.

Configure Azure Front Door: Set up a backend pool pointing to your Azure Function App, then create routing rules to direct traffic to the function.

Implement authentication and authorization: Use Microsoft.Identity.Web library in your Azure Function to handle Microsoft Entra ID authentication, validate user tokens and permissions in the function.

Proxy requests to Blob Storage: Once authenticated, use the Azure Storage SDK in your function to retrieve the requested blob, stream the blob content back to the client through the function response.

Configure CORS: Set up CORS rules on your Storage account to allow requests from your Front Door endpoint.

Please don't forget to close up the thread here by upvoting and accept it as an answer if it is helpful
Artem Shaturskyi 145 Reputation points

2025-02-07T07:48:45.76+00:00

Disgusting. A simple and seemingly obvious task requires writing a custom backend. Really? There’s no way to do this without coding, just by using Azure resources?
Udayashankar K.N 235 Reputation points Microsoft Employee

2025-02-10T11:37:25.06+00:00

Considering that Front door configuration being a complex one as an alternate you can even use Private Endpoint + Application Gateway

Use Azure Storage Private Endpoint to block direct internet access.

Deploy an Azure Application Gateway with Microsoft Entra authentication.

Route traffic through Azure Front Door → App Gateway → Storage.
Suwarna S Kale 786 Reputation points

2025-02-10T19:02:52.01+00:00

Hello Artem Shaturskyi,

Thank you for posting your question in the Microsoft Q&A forum.

Using Microsoft Entra ID authentication for direct blob access. Instead, it is designed for internet-facing scenarios and is optimized for publicly accessible blobs. To authenticate blob access you may try SAS (Shared Access Signature) with FrontDoor. Refer Microsoft doc link - https://learn.microsoft.com/en-us/azure/frontdoor/scenario-storage-blobs

For direct blob access with Microsoft Entra ID authentication, you can use Azure Storage, which supports Microsoft Entra ID to authorize requests to blob data. Refer Microsoft doc link - https://learn.microsoft.com/en-us/azure/storage/blobs/authorize-access-azure-active-directory

Please let me know if this helped to resolve the issue on your side. Please remember "Accept Answer" if above reply helped, so that others in the community facing similar issues can easily find the solution.
Sai Prasanna Sinde 3,920 Reputation points Microsoft Vendor

2025-02-12T08:07:25.37+00:00

Hi @Artem Shaturskyi

Following up to see if the below answers helped. If you have any further queries, please let us know in the comments below so that we can address them.
Sai Prasanna Sinde 3,920 Reputation points Microsoft Vendor

2025-02-13T08:12:34.44+00:00

Hi @Artem Shaturskyi

Following up to see if the below answers helped. If you have any further queries, please let us know in the comments below so that we can address them.
Artem Shaturskyi 145 Reputation points

2025-02-17T20:18:01.2133333+00:00

Hi @Udayashankar K.N,
Could you provide more details on how to 'Deploy an Azure Application Gateway with Microsoft Entra authentication'?
I’ve set up a storage account and an application gateway, and blobs are accessible through the gateway’s public frontend IP. How can I require authentication?
Sai Prasanna Sinde 3,920 Reputation points Microsoft Vendor

2025-02-18T10:39:08.1533333+00:00
Hi @Artem Shaturskyi

Since you have a storage account and an application gateway, and blobs are accessible through the gateway’s public frontend IP, please follow the below steps:

Please go to your Microsoft EntraID > App registrations > New registrations,

Give your application a name and under supported account types, choose the appropriate option for your organization.

For redirect URI (which is an optional one), select Web and enter a placeholder like https://localhost. This won't be used directly but is required for the registration. You'll configure the actual redirect URI later and click on register. Please refer the document.

Next configure your application gateway's HTTP settings:

Go to your Application gateway > settings > HTTP settings Either create a new HTTP setting or edit an existing one that's associated with your backend pool for the blob storage and set Protocol to HTTPS. This is essential for the authentication flow. Set Port to 443 and under Authentication, select Enabled.

Next configure your authentication settings in HTTP settings:

In the same HTTP Settings blade (where you enabled Authentication), you'll see the Authentication configuration section.

Issuer: This is the URL of your Azure AD tenant. You can find this in the Azure portal under Azure Active Directory -> Properties. It will look something like [https://sts.windows.net/<your-tenant-id>/.] Replace <your-tenant-id> with your actual tenant ID.

Audience: This is the Application (client) ID of the App Registration you created in step. You can find this on the "Overview" page of the app registration in Azure AD.

Redirect URL: This is the URL that Azure AD will redirect to after successful authentication. It must match the URL that users will use to access your blob storage through the Application Gateway. This will be the frontend IP address or DNS name of your Application Gateway, followed by the path to your blob storage and select OpenID Connect as authentication type.

Next configure IAM on storage account level:

Go to storage account > IAM > Add a role assignment > Select the "Storage Blob Data Reader" role.

For "Select," choose "User, group, or service principal." Search for and select the App Registration you created and save.

Try to access your blob storage through the Application Gateway's public IP or DNS name and you will be redirected to the Microsoft login page.

After successful authentication, you should be able to browse and access the blobs in your storage container.

Kindly let us know if the above helps or you need further assistance on this issue.

1 answer

Vallepu Venkateswarlu 475 Microsoft Vendor

Hi @Artem Shaturskyi

Welcome to the Microsoft Q&A Platform.

Thank you for reaching out, & I hope you are doing well.

Play your video files using the Storage Account Static Website with Entra ID authentication by following the steps below.

Create an app registration by navigating to Microsoft EntraID > App registrations > New registrations.
Add the redirect URL as static website endpoint url and localhost urlbelow.

enter image description here

Enable the tokens for auto-authorization in application.

enter image description here

Configure the storage account with Entra ID authentication as below.

enter image description here

Configure CORS settings with required permissions in storage account.

enter image description here

Configure the container access level to Private.

enter image description here

Storage account Static Website Url

enter image description here

Upload the index.html file below into the $web container, and make sure to replace it with your Application ID, Tenant ID, and Storage Website URL.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Secure Video Gallery</title>
    <script src="https://alcdn.msauth.net/browser/2.29.0/js/msal-browser.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        #video-list {
            margin-top: 20px;
        }
        .video-item {
            cursor: pointer;
            padding: 10px;
            border: 1px solid #ccc;
            margin: 5px;
            display: inline-block;
            background-color: #f9f9f9;
        }
        .video-item:hover {
            background-color: #ddd;
        }
        video {
            width: 80%;
            margin-top: 20px;
        }
        #logout-btn {
            display: none; /* Hide logout button initially */
            margin-top: 10px;
            background-color: red;
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
        }
        #auth-message {
            margin-top: 15px;
            font-weight: bold;
            color: green;
            display: none; /* Hide the message initially */
        }
    </style>
</head>
<body>
    <h2>Secure Video Gallery</h2>
    <button id="login-btn" onclick="signIn()">Sign in with Entra ID</button>
    <button id="logout-btn" onclick="signOut()">Sign Out</button>
    
    <div id="auth-message"></div> <!-- Authentication Success Message -->
    <div id="video-list">Please sign in to view videos.</div>
    <video id="video-player" controls crossorigin="anonymous" preload="auto">
        <source id="video-source" src="" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <script>
        // Azure Entra ID Authentication Configuration
        const msalConfig = {
            auth: {
                clientId: "2487cxxxxxxxxxxxxxxx136163cc3502", // Replace with your Azure AD App Registration Client ID
                authority: "https://login.microsoftonline.com/<Tenant_ID>", // Replace with your Tenant ID
                redirectUri: "https://venkatstofragetest.z13.web.core.windows.net/" // Your Static Website URL
            }
        };
        const msalInstance = new msal.PublicClientApplication(msalConfig);
        const blobListUrl = "https://venkatstofragetest.blob.core.windows.net/$web?restype=container&comp=list";
        const storageScope = "https://storage.azure.com/user_impersonation"; // OAuth Scope for Azure Storage
        function updateUI(isAuthenticated) {
            document.getElementById("login-btn").style.display = isAuthenticated ? "none" : "inline-block";
            document.getElementById("logout-btn").style.display = isAuthenticated ? "inline-block" : "none";
            document.getElementById("auth-message").style.display = isAuthenticated ? "block" : "none";
            if (isAuthenticated) {
                document.getElementById("auth-message").innerText = "✅ Authentication successful.";
            } else {
                document.getElementById("auth-message").innerText = "";
            }
        }
        async function signIn() {
            try {
                const response = await msalInstance.loginPopup({
                    scopes: [storageScope]
                });
                console.log("✅ Signed in:", response.account);
                updateUI(true);
                fetchVideos(); // Fetch videos after login
            } catch (error) {
                console.error("🔴 Login failed:", error);
                document.getElementById("video-list").innerHTML = `<p>Login failed. Please try again.</p>`;
            }
        }
        async function signOut() {
            try {
                await msalInstance.logoutPopup();
                console.log("✅ Signed out");
                updateUI(false);
                document.getElementById("video-list").innerHTML = `<p>Please sign in to view videos.</p>`;
            } catch (error) {
                console.error("🔴 Logout failed:", error);
            }
        }
        async function fetchVideos() {
            try {
                const account = msalInstance.getAllAccounts()[0];
                if (!account) {
                    document.getElementById("video-list").innerHTML = `<p>Please sign in to view videos.</p>`;
                    return;
                }
                console.log("🔹 Fetching access token...");
                // Acquire Access Token for Blob Storage
                const tokenResponse = await msalInstance.acquireTokenSilent({
                    scopes: [storageScope],
                    account: account
                });
                if (!tokenResponse || !tokenResponse.accessToken) {
                    throw new Error("🔴 Failed to obtain access token.");
                }
                console.log("✅ Access Token Received:", tokenResponse.accessToken);
                // Fetch video list with Authentication
                const response = await fetch(blobListUrl, {
                    method: "GET",
                    mode: "cors",
                    cache: "no-cache",
                    headers: {
                        "Authorization": `Bearer ${tokenResponse.accessToken}`,
                        "x-ms-version": "2020-06-12",
                        "Accept": "application/xml"
                    }
                });
                if (!response.ok) {
                    throw new Error(`🔴 HTTP error! Status: ${response.status}`);
                }
                const text = await response.text();
                console.log("🔹 Blob XML Response:", text);
                const parser = new DOMParser();
                const xml = parser.parseFromString(text, "application/xml");
                const blobs = xml.getElementsByTagName("Blob");
                let videoList = document.getElementById("video-list");
                videoList.innerHTML = ""; // Clear previous list
                let videoFound = false;
                for (let i = 0; i < blobs.length; i++) {
                    let fileName = blobs[i].getElementsByTagName("Name")[0].textContent;
                    let fileUrl = `https://venkatstofragetest.blob.core.windows.net/$web/${encodeURIComponent(fileName)}`;
                    // Only add MP4 files
                    if (fileName.toLowerCase().endsWith(".mp4")) {
                        videoFound = true;
                        let videoItem = document.createElement("div");
                        videoItem.className = "video-item";
                        videoItem.textContent = fileName;
                        videoItem.onclick = function () {
                            let videoSource = document.getElementById("video-source");
                            let videoPlayer = document.getElementById("video-player");
                            videoSource.src = fileUrl;
                            videoPlayer.load();
                            videoPlayer.play(); // Ensure playback starts
                        };
                        videoList.appendChild(videoItem);
                    }
                }
                if (!videoFound) {
                    videoList.innerHTML = "<p>No videos found.</p>";
                }
            } catch (error) {
                console.error("🔴 Error fetching video list:", error);
                if (error.message.includes("401")) {
                    document.getElementById("video-list").innerHTML = `<p>Unauthorized. Please check storage permissions.</p>`;
                } else if (error.message.includes("403")) {
                    document.getElementById("video-list").innerHTML = `<p>Forbidden. You may not have access to this storage account.</p>`;
                } else if (error.message.includes("CORS")) {
                    document.getElementById("video-list").innerHTML = `<p>CORS issue detected. Ensure Azure Storage CORS settings are correct.</p>`;
                } else {
                    document.getElementById("video-list").innerHTML = `<p>Error loading videos. Please try again later.</p>`;
                }
            }
        }
        // Check if the user is already signed in
        window.onload = () => {
            const account = msalInstance.getAllAccounts()[0];
            if (account) {
                console.log("🔹 User already signed in:", account);
                updateUI(true);
                fetchVideos();
            }
        };
    </script>
</body>
</html>

Once you have completed all the steps, try accessing the static website URL in a browser. You will see the page as shown below.

enter image description here

Azure AD authentication page

enter image description here

Here is the result after signing in with Entra ID authentication.

Note: Make sure to assign the required role to access the Blob, Like Storage Blob Data Contributor

enter image description here

Here is the result if someone without the required role tries to access it.

enter image description here

If you want to access the static website URL within a private network, you can enable a Private Endpoint in the Storage Account and disable public access in the firewall.

Reference: Use private endpoints for Azure Storage

I hope this helps to resolve your issue.

Please don’t forget to close the thread by clicking "Accept the answer" wherever the information provided helps you, as this can be beneficial to other community members.

Share via

Azure Front Door with Azure Storage Blobs

1 answer

Your answer