Integration with Facebook Authentication for Web Application using Azure ACS

Tweet

This post talks about implementing Facebook authentication for an ASP.NET application using Windows Azure Access Control Service. Windows Azure ACS provides powerful way for securing the services such as Web Sites, Web Application and Services etc.

In this post, I am planning to take an empty Web Application and securing the same using Windows Azure ACS 2.0.

The implementation of the steps follows –

Creating an Empty ASP.NET Application
Step 1: As this is a POC, I am creating a sample empty ASP.NET application. So create a new Web Application in Visual Studio by selecting File -> New -> Project. Provide the project name (ACSFaceBookAuthentication) and press OK.

Step 2: Run the project and verify the project running perfectly.

Note the url of the application. For Ex: http://localhost:21212/.

Creating Windows Azure ACS namespace
Our requirement here is to integrate authentication mechanism using Windows Azure ACS. So we need to create a namespace in ACS and configure the authentication using Facebook application created before.

Step 1: open the Windows Azure management portal using http://windows.azure.com/. (The new portal is http://manage.windowsazure.com/ - but currently the new portal does not integrate Appfabric features.)

Step 2: Press Service Bus, Access Control & Caching from the left menu and press Access Control.

Press New icon. Portal will show Create a new Service Namespace window.

Step 3: Provide unique namespace and select region. (Make sure the Access Control selected in the popup window).

Press Create Namespace button. The portal will create the namespace and activate the same.

Step 4: Once the namespace activated, select the same and copy the endpoint of the namespace from the properties window in the right hand side.

Creating Facebook Application
For implementing Facebook Authentication integration our Web Application, we need to create a Facebook Application. So follow the below steps.

Step 1: Open the Facebook developer page by browsing http://developer.facebook.com/.

Step 2: Press the Apps menu and press +Create New App button for creating a new application.

Step 3: Provide the required information in the Create New App window and press Continue button.

App Name: This is the name of the application. For Ex: Integration with ACS.
App Namespace: This is the application namespace which can contains lowercase letters, dashes and underscores. It cannot contain spaces. For Ex: fbintegrationwithacs
Web Hosting: Leave the check box unchecked.

Step 4: Facebook will show Security Check window, provide the security check and press Submit.

Step 5: Facebook will create the application and show the basic information as below.

Step 6: Expand the Website with Facebook Login section and past the endpoint of the ACS namespace created and copied in the previous section (Creating Windows Azure ACS namespace - Step 4).

Step 7: Select the application created from Recently Viewed application list. Facebook will show the details of the application as below.

Note the Application ID (App ID/API Key) and Application secret (App secret) which will be used for configuring the ACS in next section.

Configuring ACS namespace
Step 1: Open the Windows Azure Management Portal and select the Service Bus, Access Control and Caching menu.

Step 2: Select the namespace and press Access Control Service from the ribbon tab.

The browser will show the Access Control Service portal.
Step 3: Select the Identity providers menu and press the Add hyperlink to add Facebook as identity provider for this endpoint.

The portal will show Add Identity Provider page.
Step 4: Select Facebook application option and press Next button.

Portal will show the Add Facebook Application page.
Step 5: Provide the Application ID and Application secret keys in the corresponding entry fields which got from the previous section (Creating Facebook Application – Step 7) and press Save.

Step 6: Select the Relying Party Applications from the left menu and press Add hyperlink to add a new Relying Party Application.

The portal will show Add Relying Party Application page.
Step 7: Provide the following input and press Save.
Name: Relying Party Application Name which can be understandable. For Ex: Facebook RP
Mode: Leave Enter settings manually.
Realm: Enter the application url which was noted when creating application in the first section (Creating an Empty ASP.NET Application – Step 2). When the application hosted on Azure, you required to change the Realm of the Azure application url.
Return URL: Enter the same application url.
Token format: Select SAML 2.0
Identity Providers: Select Facebook as identity providers and select Create new rule groups from the Rule groups.

Step 8: Select the Rule Groups from the left menu and select the rule groups of the relying party created.

The portal will open the Edit Rule Group page.
Step 9: Press Add hyperlink for adding a new rule for Facebook application.

The portal will open the Add Claim Rule page.
Step 10: We are configuring pass through output claim only for any input claim. So provide the below inputs and Save.

Step 11: Save in the Edit Rule Group page.

Now we have configured required inputs. We need to integrate the ACS endpoint to the Web application created.
Step 12: Select the Application integration from the left menu and copy the WS-Federation Metadata from the Application Integration page.

Configuring Web Application
Step 1: Right click the project and select Add STS reference from the menu.
Note: You need to install Windows Identity Foundation SDK setup in the development system for enabling Add STS reference in Visual Studio. Find the setup files in below url
http://www.microsoft.com/en-us/download/details.aspx?id=17331

In sometime, after installing the setup also, the Add STS reference menu won’t appear, in that case open the Visual Studio Command Prompt and navigate to the Common\IDE folder. For 32 bit system the path will be C:\Program Files\Microsoft Visual Studio 10.0\Common7\IDE.

Run the following command and restart the Visual Studio.
devenv /ResetAddin Microsoft.IdentityModel.Tools.VS.VSAddin.FederationAddin

Step 2: The Visual Studio will open Administration: Federation Utility window. Enter the application Web.Config file path in the Application configuration location entry field.
Enter the Application URI which was noted in first section Creating an Empty ASP.NET Application - Step 2 and press Next.

Step 3: There will be an alert which informing the application hosted not in a secure https connection. Press Yes to continue.

Step 4: In the Secure Token Service window, select the Use an existing STS option and enter the STS WS-Federation metadata location which noted in the (Configuring ACS namespace – Step 16).

Press Next to contine.
Step 5: Leave Disable certificate chain validation option in the STS signing certificate chain validation error window and press Next.

Step 6: Leave No encryption option in the Security token encryption window and press Next.

Step 7: Press Next in Offered claims and Finish in Summary window.

Step 8: There will be a Federation Utility completed successfully message. Press OK.

Step 9: Open the Web.Config of the project and confirm the below configuration exist under system.web node.

<httpRuntime requestValidationMode="2.0"/>
<httpModules>
  <add name="WSFederationAuthenticationModule" type="Microsoft.IdentityModel.Web.WSFederationAuthenticationModule, Microsoft.IdentityModel, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
  <add name="SessionAuthenticationModule" type="Microsoft.IdentityModel.Web.SessionAuthenticationModule, Microsoft.IdentityModel, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</httpModules>

Step 10: Run the project. You will get the login screen for logging with the Facebook credentials.

Once the login successful, it will show a window for confirming to go to that application. Go to App button.

Step 11: The ACS will redirect to the application url with the output claims. The application can read the claim and show on the page.

Reading the claims in Application
We can read the claims in the application code and use it as required. Include the below code in the Page Load event of the Default.aspx file and run the project.

protected void Page_Load(object sender, EventArgs e)
{
    ContentPlaceHolder cph = (ContentPlaceHolder)this.Master.FindControl("MainContent");

    IClaimsPrincipal claimsPrincipal = Page.User as IClaimsPrincipal;
    IClaimsIdentity claimsIdentity = (IClaimsIdentity)claimsPrincipal.Identity;

    Table claimsTable = new Table();
    TableRow headerRow = new TableRow();

    TableCell claimTypeCell = new TableCell();
    claimTypeCell.Text = "Claim Type";
    claimTypeCell.BorderStyle = BorderStyle.Solid;

    TableCell claimValueCell = new TableCell();
    claimValueCell.Text = "Claim Value";
    claimValueCell.BorderStyle = BorderStyle.Solid;

    headerRow.Cells.Add(claimTypeCell);

    headerRow.Cells.Add(claimValueCell);

    claimsTable.Rows.Add(headerRow);

    TableRow newRow;
    TableCell newClaimTypeCell, newClaimValueCell;

    foreach (Claim claim in claimsIdentity.Claims)
    {
        newRow = new TableRow();

        newClaimTypeCell = new TableCell();
        newClaimTypeCell.Text = claim.ClaimType;
        newClaimValueCell = new TableCell();
        newClaimValueCell.Text = claim.Value;

        newRow.Cells.Add(newClaimTypeCell);
        newRow.Cells.Add(newClaimValueCell);

        claimsTable.Rows.Add(newRow);
    }
    cph.Controls.Add(claimsTable);
}

Run the project and see the output

download the working copy of the source code in C# here.