Code Sample: ASP.NET MVC 3 Custom Login Page

  • Article

Updated: June 19, 2015

Applies To: Azure

This sample illustrates how to create a custom login or Home Realm Discovery page in an ASP.NET MVC3 application that uses Microsoft Azure Active Directory Access Control (also known as Access Control Service or ACS). The code for this sample is located in the MVC3CustomSignInPage (C#\Websites\MVC3CustomSignInPage) subdirectory of the Microsoft Azure Active Directory Access Control (ACS) Code Samples package.

Prerequisites

To run this sample, you will need:

  1. An account in the Azure portal and an Access Control namespace.

  2. Visual Studio 2010 (any version)

  3. ASP .NET MVC3 (https://www.asp.net/mvc/mvc3)

  4. Windows Identity Foundation SDK

For more details, see ACS Prerequisites (https://go.microsoft.com/fwlink/?LinkId=221065).

Configuring the Sample

The ACS configuration required for this sample can be performed using either the ACS Management Portal or the ACS Management Service. This topic describes both options.

Option 1: Configuring the Sample via the ACS Management Portal

To configure the sample in the ACS Management Portal

  1. Go to the Microsoft Azure Management Portal (https://manage.WindowsAzure.com), sign in, and then click Active Directory. (Troubleshooting tip: "Active Directory" item is missing or not available)

  2. To create an Access Control namespace, click New, click App Services, click Access Control, and then click Quick Create. (Or, click Access Control Namespaces before clicking New.)

  3. To manage an Access Control namespace, select the namespace, and then click Manage. (Or, click Access Control Namespaces, select the namespace, and then click Manage.)

    This action opens the Access Control Service management portal.

  4. To establish relationships with the identity providers, click Identity providers and then select the identity providers you would like to use, such as, Google, Yahoo!, and Facebook. For more information about how to obtain the prerequisite keys for Facebook, see How To: Configure Facebook as an Identity Provider (https://go.microsoft.com/fwlink/?LinkId=221151). Then click the Home link in the left navigation menu of the page to return to the main page.

  5. To register your application with ACS, in the Access Control Service management portal, click the Relying party applications link located on the main page, select Add, and enter the following information in the form:

    • In the Name field, enter ASPNET MVC3 Custom.

    • In the Realm field, enter https://localhost:64000/

    • In the Return URL field, enter https://localhost:64000/Account/SignIn

    • In the Token format field, select SAML 2.0.

    • In the Identity providers section, select Facebook, Google, Windows Live ID, and Yahoo!

    • In the Token signing field, select Use service namespace certificate (standard).

  6. Click Save and then navigate back the main page.

  7. With your relying party application configured, it is now time to create the rules that determine the claims that ACS will issue to your application. In this sample, we will pass through all claims issued by the identity providers. To create this rule, click Rule Groups, located on the main page, and click the Default rule group for ASPNET MVC3 Custom rule group.

  8. At the bottom of the page, click the Generate link. Ensure that Facebook, Yahoo, and are selected and click Generate.

  9. With ACS configured, open Visual Studio.

Option 2: Configuring the Sample Using the ACS Management Service

The Visual Studio sample solution has a command line application called ConfigureSample which uses the ACS Management Service and the common helpers defined in the Common class library. This application can be used to configure your Access Control namespace for use with this sample.

To configure the sample using the ACS Management Service

  1. Update the Common class library with information about your Access Control namespace. Open SamplesConfiguration.cs and enter the following information:

    • ServiceNamespace - This is the namespace used with ACS.

    • ManagementServiceIdentityName - This is a management service account’s name.

    • ManagementServiceIdentityKey - This is the password associated with the management service account.

    • AcsHostUrl - This is the host name of ACS.

  2. In the ConfigureSample project, open Program.cs and enter the following information:

    1. applicationId - This is your Facebook application’s Application Id.

    2. applicationSecret - This is your Facebook application’s Application Secret.

    For details about how to get these keys, refer to How To: Configure Facebook as an Identity Provider (https://go.microsoft.com/fwlink/?LinkId=221151).

  3. Run the ConfigureSample application in Visual Studio, which will configure ACS to run this sample.

Running the Sample

To run the sample

  1. Open the sample located in Websites\MVC3CustomSignInPage\MVC3CustomSignInPage.sln in Visual Studio.

  2. To add ACS as the STS reference, right-click MVCCustomSignInPage and select Add STS Reference from the context menu.

  3. In the dialog box, enter the root of the web application into the Application URI field and click Next. For this sample, this value is https://localhost:64000/

    Note

    The trailing slash is important as it lines up with the values you entered in ACS for your relying party. The wizard will issue a warning that your site is not using SSL. Accept this warning by clicking the Yes button, but remember that a production website should almost always use SSL for these types of scenarios.

  4. In the next window, select the Use Existing STS radio button and enter the URI of the WS-Federation metadata published by your Access Control namespace. That URI can be found on the portal under Application Integration. If your Access Control namespace is mvc3samples, then the URI is https:// mvc3samples.accesscontrol.windows.net/FederationMetadata/2007-06/FederationMetadata.xml. After you enter this value, click Next.

  5. Since your website does not require encrypted tokens, click Next on the remaining dialog boxes, and then click Finish.

  6. Your application is now configured to use ACS with the ASP .NET blanket resource protection. We need to disable this protection so that we can use our own custom login page with more detailed MVC3 authentication filters. In the web.config file, under configuration, delete the following setting:

    <location path="FederationMetadata">
   <system.web>
     <authorization>
       <allow users="*" />
     </authorization>
   </system.web>
</location>

  7. Under the system.web delete the following setting:

    <authorization>
     <deny users="?" />
   </authorization>

    With these two settings removed, ASP .NET is not performing any authentication or authorization on our behalf.

  8. Press F5 in Visual Studio to run the application. Your browser will take you to the main page of the application.

  9. Click the Sign In link in the upper-right corner and select an identity provider from the list that appears. After authenticating, you will return to the Home page and your user information will be displayed in the upper-right corner (note that will not provide a user name).

  10. Click Log Off to log off. This will clear the session cookies and return you back to main page.

  11. Click the Directory link. Since you are no longer authenticated, you will be asked to pick an identity provider to access the Directory page.

This is because the Directory page (Index in DirectoryController) is protected via the RequireAuthenticationAttribute. Once you pick an identity provider and authenticate, you will be directed back to the Directory page.