Curious as to how people usually handle this. My strategy is to have an authorized root route and unauthorized root route.
The authorized users get sent directly to my marionette.js single page application and unauthroized users get sent into a standard rails landing page with the option to login or register.
It seems you could combine these all into your single page application. You could show/hide ui elements based on a class you attach to elements based on the authorization needed to see them (registered, admin, moderator, etc). You could also add some kind of "before_filter" to your router's that can check whether or not the user can access this route given their role.
I'm not sure exactly how you would handle login / registration in this case. You could setup your own api routes that get POST'd to which hand-off the work to devise?
Thoughts? Strategies? What seems best practice here?
I find it painful and unnecessary to try and make Backbone/Marionette handle the authentication and re-loading of the authorized site stuff. Once they log in, redirect them to a different URL that the server handles, and have the server send down all the stuff that they need, as an authenticated user.
Related
when building single page app with, for example, firebase, are the api keys used, not visible to the user since all the code is rendered on the client side? And also,since user is restricted to which routes or pages they can visit depending on the conditions set in the code, is it not possible for them to bypass or change the code since everything is on the client side?
Although it is correct that the code is client-side in an SPA, restrictions for accessing pages can still be set in place.
VueJS exposes several lifecycle hooks even before elements have been added to the DOM. In this space, you can make a network request to an authentication service. In your request, you would send a token (rf: jwt).
await the response and you can redirect users to the login page, or continue with the component mount.
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/
I searched a lot in here, and i couldnt find an answer to the questions I ask myself. Here is the thing :
On one side , I want to have a static landing page (with login/sign up form ), and on the other side, I have an angular app that handles all the things related to the authenticated user. It's like that because my app is kind of "private", so users that cant register or login do not have to load the entire angular app and can't go further than the landing.
On the landing page, the login request hits on my API, and with the given credentials I store the user access token in the local storage, which allows him to do all the future requests inside the angular app.
What I want to do is to have the same URL for both the landing and the angular app. Let's say the base url is www.myproject.com, when I go to this url, depending on if i'm logged or not, i want to be redirected to the landing page or the angular app. It's also based on a "Remember me" checkbox.
So how do I do to share www.myproject.com between the landing and the angular app, depending on the user state ( logged or not ) ? Is it some kind of server routing ? Or can I achieved this with angular ui-router ?
It's only a matter of fanciness, i could also have urls like www.myproject.com for the landing, and www.myproject.com/app for the angular app, but the real problem here is how to do the logged/not logged based routing. If it simpler to explain with two differents urls, I'm interested too.
Thank you for your answers, i feel really lost here !
EDIT
Since ALL the requests inside the angular app need the access token, what if I catch 401 error that i might get from oAuth when entering the angular app, with an http interceptor ? Could I use this to redirect to my external landing page file ?
I don't really need the share of the root url between the landing and the app, all I want to know is : is catching 401 code a good way to redirect to the landing/login page ?
I'm building a widget that can be placed on a various sites, and will have users be able to log in via facebook connect to accounts on the widget's parent site. I was going to use the Facebook JS SDK to do this, but the widget will likely be placed on sites that already have the FB JS SDK initialized on them with a different app ID, and if I were to run code this way it could lead to a namespace problem.
The only current solution I have come up with is to do the server-side type authorization, and have a redirect-url that leads back to the current page in which the widget is hosted and use the state paremeter to alert backbone router that the user has logged in.
The first problem I thought of is that on the facebook docs site it says
For security, the redirect_uri must have the same base domain as that specified in the App Domain property of your app's settings, or be a URL of the form https://apps.facebook.com/YOUR_APP_NAMESPACE.
How do I bring people back to the original page that the widget it hosted on after login? Is there a better approach to this problem?
you can use Server side authentication and redirect_uri to your site that will redirect to the various site
redirect_uri = https://www.mydomain.com/?r=https%3A%2F%2Fwww.somesite.me
On you server you will look of the query param r and redirect the request to r value.
You can also do your own authentication for users (when they first sign in) and store there facebook access_token on you DB, once your widget is running (under https) and you identified the user on your authentication you can send the widget client the user's access_token and work with it.
You can even create your own Simple FB-like ajax library, for most things it will be a simple get/post/put calls with access_token as a url parameter
Hopes it helps
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.