backbone.js - handling if a user is logged in or not

Question

Firstly, should the static page that is served for the app be the login page?

Secondly, my server side code is fine (it won't give any data that the user shouldn't be able to see). But how do I make my app know that if the user is not logged in, to go back to a login form?

Answer 1

I have a backend call that my client-side code that my static page (index.php) makes to check whether the current user is logged in. Let's say you have a backend call at api/auth/logged_in which returns HTTP status code 200 if the user is logged in or 400 otherwise (using cookie-based sessions):

appController.checkUser(function(isLoggedIn){
    if(!isLoggedIn) {
        window.location.hash = "login";    
    }

    Backbone.history.start();
});

...

window.AppController = Backbone.Controller.extend({

  checkUser: function(callback) {
     var that = this;

     $.ajax("api/auth/logged_in", {
       type: "GET",
       dataType: "json",
       success: function() {
         return callback(true);
       },
       error: function() {
         return callback(false);
       }
     });
  }
});

Answer 2

I use the session concept to control user login state.

I have a SessionModel and SessionCollection like this:

SessionModel = Backbone.Model.extend({
    defaults: {
        sessionId: "",
        userName: "",
        password: "",
        userId: ""
    },

    isAuthorized: function(){
       return Boolean(this.get("sessionId"));
    }

});

On app start, I initialize a globally available variable, activeSession. At start this session is unauthorized and any views binding to this model instance can render accordingly. On login attempt, I first logout by invalidating the session.

logout = function(){
    window.activeSession.id = "";
    window.activeSession.clear();
}

This will trigger any views that listen to the activeSession and will put my mainView into login mode where it will put up a login prompt. I then get the userName and password from the user and set them on the activeSession like this:

login = function(userName, password){
    window.activeSession.set(
        {
            userName: userName,
            password: password
        },{
            silent:true
        }
    );
    window.activeSession.save();
}

This will trigger an update to the server through backbone.sync. On the server, I have the session resource POST action setup so that it checks the userName and password. If valid, it fills out the user details on the session, sets a unique session id and removes the password and then sends back the result.

My backbone.sync is then setup to add the sessionId of window.activeSession to any outgoing request to the server. If the session Id is invalid on the server, it sends back an HTTP 401, which triggers a logout(), leading to the showing of the login prompt.

We're not quite done implementing this yet, so there may be errors in the logic, but basically, this is how we approach it. Also, the above code is not our actual code, as it contains a little more handling logic, but it's the gist of it.

Answer 3

Here is a very good tutorial for it http://clintberry.com/2012/backbone-js-apps-authentication-tutorial/

Answer 4

I think you should not only control the html display but also control the display data. Because user can use firefox to change your javascript code.

For detail, you should give user a token after he log in and every time he or she visit your component in page such as data grid or tree or something like that, the page must fetch these data (maybe in json) from your webservice, and the webservice will check this token, if the token is incorrect or past due you shouldn't give user data instead you should give a error message. So that user can't crack your security even if he or she use firebug to change js code.

That might be help to you.

Answer 5

I think you should do this server sided only... There are many chances of getting it hacked unit and unless you have some sort of amazing api responding to it