SharePoint 2010: Create unique login page with forms based authentication

An awesome feature with SharePoint is the ability to use another authentication store for your users. This is especially helpful when you want to extend your site to an extranet or internet zone and you don’t want your external users in your company Active Directory. I walk through configuring and setting up CBA here. Once you’ve configured your web application to use FBA, the typical login page is plain. If you setup mixed mode (as in my example) the login page simply prompts for Windows or Forms authentication. Most users don’t understand the difference.

Seriously, what end user doesn’t know they’re using a Windows account? And my extranet users, seriously, they should know they’re forms…

Fortunately, we can change these options and give the user a little more to work with. For my example, I have my web application setup and I want my customers to login so we can collaborate on orders and projects. I would like a login page that is painfully obvious as to which how the user should login. We’ll dive into how to do so now. I walk through creating a new project with the end result being a feature. I prefer this method because it gives us the most flexibility with a code behind file. We could add CAPTCHA verification, or additional components as we need to make this work.

• Open Visual Studio 2010, create a new Empty SharePoint Project, and name it CustomLoginPage.
• Add the reference to Microsoft.SharePoint.IndentityModel. This isn’t available in the browser, you’ll have to browse to it at C:\Windows\assembly\GAC_MSIL\Microsoft.SharePoint.IdentityModel\ 14.0.0.0__71e9bce111e9429c\Microsoft.SharePoint.IdentityModel.dll
• Add a new application page, call it Login.aspx.
• Replace the content of Login.aspx with the following, updating a few items as necessary (highlighted)

  <%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %> 
  <%@ Assembly Name="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
  <%@ Assembly Name="Microsoft.SharePoint.IdentityModel, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
  <%@ Import Namespace="Microsoft.SharePoint" %> 
  <%@ Import Namespace="Microsoft.SharePoint.WebControls" %> 
  <%@ Register Tagprefix="SharePoint" 
  Namespace="Microsoft.SharePoint.WebControls" 
  Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> 
  <%@ Register Tagprefix="asp" Namespace="System.Web.UI" 
  Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %> 
  <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="CustomLoginPage.Login" MasterPageFile="~/_layouts/simple.master" %> 
  <asp:Content ID="contentHEAD" ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server"> 
  <style type="text/css"> 
  body 
  { 
  background-color: #d5d5d5; 
  background-image: url(images/ACME-Catalog.jpg); 
  background-position: center; 
  } 
  body #s4-simple-content 
  { 
  margin-left: 0px 
  } 
  .s4-simple-iconcont 
  { 
  display:none 
  } 
  h1 
  { 
  font-size:24px; 
  font-weight:bold 
  } 
  </style> 
  </asp:Content> 
  <asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderPageTitle" 
  runat="server"> 
  <SharePoint:EncodedLiteral runat="server" 
  EncodeMethod="HtmlEncode" ID="ClaimsFormsPageTitle" 
  Visible="false" /> 
  Acme Login 
  </asp:Content> 
  <asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" 
  runat="server"> 
  <SharePoint:EncodedLiteral runat="server" 
  EncodeMethod="HtmlEncode" ID="ClaimsFormsPageTitleInTitleArea" 
  Visible="false" /> 
  Log into the Acme Portal 
  </asp:Content> 
  <asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderSiteName" 
  runat="server" /> 
  <asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderMain" 
  runat="server"> 
  <table width="100%" cellpadding="0" cellspacing="30" border="0"> 
  <tr> 
  <td><h2>Customer Login</h2> 
  Enter your username and password below and click Sign In. 
  <asp:login id="signInControl" FailureText="<%$Resources:wss,login_pageFailureText%>" runat="server" width="100%"> 
      <layouttemplate> 
          <asp:label id="FailureText" class="ms-error" runat="server"/> 
          <table width="100%"> 
          <tr> 
              <td nowrap="nowrap"><SharePoint:EncodedLiteral ID="EncodedLiteral1" runat="server" text="<%$Resources:wss,login_pageUserName%>" EncodeMethod='HtmlEncode'/></td> 
              <td width="100%"><asp:textbox id="UserName" autocomplete="off" runat="server" class="ms-inputuserfield" width="99%" /></td> 
          </tr> 
          <tr> 
              <td nowrap="nowrap"><SharePoint:EncodedLiteral ID="EncodedLiteral2" runat="server" text="<%$Resources:wss,login_pagePassword%>" EncodeMethod='HtmlEncode'/></td> 
              <td width="100%"><asp:textbox id="password" TextMode="Password" autocomplete="off" runat="server" class="ms-inputuserfield" width="99%"/></td> 
          </tr> 
          <tr> 
              <td colspan="2" align="right"><asp:button id="login" commandname="Login" text="<%$Resources:wss,login_pagetitle%>" runat="server" /></td> 
          </tr> 
          </table> 
      </layouttemplate> 
  </asp:login> 
  </td></tr><tr> 
  <td><h2>Personnel Login</h2> 
  Acme Personnel can log in below. Login with your Acme account, i.e. acme\username.<br /><br /> 
  <a href="/_windows/default.aspx?ReturnUrl=<%=Request.QueryString["Source"] %>">click here to login</a></td> 
  </tr> 
  </table> 
  <div id="SslWarning" style="color:red;display:none"> 
  <SharePoint:EncodedLiteral runat="server" EncodeMethod="HtmlEncode" Id="ClaimsFormsPageMessage" /> 
  </div> 
  <script language="javascript" > 
  if (document.location.protocol != 'https:') { 
  var SslWarning = document.getElementById('SslWarning'); 
  //SslWarning.style.display = ''; //show the warning if applicable 
  } 
  </script> 
  </asp:Content> 

You’ll see that I’m overriding some of the CSS elements, this will let me customize this to exactly what I want.

• Replace the content of Login.aspx.cs with the following

  using System; 
  using Microsoft.SharePoint.IdentityModel.Pages; 
  namespace CustomLoginPage 
  { 
  public partial class Login : FormsSignInPage 
  { 
  protected void Page_Load(object sender, EventArgs e) 
  { 
  } }} 

• Deploy your feature.
• Go to Central Administration > Manage Web Applications. Select your web application and click Authentication Providers
  
• Click your zone that has Claims Based Authentication.
• Scroll down a little to Sign In Page URL and enter the path to your custom page: ~/_layouts/CustomLoginPage/Login.aspx
  
• Scroll to the bottom and click Save.
• Close the Authentication Provider Window.
• Now browse to your site, you should now see your new login page

So my login page went from

To

References

• http://blogs.msdn.com/b/kaevans/archive/2010/07/09/creating-a-custom-login-page-for-sharepoint-2010.aspx?wa=wsignin1.0