Implementing a 'remember me' login in hybrid app

[xkevin]

I am developing an app that uses ajax request to the server to login. I want to add a feature to the login- the 'remember me'. In which whenever the user launch the app he/she doesn't need to login anymore, but when logout was pressed/triggered, the login credentials will erase/expired - so, he needs to log in again. What is the right approach on this and how to do it on hybrid app? Is there any plugin that good for ios, andriod and windows that can save the login credentials for remember me feature? Any idea?

Mycode so far is just the manual login

if($.trim(email).length>0 && $.trim(password).length>0) {

                $.ajax({
                        type: "POST",
                        url: "http://www.example.com/app/login.php",
                        crossDomain: true,
                        dataType: 'json',
                        data: $.trim(frm.serialize()),
                        beforeSend: function(){
                            $('#loader').css({ display: "block" });
                        },
                        success: function(data,status,XHR) {
                            handleData(data);//handle the servers respond
                        },
                        error: function(httpReq,status,exception){
                            alert("Network error: "+status+" "+exception);
                            $('#loader').css({ display: "none" });
                        }

                    });
        }

Handle data code

function handleData( responseData ) {
            var access = responseData;

            if(access == "good"){//server respond good username/pass
                alert("Welcome");
                $('#loader').css({ display: "none" });                  
            }                 

            else{
                alert("Your username and password didn\'t match.");

                $('#input_password').val('');
                $('#loader').css({ display: "none" });

            }
            console.log(responseData);
        }

[Fab_V_ · Accepted solution]

hi,
this is what i do in my apps. i will try to explain to you shortly..
the principle is to store login datas in local storage. here is a short explanation.
when user datas are stored you automatically connect the user.
in my case (and this is not written here) in the quick login method i do a background login verification..

• when framework is loaded (in my case a modified version of appframework 3) i load my js classes dynamically and init them.
• use a login method to connect user manually

  	/***************** LOGIN **********************/
  	login : function(login,md5_pass)
  	{                   
  		var self = this;  		
  		var success = function(data,textStatus,jqXHR){
  			self.parseLogin(data);     	
  		};
  		var error = function(jqXHR,textStatus,errorThrown){
  		 	self.parseLogin({});   
  		};
  		return myapp.json(myapp.Conf.get('json_url')+'?task=login',{'login':email,'md5_pass':md5_pass}, success,o,error);
  	}

• use a quickLogin method to connect user in background mode, on init..

  	/***************** QUICKLOGIN *************************/
  	quickLogin : function(){
  		this.isLogged=true;	 
  		var data = {
  			user : myapp.Storage.get('User'), /* class to manage storage*/
  			settings : myapp.Storage.get('Settings'),					
  		};        
  		this.parseLogin(data);
               /* 
                 here you have to do a background login verification to be sure user already exists
                 for example
                */
  	},

• in both cases, whan ajax complete you need to parse login results in a 3rd method named parseLogin.
  this method will store your needed user datas in local storage and if needed init others thing on your app

    /*******************************************/  
    parseLogin : function(data,checkProfile,transparent){
      var self = this;  
      else if(typeof(data.user)=='object' && data.user.ID && data.user.sessionid)
      {			
        self.set(data.user);    
        self.isLogged=true;	   
        self.defaultCredentials();    			
        $(document).trigger('user.parseLogin',data);
      }
      else
      {
      	self.isLogged=false;	
      	self.defaultCredentials();
          self.logout();					
    }
  

• defaultCredentials is a method to add user identified datas to ajax requests.
  it must be called on login and logout.

  	/******************** DEFAULT CREDENTIALS FOR AJAX REQUESTS ********************/	 	
  	defaultCredentials : function(){
  	     var Data = {'platform':myapp.Conf.platform,'sessionid' : myapp.User.get('sessionid'),'userid' : myapp.User.get('ID')};
  	     $.ajaxSetup({crossDomain : true,data:Data}); 
  	}

i hope this will be clear enough to help you.