It is kind of a difficult to explain problem.
Let me describe you a scenario.
I have Home Page, Registration Page, Login Page and Dashboard page
When I register for the application from Register page and hit submit. Application will process request and will redirect me on Dashbord with User logged in. Now, The issue comes. When i hit back button. I get the Registration page with fields filled by values. This should not happen.
When i login to system and from dashboard i hit back of browser. it will show me login page. This also should not happen.
I hope it makes it clear what I am looking for.
Few Possible solutions I tried:
use a Proxy page. Similar to what many mail services are doing. But in MVC 3 it will not detect page load event and there is very less control on page.
use javascript function on a proxy page window.history.forward()
Expire proxy page once rendered.
I am not totally convinced with above solution. I was hoping to get some best practices of doing this in a systematic way and elegant solution to problem.
Please help me with your suggestions on existing solution that i am using as well as if you have some great working solution. Please share it.
Thanks All.
FYI.. I am using ASP.NET MVC 4 for development.
In the Controller/Action method for the register and login page check if the user is already logged in and redirect to eg. the Dashboard.
Something like this depending on how you do your authentication.
public ActionResult Register()
{
//If already logged in no need to show register page again
if(Request.IsAuthenticated)
return Redirec("Dashboard");
return View();
}
Edit: Updated answer to fix commented issue
I created a Partial view with the following content
<input type="hidden" id="reloader" value="" />
<script type="text/javascript">
if (document.getElementById("reloader").value === "reload")
window.location.reload();
else
document.getElementById("reloader").value = "reload"
</script>
You can then include that with #Html.Partial('PartailViewName') in your Register and Login views.
Since the DOM is cached when you use the back button the script above will reload the page if the user uses the back button.
If used together with my first answer you will get the behavior you wanted.
Use history.js to control the history.back() event. You just replace the state of the last page to point to the dashboard or the page you want (inside your web app; inter-domain is prohibited for security reasons). When the user clicks the back button the defined page is loaded instead of the login page.
https://github.com/browserstate/History.js/
The proxy solution is too complicated for this kind of UI interaction. The client-side control is the best approach for your solution. The HTML5 reference define the History API for that (http://www.w3.org/TR/html5/history.html). Unfortunately not all the browsers implement it right now; that's because the history.js script exists.
Related
I have implemented the angular2 routing concept with modules in my web application. Everything works fine.
The problem is I'm not sure what should happen upon clicking the browser back button which sends to the previous page normally. In my situation I see that by default the browser back button sends my app to the previous routing path and so on until it reaches the initial-home page.
Should the back button behave in such way on SPA applications or should it send the user to the home page directly?
Should the back button behave in such way on SPA applications or should it send the user to the home page directly?
The fact that your application is a SPA should be transparent to the user. This is the whole purpose of using a router: that the current state of the SPA can at least partially be read from the route. It also enables sharing the links or saving them as bookmarks. For more advanced usages, it also enables server-side rendering, which then leads to possibility for search engine optimizations.
That said, this is what it should be like and what the users probably expect. Your application can do whatever it likes. If you want back button to go to the home page instead of to the previously visited page, make sure that you do not push anything to the browser's history, and instead just replace it.
Note, however, that you cannot imitate this if the user has never landed on the home page. If she comes from a Google search result, or from a link that friend has sent via e-mail, for example, website.example/foo, and she navigates to website.example/bar from there, you have no way to imitate that the back button should take her to website.example. This would be a security issue.
I need to fire Session.Abandon() when a user leaves the page he is watching.
If the user just refreshes the page session must be kept.
I tried to do this client-side firing an ajax call when unloading the page window.addEventListener("unload", function(e)... but I'm not able to distinguish if the user is just refreshing the page or is leaving it.
I'm currently usuing ASP.NET MVC5.
Any suggestion, please?
There is no straight-forward way to do this... The question is: why would you want to do this anyway? Feels like bad design to me.
You could handle some navigate event and check if the domain is the same as you currently have. If not, fire an AJAX call to abandon the session. Make sure to make that call a HTTP POST with a CSRF token to be sure not to be vulnerable to CSRF.
In my work with a Javascript single page application, i have recently run into a problem.
The whole idea behind this project, is to avoid page reload. When the user comes to my application they won't need to make any reloads. This is done with jQuery and Backbone.js and PHP as service.
I have this static index.html file, where i hide my login container and application container. Then i show the login container, if the user is not recognize by my application, and if they have auth i show the application.
if auth:
application.show()
elif not auth:
login.show() // like Gmail or Facebook etc.: Information + login-form
I wan't to show users who aren't authenticated, both login-form and general info. Very important is also that the site can be found by robots as Google etc.
Can this only be done with 2 different files, giving me reload? A site.com and login.site.com. That solution irritates me, because my login, as it is by now, is quite instant.
Not sure I get the question completely but if you want to check if a user in authenticated, try to do an ajax call. If it fails with "401 unauthorized" the user needs to login...
You can achieve what you want by using ajax calls to authenticate (Although this is not a recommended approach, and people usually prefer the two page solution you have outlined).
What you can do, is have very skinny controllers that just exist to provide data to rich client UI.
Your gateway controller(A separate controller, with no model that acts as an entry point in the application) will just render the basic application structure to the client (without any user specific data, you dont know if the user is logged in, you dont need to know at this point). Then the client will query the UserController for identity of currently logged in user, if user is logged in server returns a json response containing information related to user and if not, server returns a response saying that user is not logged in. Then you can fetch a partial for the login form and then submit it again through ajax. As you see, creating the UI once and communicating with the server with lightweight ajax calls can solve your issue easily.
Requests to third party servers keep slowing my site down, so I am trying to have as few as possible.
In my book, the ideal "tweet this" solution should
be a small JavaScript snippet to be hosted on my own site
not have any activity while loading the page (at least as few as possible, but no additional HTTP requests)
just when clicked, retrieve short URL and tweet it
Is there anything like this? All solutions I have found do load stuff from other servers while my page is loading.
I would not mind to do some of the scripting around this myself, but of course I do not want to re-invent the wheel, if there is a good solution around.
EDIT: In case anyone is interested in what I finally ended up with.
I decided to implement the API call in my backend, triggered by an AJAX request when the user clicks a button. From the client perspective, this solution needs least resources and is as lazy as it can be. Plus: addressing the bit.ly API directly is really trivial.
However: retweet.js (posted below) is still the best out-of-the-box client-side solution I have seen so far.
Not 100% certain this is what you're after, but have you had a look at this?
Easy Retweet Button by John Resig http://ejohn.org/blog/retweet/
It uses bit.ly to shorten urls and forwards the user to their Twitter login page.
Oh, and it uses jQuery which can be hosted on your site. :-D
You could go with a really lo-fi solution and simply link to the Twitter page from your home page. Add a link like this:
Tweet this!
... where [mystatus] would be some string representing the tweet you want the user to send.
This link, when clicked on, will open a new window/tab and, if the user is logged into Twitter, will populate the status message input with the [mystatus] string. If the user is not logged in, they'll get redirected to the Twitter login screen and after a successful login their status input will be populated with the [mystatus] string.
You would need some kind of solution to customize the [mystatus] string to contain what you want it to contain. Some options:
You could do this with a server-side language: construct and populate the href attribute of the anchor tag before the HTML is composed and sent to the client.
You could also do this with JavaScript after the page loads: attach some function on page load that will change the href attribute of the anchor tag to contain the status message you desire.
In my web application, I'm providing a link, clicking on which goes to another page, shows some data,popups a page and goes back using javascript back() function.
It was working fine but it fails in certain cases. For example, this link appears after a form submission also. When the back() function is called here, the Webpage Expired message is shown because it was a POST operation.
How can I go back to the previous page using javascript in this situation?
Please provide your inputs...
You can't do anything about page expiration from JavaScript - that's how the browser opts to protect the user from re-submitting the form accidentally.
You could use the POST/Redirect/GET approach, depending on how your application works, to ensure users always land on a GET after submitting their form, so you always have a valid state to go back to.
To be honest, 99% of the time using the back() functionality in JavaScript is an indication something's wrong in the underlying approach. It's just too fraught with problems to be workable, as you're seeing here. You might get further if you start a new question to describe what you're trying to accomplish. There's a lot of really smart people around here who can all put their heads together and help you come up with something.
Can you explain why you need to navigate to the previous page using client-side script? I'm assuming it's because the user may be arriving at this page from various other pages and you want to direct them back to the page they came from. You could always store the user's previous page URL in a session or cache object and direct them back to that URL in server-side code. Or, if you know where they will always be coming from, direct them back to a static URL. I may be able to offer more assistance if you offer more details.