How to: Host Login Pages in Your ASP.NET Web Application

  • Article

Updated: June 19, 2015

Applies To: Azure

Applies To

  • Microsoft® Azure™ Access Control Service (ACS)

  • ASP.NET

Overview

This topic describes how to host a login page in your ASP.NET application. This method allows to fully customize your login page with regards to its layout, look, and feel. The communication from your custom login page to ACS is performed over the JSON feed that ACS exposes.

To enable full control over the appearance, behavior, and location of your federated login page, ACS provides a JSON-encoded metadata feed that provides the names, login URLs, images, and email domain names (AD FS only) for your identity providers. This feed is known as the “Home Realm Discovery Metadata Feed.” ACS provides an example of a custom login page that includes the necessary code to communicate with the Home Realm Discovery Metadata Feed. This page can be downloaded and fully customized.

Contents

  • Objectives

  • Overview

  • Summary of Steps

  • Step 1 – Downloading an Example Custom Login Page

  • Step 2 – Customizing the Look and Feel of Your Custom Login Page

  • Step 3 – Integrating a Custom Login Page in an ASP.NET Web Application

Objectives

  • Becoming familiar with a login page in the ACS Management Portal.

  • Ensuring that each objective is expressed as a specific task

  • Hosting a login page in an ASP.NET web application to provide a consistent look and feel.

Summary of Steps

  • Step 1 – Download an Example Custom Login Page

  • Step 2 – Customize the Look and Feel of Your Custom Login Page

  • Step 3 – Integrate a Custom Login Page in an ASP.NET Web Application

Step 1 – Download an Example Custom Login Page

This step shows how to download an example custom login page. You will use the example custom login page to customize to your needs and then host it in your ASP.NET application.

To download an example custom login page

  2. If you were not authenticated using Windows Live® ID, you will be required to do so.

  3. After being authenticated with your Windows Live ID (Microsoft account), you are redirected to the My Projects page on the Azure portal.

  4. Click the desired project name on the My Project page.

  5. On the project’s detail page, locate the desired namespace, and then click the Access Control link in the Manage column.

  6. On the Access Control Settings page, click Manage Access Control.

  7. Scroll down to the Develop section, and then click the Application Integration link.

  8. In the Login Pages section, click the Login Pages link.

  9. On the Login Page Integration page, click the desired relying party application in the Relying Party Application column.

  10. On the Login Page Integration: <<Your Replying Party>> page, locate Option 2: Host the login page as part of your application section, and then click the Download Example Login Page button. Save the page to an arbitrary location. This is the page you will use for customization. The page’s name is usually <<YourRealm>>LoginPageCode.html.

Step 2 – Customizing the Look and Feel of Your Custom Login Page

In this step you customize the example custom login page you downloaded in previous page.

  1. Use any HTML editor of your choice—it can be as simple as Notepad or as robust as the Visual Studio® 2010 HTML Editor.

  2. Design the look and feel of your custom login page to your desire.

Step 3 – Integrating a Custom Login Page in an ASP.NET Web Application

In this step you integrate your newly designed custom login page with your ASP.NET web application.

  1. Copy your newly designed custom login page into a public location in your ASP.NET web application—usually the root folder.

  2. Expose the URL to your custom login page on a public page, usually Default.aspx. Unauthenticated users will click it to be authenticated.