Adding authentication to static Azure Website

Question

We have an Azure Website hosting a static site (just some HTML, CSS, Javascript), which then communicates with our Azure Mobile Services by AJAX calls.

We would like to

Answer 1

A very simple form of authentication with a static username and password can be achieved by leveraging ASP.NET's authentication and authorization, integrated with IIS as described in this article: Apply ASP.NET Authentication and Authorization Rules to Static Content with IIS 7.0's Integrated Pipeline Feature.

Se this sample GitHub project for an example. The relevant pieces of code are this Web.config file that you should place in the root directory (which would be public):

<?xml version="1.0"?>
<configuration>
    <system.web>
        <compilation debug="false" />
        <authentication mode="Forms">
            <forms>
                <credentials passwordFormat="Clear">
                    <user name="Alice" password="secret" />
                </credentials>
            </forms>
        </authentication>
        <!-- Unless specified in a sub-folder's Web.config file, 
             any user can access any resource in the site -->
        <authorization>
            <allow users="*" />
        </authorization>
    </system.web>
    <system.webServer>
        <modules>
            <remove name="FormsAuthenticationModule" />
            <add name="FormsAuthenticationModule" type="System.Web.Security.FormsAuthenticationModule" />            
            <remove name="UrlAuthorization" />
            <add name="UrlAuthorization" type="System.Web.Security.UrlAuthorizationModule" />
        </modules>
    </system.webServer>
</configuration>

And this Web.config file that you could place in a subdirectory (which would be restricted):

<?xml version="1.0"?>
<configuration>
    <system.web>
        <!-- Anonymous users are denied access to this folder (and its subfolders) -->
        <authorization>
            <deny users="?" />
        </authorization>
    </system.web>
</configuration>

You also need a Login.aspx file with the HTML form and server-side authentication logic. See the Login.aspx in the sample project for an example.

This way you would be able to host both public files at root level and private files at subdirectories. If you want to protect even the root level, just adjust the authorization rules accordingly.

For documentation on configuration options see these MSDN pages:

• authorization Element (ASP.NET Settings Schema)
• allow Element for authorization (ASP.NET Settings Schema)
• deny Element for authorization (ASP.NET Settings Schema)

Answer 2

This is an old question that's been previously answered, but if you're looking for the easiest possible solution that requires no code or config changes, you can use Azure Websites Authentication / Authorization (disclaimer, I helped build this feature). Here are some links:

Blog Post: http://azure.microsoft.com/blog/2014/11/13/azure-websites-authentication-authorization/

Demo Video: http://azure.microsoft.com/en-us/documentation/videos/azure-websites-easy-authentication-and-authorization-with-chris-gillum/

EDIT: And here is a more recent blog post describing how you can use social providers (Twitter, Facebook, Google, Microsoft Accounts) in addition to the default Azure AD: https://azure.microsoft.com/en-us/blog/announcing-app-service-authentication-authorization/