Redirect to source URL with hash tag (#) broken in MVC4

Question

I am developing a SPA application using AngularJS that works with the REST web API on top of a very small ASP.NET MVC4 layer. For reasons not insignificant here, I do not use the default account controller for MVC4.

Basically, I want to share "tasks" between users. My goal is to send the URL of a specific “task” object to any user by email. Clicking on this URL starts authentication. After successful authentication, I want to display information about the real task page.

AngularJS makes my URLs have the # sign or the URL of the page displaying the "XYZ123" task: http://hostname.com/#/tasks/XYZ123

ASP.NET redirects unauthorized access to this URL: http://hostname.com/Home/Login?ReturnUrl=%2f#/tasks/XYZ123

This is normal, but the corresponding controller method "cuts" the path from #, so in:

public ActionResult Login(string returnUrl) 

the value of "returnUrl" will be equal to "/"

So, I am losing the way: I would like to create a “Connect with Facebook” link with the source URL, for example:

http://hostname.com/Login/ExternalLogin?ReturnUrl=%2F#/tasks/XYZ123

but I can not.

What is the correct way to solve this problem?

I can create my own URL of the redirect service without the # tag, but this solution involves additional work and covers only the case when the system sends a message with the task URL - people will still try to copy / paste the URL location from the browser.

Thanks for any hint.

Max

Answer 1

Yes. The browser allows "# / tasks / XYZ123" and requests a page without this hash. Although the hash itself appears on the login page - it works again in the browser. The hash is not sent to the server.

So, when does the browser load the login page with? ReturnUrl =% 2f # / tasks / XYZ123, we can rewrite the action of the form and encode the hash.

If the form looks like this:

 <form action="/Home/Login" method="post" > ... </form> 

The javascript code should look like this:

 <script src="~/js/jquery.js"></script> <script type="text/javascript"> $(function() { var search = $(location).attr('search') || ''; var hash = $(location).attr('hash') || ''; if (hash.length === 0) { if (window.history.pushState) { window.history.pushState('login', 'Login', '/Home/Login'); } } else if (search === '?ReturnUrl=%2f') { $('form').attr('action', '/Home/Login' + search + encodeURIComponent(hash) ); } }); </script> 

The part with window.history.pushState is required for the following:

If the hash is missing, then for SPA its URL (rather) will be:

 http://hostname.com/Home/Login?ReturnUrl=%2f 

so here we are trying to replace the URL (without reloading the page) with a more accurate

 http://hostname.com/Home/Login 

Answer 2

You can use the Request properties (e.g. .Url or .QueryString ) to get the original url (and url parameters) instead of relying on automatic binding of the returnUrl parameter.

Answer 3

Replace # in returnUrl with% 23