Click here to Skip to main content
15,867,453 members
Articles / Web Development / HTML

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

Rate me:
Please Sign up or sign in to vote.
4.22/5 (8 votes)
15 Dec 2010CPOL3 min read 85.6K   3.7K   47   21
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:

XML
<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:

C#
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:

C#
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)


Written By
Technical Lead
United States United States
I am a developer in Microsoft Technologies like .NET, SharePoint etc.

Comments and Discussions

 
QuestionNice one Pin
minejass3-Sep-12 17:54
minejass3-Sep-12 17:54 
QuestionThank You!!! Pin
sandun Tharaka8-Feb-12 18:37
sandun Tharaka8-Feb-12 18:37 
Thank You!!!
GeneralGood One Pin
Parwej Ahamad27-Dec-10 4:04
professionalParwej Ahamad27-Dec-10 4:04 
GeneralRe: Good One Pin
Wild-Programmer27-Dec-10 18:22
Wild-Programmer27-Dec-10 18:22 
Generalgoing to use it Pin
Pranay Rana23-Dec-10 2:00
professionalPranay Rana23-Dec-10 2:00 
GeneralRe: going to use it Pin
Wild-Programmer24-Dec-10 3:23
Wild-Programmer24-Dec-10 3:23 
GeneralNo, Not good PinPopular
Xmen Real 17-Dec-10 15:48
professional Xmen Real 17-Dec-10 15:48 
GeneralRe: No, Not good Pin
Xmen Real 18-Dec-10 0:41
professional Xmen Real 18-Dec-10 0:41 
GeneralRe: No, Not good Pin
Wild-Programmer18-Dec-10 18:56
Wild-Programmer18-Dec-10 18:56 
GeneralRe: No, Not good Pin
Nish Nishant19-Dec-10 0:01
sitebuilderNish Nishant19-Dec-10 0:01 
GeneralRe: No, Not good Pin
Keith Barrow19-Dec-10 1:22
professionalKeith Barrow19-Dec-10 1:22 
GeneralRe: No, Not good Pin
Xmen Real 19-Dec-10 1:50
professional Xmen Real 19-Dec-10 1:50 
GeneralRe: No, Not good Pin
Wild-Programmer19-Dec-10 3:27
Wild-Programmer19-Dec-10 3:27 
GeneralRe: No, Not good Pin
Henry Minute19-Dec-10 4:44
Henry Minute19-Dec-10 4:44 
GeneralRe: No, Not good Pin
Chris Maunder1-Jan-11 14:46
cofounderChris Maunder1-Jan-11 14:46 
GeneralRe: No, Not good Pin
Pete O'Hanlon19-Dec-10 9:26
subeditorPete O'Hanlon19-Dec-10 9:26 
GeneralRe: No, Not good Pin
Dalek Dave19-Dec-10 11:35
professionalDalek Dave19-Dec-10 11:35 
GeneralRe: No, Not good Pin
Nish Nishant19-Dec-10 0:02
sitebuilderNish Nishant19-Dec-10 0:02 
GeneralRe: No, Not good Pin
Xmen Real 19-Dec-10 1:49
professional Xmen Real 19-Dec-10 1:49 
GeneralMy vote of 4 Pin
Sandesh M Patil15-Dec-10 3:42
Sandesh M Patil15-Dec-10 3:42 
GeneralRe: My vote of 4 Pin
Wild-Programmer15-Dec-10 3:51
Wild-Programmer15-Dec-10 3:51 

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

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