Click here to Skip to main content
Click here to Skip to main content

Redirect to Login Modal Popup Instead of Login Page in Form Authentication

, 15 Dec 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
Trick to show login popup on any page rather than to redirect to login page

Introduction

Hello people, hope you are doing great J. While working on my personal website, I came across a simple requirement. It was little tricky to override the conventional method of login in website. After a couple of days of research, I finally developed my own solution for it. I think there is plenty of room for tweaking in my code, so if anyone has a better approach, please do let me know.

Background

I asked this question on CodeProject few days ago here which stated that I have a website containing various links redirecting to various pages. Out of those pages, some are Authenticated links (requiring user to login to see it) and some un-authenticated links (which are free to all, anyone can see it). I am using SQL Membership with forms authentication in my website. Clicking the authenticated link redirects the page to Login page.

I wanted to override this functionality by staying at the same page and showing a modal popup. This means that if you click on an Authenticated link, you will not be redirected to login page; instead a modal login popup will show on the current page. You login inside the popup and then get redirected to the respective authenticated page. This functionality will work on any page inside the website without any fixed login page.

Using the Code

To start with, I have configured the web.Config to let the application know which files require authentication and which ones don’t. Below is the XML snippet from the code attached in the article:

  <location path ="UnAuthenticatedFiles">
    <system.web>
      <authorization>
        <allow users ="*"/>
      </authorization>
    </system.web>
  </location>
  <location path ="WelcomeForm.aspx">
    <system.web>
      <authorization>
        <allow users ="*"/>
      </authorization>
    </system.web>
  </location>

Now apart from the file and folder mentioned in the snippet above, everything else needs to pass through authentication. Calling any other page will redirect to login page.

Note: In the web.Config, I have not mentioned the LoginUrl as there is no fixed login page. User can login on any page as there is login popup.

Next I added the Global.asax file.

Global-ASAX.png

Application_Error method tracks the application errors. I used this to track when page redirects to login page. Below is the code snippet:

protected void Application_Error(object sender, EventArgs e)
        {
            if (Request.QueryString["ReturnUrl"] != null)
            {
                if (Request.QueryString["ReturnUrl"].Contains("aspx"))
                {
                    bool val = UrlAuthorizationModule.CheckUrlAccessForPrincipal
			(Request.QueryString["ReturnUrl"].ToString(), 
				HttpContext.Current.User, "GET");

                    if (val.Equals(false))
                    {
                        if (Request.UrlReferrer.AbsolutePath.Equals
			(Request.QueryString["ReturnUrl"]))
                            Response.Redirect("WelcomeForm.aspx");
                        else
                            Response.Redirect(string.Format("{0}?ReturnUrl={1}", 
				Request.UrlReferrer.AbsolutePath, Request.QueryString
				["ReturnUrl"].ToString()));
                    }
                    else
                        if (Request.Url.AbsolutePath.Contains("login.aspx") && 
			Request.QueryString["ReturnUrl"].Contains("WelcomeForm.aspx"))
                         	Response.Redirect(Request.QueryString["ReturnUrl"].ToString());
                }
            }
        }

When RedirectToLoginPage() is called, it redirects to login page using “ReturnUrl”. In the above code, I check if Return URL is present and is an aspx file (as it comes with favicon.ico for the first time application is run).

Next, I use the function “UrlAuthorizationModule.CheckUrlAccessForPrincipal” as it determines whether the user has access to the requested file. It returns Boolean value (true/false). Using the value (if true, requires login), I redirect the request to the same page where it came with ReturnUrl of the requested page (page which required authentication).

In my case, I am using MasterPage so I have handled it on the Page_Load of Master page. Code on master page load is as below:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        if (Request.QueryString["ReturnUrl"] != null)
        {
            bool isFreeToAccess = 
			UrlAuthorizationModule.CheckUrlAccessForPrincipal
			(Request.QueryString["ReturnUrl"].ToString(), 
			HttpContext.Current.User, "GET");

            if (isFreeToAccess.Equals(false) || Request.QueryString
				["ReturnUrl"].Contains("WelcomeForm.aspx"))
            {
                 LoginPopupExtender.Show();
            }
        }
    }
}

Here, I have to perform the same checks as in global.asax and if the CheckUrlAccessForPrincipal returns “true”, I show the popup.

As the creating of modal login popup is not in the scope of the problem statement, I am skipping that, however, you can find that in the code sample attached in the article. It is pretty simple to do.

So the final screen looks like below when the authenticated link is clicked:

Final_screen.png

Apart from that, normal links (un-authenticated links) continue to work normally. This is just a kind of cosmetic change to the application, in case you need it.

Points of Interest

I have attached a sample code which has the following credentials:

  • User ID – Guest
  • Password – 123456!1

History

  • 15th December, 2010: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Amit Kumar Tiwari
Technical Lead
India India
I am module lead with experience in Microsoft Technologies like .NET, SharePoint etc.
Follow on   Google+

Comments and Discussions

 
QuestionNice one Pinmemberminejass3-Sep-12 18:54 
QuestionThank You!!! Pinmembersandun Tharaka8-Feb-12 19:37 
GeneralGood One PinmemberParwej Ahamad27-Dec-10 5:04 
GeneralRe: Good One PinmemberAmit Kumar Tiwari27-Dec-10 19:22 
Generalgoing to use it PinmemberPranay Rana23-Dec-10 3:00 
GeneralRe: going to use it PinmemberAmit Kumar Tiwari24-Dec-10 4:23 
GeneralNo, Not good PinmemberXmen W.K.17-Dec-10 16:48 
GeneralRe: No, Not good PinmemberXmen W.K.18-Dec-10 1:41 
GeneralRe: No, Not good PinmemberAmit Kumar Tiwari18-Dec-10 19:56 
GeneralRe: No, Not good PinmvpNishant Sivakumar19-Dec-10 1:01 
GeneralRe: No, Not good PinmemberKeith Barrow19-Dec-10 2:22 
GeneralRe: No, Not good PinmemberXmen W.K.19-Dec-10 2:50 
GeneralRe: No, Not good PinmemberAmit Kumar Tiwari19-Dec-10 4:27 
GeneralRe: No, Not good PinmvpHenry Minute19-Dec-10 5:44 
GeneralRe: No, Not good PinadminChris Maunder1-Jan-11 15:46 
GeneralRe: No, Not good PinmvpPete O'Hanlon19-Dec-10 10:26 
GeneralRe: No, Not good PinmemberDalek Dave19-Dec-10 12:35 
GeneralRe: No, Not good PinmvpNishant Sivakumar19-Dec-10 1:02 
GeneralRe: No, Not good PinmemberXmen W.K.19-Dec-10 2:49 
GeneralMy vote of 4 PinmemberSChristmas15-Dec-10 4:42 
GeneralRe: My vote of 4 PinmemberAmit Kumar Tiwari15-Dec-10 4:51 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141223.1 | Last Updated 15 Dec 2010
Article Copyright 2010 by Amit Kumar Tiwari
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid