Thursday, December 12, 2013

Custom sign-in page in SharePoint 2013



Open Visual Studio 2012 -->Create a new SharePoint 2012 project using the Empty SharePoint Project" template.





Choose Farm Solution (We are going to deploy files to the SharePoint root, also known as the 15 hive, so we cannot use the sandbox here)





Add SharePoint "Layouts" Mapped Folder to the project.




Here am going to use JavaScript files, So am going to add those file in a folder to Mapped Folder.

i will add new folder to mapped folder and named it as "JS".




Now i copy my .js files to this "JS" folder.




Now i will add a new item to "UKReddyCustomLogin" inside mapped folder.  Choose to use the Application Page template and name the new page as Login.aspx.







Now i have designed my custom login page and here is the code.

**************************************************************************

<%@ Page Language="C#" MasterPageFile="~/_layouts/simple.master" AutoEventWireup="true" Inherits="UKReddyCustomLogin.Layouts.UKReddyCustomLogin.Login,UKReddyCustomLogin, Version=1.0.0.0, Culture=neutral, PublicKeyToken=d8d5b1d61efe1651" %>
<%@ Assembly Name="Microsoft.SharePoint.ApplicationPages, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>
<%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>


<asp:Content ID="Content1" ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">


 <script language="javascript" type="text/javascript" src="/_layouts/15/UKReddyCustomLogin/JS/jquery.min.js" ></script>
 <script language="javascript" type="text/javascript" src="/_layouts/15/UKReddyCustomLogin/JS/jquery.corner.js" ></script>

 <script language="javascript" type="text/javascript" >

     $(document).ready(function () {
         //Hidding unnecessary elements from masterpage
         $('#s4-simple-card').attr("id", "s4-simple-card2");
         $('#s4-simple-header').hide();
         $('#s4-simple-card-top').hide();
         $('#s4-simple-card-content').css("margin", "0px");
         $('.s4-simple-iconcont').hide();
         $('#s4-simple-content').css("margin", "0px");
         $('#s4-simple-content h1:first').hide();
         $('.s4-die').hide();
         //-------------------

         //Round corners of the div
         $('.rounded').corner("10px");
     });
 </script>

 <style type="text/css">

 html, body {height:100%; margin:0; padding:0;}

 #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

 #content {position:relative; z-index:1; padding:10px;}

 </style>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">


 <SharePoint:EncodedLiteral ID="ClaimsFormsPageTitle" runat="server" text="<%$Resources:wss,login_pagetitle%>" EncodeMethod='HtmlEncode'/>

</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server">


 <SharePoint:EncodedLiteral ID="ClaimsFormsPageTitleInTitleArea" runat="server" text="<%$Resources:wss,login_pagetitle%>" EncodeMethod='HtmlEncode'/>

</asp:Content>

<asp:Content ID="Content4" ContentPlaceHolderId="PlaceHolderSiteName" runat="server"/>

<asp:Content ID="Content5" ContentPlaceHolderId="PlaceHolderMain" runat="server">

 <center>

 <div id="content" class="rounded" style="width: 300px; height: auto; margin-top: 15%; background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000); zoom: 1;">

 <div style=" width: 100%; height: 100px">
 <br />
 <img src='/_layouts/images/nivista.png' alt='' />
 </div>
<br>
<div style="width: 100%; height: 30px"></div>
 <asp:Login ID="signInControl" style="width: 330px" FailureText="<%$Resources:wss,login_pageFailureText%>" MembershipProvider="FBAMembershipProvider"
 runat="server" DisplayRememberMe="true" TextBoxStyle-Width="300px" RememberMeSet="true" LoginButtonStyle-CssClass="ms-buttonheightwidth" UserNameLabelText="User name" TextLayout="TextOnTop" PasswordLabelText="Password" LabelStyle-Font-Bold="false" LabelStyle-Font-Size="Large" LabelStyle-ForeColor="red" LabelStyle-Font-Names="Calibri" LabelStyle-CssClass="ms-standardheader ms-inputformheader" TextBoxStyle-CssClass="ms-input" CheckBoxStyle-Font-Bold="false" CheckBoxStyle-Font-Names="Calibri" CheckBoxStyle-ForeColor="Blue" CheckBoxStyle-CssClass="ms-standardheader ms-inputformheader" CheckBoxStyle-Font-Size="Large" FailureTextStyle-Wrap="true" FailureTextStyle-Font-Names="Calibri" FailureTextStyle-Font-Size="Small" LoginButtonStyle-Font-Names="Calibri" LoginButtonStyle-Font-Size="Large" LoginButtonImageUrl="/_layouts/images/login2.png" LoginButtonType="Image" TitleText="" TitleTextStyle-ForeColor="White" TitleTextStyle-Font-Bold="true" TitleTextStyle-Wrap="true" TitleTextStyle-Font-Names="Calibri" TitleTextStyle-Font-Size="Larger" />


 <asp:LinkButton ID="lbInternalUsers" Text="Admin Login" runat="server" Font-Names="Calibri" Font-Size="Small" CssClass="ms-standardheader ms-inputformheader" Font-Bold="true" ForeColor="Blue" OnClick="lbInternalUsers_OnClick" />


 <asp:Label ID="lblError" runat="server" Font-Bold="true" ForeColor="Red" EnableViewState="false"></asp:Label>
 </div>
 </center>


 <SharePoint:EncodedLiteral runat="server" EncodeMethod="HtmlEncode" ID="ClaimsFormsPageMessage" Visible="false" />

</asp:Content>

************************************************************************

Now add the below dll reference to the project.

"Microsoft.SharePoint.IdentityModel.dll" if you didnt find dll, please check it here.

Now change inheritance class to FormsSignInPage.

Now Replace the following code to Login.aspx.cs file.

****************************************************************************
protected void Page_Load(object sender, EventArgs e)
        {
        }
****************************************************************************
with this code

*****************************************************************************
        protected Label lblError;

        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
        }

        protected override void OnLoad(EventArgs e)
        {
            try
            {
                base.OnLoad(e);
            }
            catch { }
        }

        protected void lbInternalUsers_OnClick(object sender, EventArgs e)
        {
            try
            {
                if (null != SPContext.Current && null != SPContext.Current.Site)
                {
                    SPIisSettings iisSettings = SPContext.Current.Site.WebApplication.IisSettings[SPUrlZone.Default];
                    if (null != iisSettings && iisSettings.UseWindowsClaimsAuthenticationProvider)
                    {
                        SPAuthenticationProvider provider = iisSettings.WindowsClaimsAuthenticationProvider;
                        Redirect(provider);
                    }
                }
            }
            catch (Exception ex)
            {
                lblError.Text = ex.Message;
            }
        }

        private void Redirect(SPAuthenticationProvider provider)
        {
            string comp = HttpContext.Current.Request.Url.GetComponents(UriComponents.Query, UriFormat.SafeUnescaped);
            string url = provider.AuthenticationRedirectionUrl.ToString();
            if (provider is SPWindowsAuthenticationProvider)
            {
                comp = EnsureUrl(comp, true);
            }

            SPUtility.Redirect(url, SPRedirectFlags.Default, this.Context, comp);
        }

        private string EnsureUrl(string url, bool urlIsQueryStringOnly)
        {
            if (!url.Contains("ReturnUrl="))
            {
                if (urlIsQueryStringOnly)
                {
                    url = url + (string.IsNullOrEmpty(url) ? "" : "&");
                }
                else
                {
                    url = url + ((url.IndexOf('?') == -1) ? "?" : "&");
                }
                url = url + "ReturnUrl=";
            }
            return url;
        }
*****************************************************************************
Now build the project and deploy it.



Now we will use this custom login page.

Open SharePoint Central Administration -> Application Management -> Manage Web Applications.

Click the Web Application you want the authentication model and select the Authentication Providers button from ribbon.

Click the Zone you want to change the login page.

Check "Enable Forms Based Authentication (FBA)". Enter the ASP.Net Membership Provider Name and ASP.NET Role Provider Name that you configured in the web.config. For this example we used "FBAMembershipProvider" and "FBARoleProvider" (Without the quotation marks).Also, for this example we left "Enable Windows Authentication" checked. This allows us to login either via Windows Authentication or Forms Based Authentication (SharePoint will prompt you when you login for which method you'd like to use).




Now specify the sign-in page in custom sign-in page.




Now browse your site.



It is very simple design created by me.

Here source code and here reference another one here.

3 comments:

  1. Hi Uday,
    Thanks for the great post. The source code for custom login solution could not be accessed. Just wondering if its still available?
    Cheers,
    Shilpa

    ReplyDelete
    Replies
    1. Thanks Shilpa and here is the source code http://1drv.ms/1kXTl66

      Delete
  2. HI Uday,
    i am new and i don't have knowledge about visual studio. could you please tell me how to add .js files to this "JS" folder. where can i get this .js files ?

    ReplyDelete