MVC login popup instead of redirecttologin

Question

I'd like to pop up a login box when a user attempts to access a protected web page rather than redirecting to a login page.

I want to do this using MVC and jquery but not the ms ajax scripts. All the pages use the same master page and I'm using formsauthentication. I have the login pop-up working when the user clicks on a login link on the page, the problem is when they click on a link going to a protected page I get re-directed to the login page.

I was thinking that maybe I could trap the redirect to login but I'm guessing that this wont be possible since the redirect will have happened by the time the client script runs the check? Other possibilities which feel a bit clunky are to trap the page unload function or all the links on the page and then check them.

Has anyone done this or do you have any suggestions on how to go about it?

TIA

Answer 1

It's pretty easy, I built a POC a whlie ago with colorbox:

JQuery:

 <script src="../../Scripts/jquery.colorbox.js" type="text/javascript"></script>

<link href="<%= "../../Content/colorbox.css?version=" + Guid.NewGuid() %>" rel="stylesheet" type="text/css" />

<script type="text/javascript"  >


    $('FORM#login').live("submit", function() {
    Sys.Mvc.FormContext._Application_Load();
    $.colorbox.resize(); 
    });

    $(document).ready(function() {


        $('#change_password').click(function() {

            var url = $(this).attr("Href");
            $.ajax({ url: url, cache: false, success: function(data) {
                if (data != '') {
                    $.colorbox({ html: data, scrolling:false, opacity:0.85});
                }
                else {
                    alert(url);
                    window.location = url;
                }
            }

            });

            return false;
        });




    });

</script>

View:

Home Page

<%= Html.Encode(ViewData["Message"]) %>

To learn more about ASP.NET MVC visit http://asp.net/mvc.

<div><a id="change_password" href=" <%= Url.Content("~/Account/ChangePassword") %>" title="Change Password">Change Password</a></div>
<div id="logOn_Control"></div>

Controller:

[AjaxAuthorize]
    //[Authorize]
    [HttpPost]
    public ActionResult ChangePassword(ChangePasswordModel model)
    {
        if (ModelState.IsValid)
        {
            if (MembershipService.ChangePassword(User.Identity.Name, model.OldPassword, model.NewPassword))
            {
                return RedirectToAction("ChangePasswordSuccess");
            }
            else
            {
                ModelState.AddModelError("", "The current password is incorrect or the new password is invalid.");
            }
        }

Action Filter:

 public class AjaxAuthorizeAttribute : AuthorizeAttribute   
{   
    public string View { get; set; }   

    protected override void HandleUnauthorizedRequest(AuthorizationContext filterContext)   
    {


        if (!filterContext.HttpContext.Request.IsAjaxRequest())   
        {

            base.HandleUnauthorizedRequest(filterContext);
            return;   


        }

        var route = filterContext.HttpContext.Request.Path;
        var viewData = new ViewDataDictionary { { "returnUrl", route } };

        filterContext.Result = new ViewResult { ViewName = View, ViewData = viewData };

    }

    public override void OnAuthorization(AuthorizationContext filterContext)
    {
        if (filterContext.HttpContext.User.Identity.IsAuthenticated && filterContext.HttpContext.Request.IsAjaxRequest())
        {
            filterContext.Result = new EmptyResult();
            return;
        }
        base.OnAuthorization(filterContext);
    }



}
        // If we got this far, something failed, redisplay form
        ViewData["PasswordLength"] = MembershipService.MinPasswordLength;
        return View(model);
    }

Answer 2

Somehow you want your client to know when he clicks on a link, that that link is protected. If it is protected , don't open it, but open a popup.

I can think of three crappy options, maybe these give you some other ideas.

1. Somehow have a list of "save" links in Javascript: when a user is not logged in, the JS checks the link vs the save list, and acts accordingly.
2. When you are not logged in, when clicking on a link, you first do a jQuery request to that page, if the response is OK, you let the user navigate away, if the response is your protected page, you open a popup.
3. Don't check anything, let the user get to the "login page", but let the login page redirect the user back to the previous page, add some querystring param, and when the masterpage finds that querystring param, let it open a login dialog. (Hope that is clear). You actually do navigate away, but you do get back to your original page.