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.
Related
I'm building a website using ruby on rails which is hosted separately which makes requests to another backend api rails app which is again hosted separately. Obviously i've setup the backend api with token based oauth authentication.
Now since im not dealing with sessions, and it being stateless n all, How can I stop users from accessing certain view pages in my front end web app? For example, I have a consumer/booking page. I don't want the user to access this page without being logged in. But anyone can just enter the url and open any page they want right now.
On user login (ajax call from .js.erb files), im getting the token and storing it in localStorage variable for every future request to the api. I know I should use this token somehow to stop users from access restricted pages. But I just dont know how.
Now as you have stored the token in the localStorage, you will need to pass this token with the request to the page where you want to restrict access and check if the user is authorized to access the page or not.
TL;DR: there is no standard method or library for this; you must implement such functionality as you see fit.
I'm assuming you're using some sort of front end framework like react; if so, then any request to change the current view should be terminated if there is no valid token in localStorage. Check out this post regarding conditional rendering in React; if you're using something else, the methodology is still pretty much the same.
Otherwise, I would build a small script to include in the beginning of every page that checks whether or not there is a valid token and if there isn't, calls window.history.back() to return the user to the previous page.
(Another way of doing it is to intercept every call to a static HTML file on the server, check if there's a token, and send the file if there is. Otherwise, you can send a custom error page or whatever).
I have been doing some research on this topic but can never find anything super relevant. I am looking to create a single page application using Polymer. I am building this around a REST API that requires authentication to view is resources.
I have all the details with API worked out but I can't seem to figure out how to handle a login page. Basically what is the best way to keep a user from seeing content without being logged into the application?
Obviously the REST API won't allow data to return to the client but how do I go about preventing a user from going into DevTools and changing some boolean values and being able to navigate through all of the pages, and receiving the 401 errors from all of the Ajax requests trying to fire?
I appreciate any help that I can get! Thanks!
You can't prevent users from changing stuff in DevTools. Just ensure on the server that the user doesn't get data or isn't able to pass data without being authenticated.
Issue a token when the user passes username and password and on the server allow only what the user assigned to this token is allowed to do.
See for example https://stormpath.com/blog/build-secure-user-interfaces-using-jwts/
Both Derick Bailey and David Sulc are very conclusive at the time to have the Landing page and auth logic (+ login/signup forms) separed from the actual Marionette app. However, I haven't been able to find any example nor explanation of how should this be handled and thus, I have few doubts:
CHANGING THE INDEX.HTML
The index.html won't be loading the Marionette app anymore. This means that when loading example.com we will end up in a simple landing page even if the user is authenticated (localStorage has his token credentials stored). I understand that this simple landing should somehow handle that if the user has stored credentials, the user should be immediately redirected to a app.html that will actually load the Marionette app, with the users account and the initially accessed route. In other words:
The url fragment is stored.
Check if user is logged in
If the user is logged in, then load app.html which will load the app (how to load the app for a certain route?)
If the user is not logged in, then do nothing
LOGGING IN
In the case the user is not logged in and logs in. Independently of if index.html has the login form or we have redirected the user to login.html, our auth logic has to be independant of the app. This means login.html has to include a .js that will make an ajax call against out API.
User enters credentials
AJAX call to check credentials
If API returns token, then store credentials in localStorage and load app.html (which will load the marionette app)
SIGNING UP
The user signs up at /signup signup.html or index.html if this includes a sign up form. Whichever HTML is loaded, it must include the necessary js logic to make an ajax call to the API for a new user.
User enters new account data
Our independant js makes an ajax call to the API
If creation successful we store the data to localStorage and load app.html (which loads the app)
If not, we show errors
And you'll say I'm missing the question. My question is, are these workflows correct?
Which workflow do you normally use?
How do you structure this code inside the marionette app project folder?
If you know of any simple examples on github on how to approach this I'd be very happy to learn about them!
Well, in case someone stumbles upon this question, I finally decided to have the landing/auth logic inside the Marionette app. This way I keep my backend to be only an API REST, and I don't need of any further backend to serve me more pages.
I've been fumbling around with different client side technologies, like AngularJS, EmberJS, even trying to use straight JQuery and figure out how to use ReactJS with it. That aside, my goal is to build a single page app using json in between the client and a Java Jersey 2 jax-rs back end api.
I have two stumbling blocks right now. Some info though..I am deploying my app as a WAR file in Jetty. My back end is java based. I am using only jquery in the client side as of now.
My main stumbling block is how to handle login, logout and session management. With an rest API and using ajax, I have login working, including it setting a cookie. My concern however is with a single page app, there is just the one index page, and if the user closes the browser, then reopens it to the index page while the cookie/session is still good, the user should be logged in, not see the outside (not logged in) page. I am unsure how to handle this, whether it be a jsp page, index.html with some templating library, etc. With JSP I can insert some scriplet code (against my better judgment). In the old days I'd include a header that would check for request.getSession().getAttribute("user") and if it was there..the user was logged in and using scriplet if() code I'd display a logged in header, instead of the non-logged in header. But I am in the belief there has got to be a better way to do this with todays client side JS frameworks.
The other stumbling block is the navigation and dynamic aspects. For example, when I was messing around with angular js, it was easy enough to use Welcome {{name}} and within the scope replace name with a json response value for the logged in user. In my current situation, I am not exactly sure how to best go about displaying dynamic bits like this with pure jquery other than using some sort of $("#elem-id").innerHtml="..." code within the response success method of an ajax call. As well, I am not quite sure how to handle navigation to different pages. My logged in site will have some drop down menus or links that will replace the content area with different varying amounts of content.
So first, what are some ways in a SPA to handle user sessions, in the case of a page reload, or close/crash browser restart.. to ensure the user is still logged in and direct them to the right page? Second, what sort of templating and routing/navigation options exist that don't require me to put a huge ton of code in my one index.jsp page?
Thank you.
If you're having a REST API as the back end, then you must have implemented oAuth as an authentication mechanism. That is, when your user logs in, using a username and a password, you exchange that data with an authentication token. This authentication token is sent your server with each and every API call and your backend validates this token before servicing the request. Clear so far?
What you could do is, when you obtain the access token, you can also obtain the access token expiration time from the server and store that data in your client side app. In localStorage maybe? And when your user closes the browser and reopens again, you can first check whether such access token is available (and not expired) before asking the user to log in. This should solve your first problem.
Secondly, if you're looking for a lightweight routing option, I recommend director.
I am building a similar application. OAuth is not mandatory. You can have normal sessions etc by hitting the jersey login endpoint and setting a session and a cookie "keepme" with the session if user wants to be persistently logged in. You can then have a jersey AuthFilter for example check if either there is a cookie with a valid session or an active session and keep the user logged in.
Your frontend application should have no say over this, just communicate with the server and if it doesn't get unauthorized access (from the AuthFilter) then continues otherwise it displays the login page.
I am working on creating an iphone application which logins to we website and retrieves a table, and displays the content within the app. To view the table a Login is required. It seems the site is using Form-Baseds Authentication. WebSite's Login Screen
So How do I pass the login ID and pass from xcode to the to the site and retain the information so the user only needs to login once.
to remember the login credentials, the easiest way is to put them into a NSDictionary and write that to the application bundle, then read it later, when needed. Remember to give the users a chance to change their login credentials later on and at least think about encrypting the data.
As to the form-based login, the way to go would be to create a NSURLRequest to the login forms URL, if it is GET-based, simply do it like url.somewhere/form?user=foo&pass=bar, if it is POST-based, alter the created request and include the information needed in the POST-field.