• Article

Exercise 3: Take control of the Sign-In experience

Using the WIF wizard for outsourcing authentication to ACS creates what is often referred to as “blanket protection”: from that moment on, any attempt from an unauthenticated user to access any page in the Web site triggers a redirection to the ACS. There are various scenarios in which that is not the effect you want to achieve: for example you may want to leave some pages available also to unauthenticated users, or you may want to take finer control on the authentication experience.

ACS makes it easy for you to craft your own authentication pages if you choose to, by providing you with boilerplate HTML code already geared to use the endpoints in your own namespace. You can just cut and paste the code in your app and integrate it with whatever UI elements you see fit. The last exercise of this introductory lab shows you precisely how to do that.

Task 1 – Hosting a Login Page as Part of your Application

  1. Copy the completed solution of the Ex02 to Source\Ex03-CustomSignInExperience\Begin.

    Figure 39

    Copying the completed solution from the previous exercise

    Note:
    Although exercises in our hands-on labs are normally independent from each other, in this case there are shared settings in the cloud that would not make much sense to duplicate here. If you didn’t go through the first exercise and you didn’t set up the ACS account, namespaces and similar you will need to follow the instructions of tasks 2, 3 and 4 from exercise 1 before going further with exercise 3.

  2. Navigate to https://windows.azure.com/. You will be prompted for your Windows Live ID credentials if you are not already signed in.
  3. Select the Access Control in the navigation pane and click the Service Namespace you created. Click the Service Namespace you created in the first exercise. Click the Access Control Service button located in the ribbon bar to manage your service.

  4. Go to Development section and click the Application Integration link.

    Figure 40

    Application Integration

  5. Select your relying party application (WebSiteACS).

    Figure 41

    Login Page Integration

  6. In the Option 2: Host the login page as part of your application section, click Download Example Login Page.

    Figure 42

    Login Page Integration

  7. Save the HTML file in %SystemDrive%\inetpub\wwwroot\WebSiteACS.

    Note:
     If you don’t have permissions to save the file, proceed to download it into My Documents folder instead, and then move it to %SystemDrive%\inetpub\wwwroot\WebSiteACS. If Destination Folder Access Denied prompt is shown, click the Continue button.

  8. Open Microsoft Visual Studio 2010 with administrator privileges. From Start | All Programs | Microsoft Visual Studio 2010, right-click Microsoft Visual Studio 2010 and select Run as administrator.
  9. Open the WebSiteACS.sln solution file (copied in step 1) located inside the Source\Ex03-EasyAuthorizationWithACS\Begin folder of this Lab.
  10. Go to the Solution Explorer and right-click https://localhost/WebSiteACS/ and Add Existing Item, select the HTML file that you downloaded in step 7 (WebSiteACSLoginPageCode.html) and click Add.
  11. Double-click the HTML file that you downloaded in step 7 (WebSiteACSLoginPageCode.html) to open it in Microsoft Visual Studio 2010.

  12. Go to the DIV tag with ID=“Banner” and replace the text “Sign in to WebSiteACS” with “My custom login page for WebSiteACS”.

    HTML

    <div id="Main" style="display:none"> <div id="Banner" class="Banner"><b>My custom login page for WebSiteACS</b></div>

  13. Go to <style> section and update the following CSS classes:
    • div.SignInContent
      • width: 1020px;
      • height: 170px;
    • div.Banner
      • width: 1020px;
      • background: none repeat scroll 0 0 #4B6C9E;
      • color: #F9F9F9;
    • div.LeftArea
      • width: 960px;

  14. The CSS classes should look like:

    CSS

    div.SignInContent { text-align: center; margin-left: auto; margin-right: auto; border: solid 1px #BBBBBB; position: relative; width: 1020px; height: 170px; } div.Banner { padding-top:10px; padding-bottom:10px; text-align: center; margin-left: auto; margin-right: auto; background: none repeat scroll 0 0 #4B6C9E; color: #F9F9F9; border-top: solid 1px #BBBBBB; border-left: solid 1px #BBBBBB; border-right: solid 1px #BBBBBB; width: 1020px; } div.LeftArea { padding:15px 15px; width: 960px; height: 100%; position: absolute; top: 0px; left: 0px; }

  15. Go to the Solution Explorer and open Web.config file.

  16. Add the following section inside <configuration> node:

    (Code Snippet – Introduction to AppFabric AC Lab - Ex03Location -XML)

    XML

    <configuration>
    FakePre-89ff5729c5a74d6bacdb7a4d9fe87f82-690846f9e8b240edadecccce820b711dFakePre-03d8be77981e4413be880225a7a25720-a7a7bd1767404aeb98ef72e87ad9393bFakePre-f25bfe0f15254db69b0d2f6449646ee2-a94e655eab284c349a024d747edaca49 <location path="WebSiteACSLoginPageCode.html"> <system.web> <authorization> <allow users="*"/> </authorization> </system.web> </location>FakePre-37a6de8fb9fe477c8c0c25d74f1c25ec-89937cf6b2fd4263a036886a123026a2FakePre-fd6bfd035b3a4041a20216b87caeb6b1-61b83e25eeff4640815eaabe9a2031e2FakePre-d20d7da6e4be422e83c341c3994a7f0c-ea59f09328cd4a33a74d351311b093c1

  17. Go to microsoft.identityModel/service/federatedAuthentication/wsFederation section and update the issuer attribute with “https://localhost/WebSiteACS/WebSiteACSLoginPageCode.html”.

  18. The web.config should look like the code bellow.

    XML

    <microsoft.identityModel> <service saveBootstrapTokens="true"> ... <federatedAuthentication> <wsFederation passiveRedirectEnabled="true" issuer="https://localhost/WebSiteACS/WebSiteACSLoginPageCode.html" realm="https://localhost/WebSiteACS/" requireHttps="true"/> <cookieHandler requireSsl="true"/> </federatedAuthentication>

  19. Save and close Web.config file.

Exercise 3: Verification

In order to verify that you have correctly performed all steps in exercise three, proceed as follows:

  1. Start debugging by pressing F5. The relying party application (https://localhost/WebSiteACS/) will redirect to the Access Control Service to authenticate.

  2. Choose your favorite Identity Provider (i.e.: Live ID) from your custom login page and put your credentials.

    Figure 43

    Custom Login Page

  3. Access Control sent to our application the claims it was expecting and we are now authenticated.
  4. Close the browser.

Exercise 3: Summary

The last exercise of the lab showed you how you can seamlessly integrate ACS authentication elements in your Web site, demonstrating that you can take advantage of ACS’ advanced capabilities without having to break the experience and style you want for your web applications.

< previous | next >

Downloads

Download The Offline Training Kit
Download Hands-on Lab Document (DOCX)
Download Hands-on Lab Source Files

Contents