Sencha touch 2 user login example

Question

I am new to sencha touch and trying make an app where user has to login to be able to use the app. Furthermore, I have created restful api for user authentication which responses user in json format if the authentication is correct. The api url for the user authentication looks like this: http://api-url/user/$username/$password.

My Login View:

Ext.define('NCAPP.view.tablet.LoginForm', {
extend: 'Ext.form.Panel',
xtype:'loginForm',
id:'loginForm',

requires:[
    'Ext.form.Panel',
    'Ext.form.FieldSet',
    'Ext.field.Password',
    'Ext.Img',
    'Ext.field.Toggle'
],
config: {
    items: [
        {
            xtype: 'image',
            src:'resources/img/netcenter_logo.png',
            height: 100
        },
        {
            xtype: 'fieldset',
            title: 'NCAPP LOGIN:',
            items: [

                {
                    xtype: 'textfield',
                    id:'fldUsername',
                    name:'username',
                    placeHolder: 'Username'
                },
                {
                    xtype: 'passwordfield',
                    id:'fldPassword',
                    name:'passowrd',
                    placeHolder: 'Password'
                }
            ]
        },
        {
            xtype: 'button',
            id: 'btnLogin',
            text: 'Login'

        }
    ]
}

});

And I also have User Model:

Ext.define('NCAPP.model.User', {
extend:'Ext.data.Model',

config:{
    fields:[
        { name:'id', type: 'int'},

        { name: 'username', type: 'string'},
        { name: 'netshop_id', type:'int'},
        { name: 'firstname', type: 'string'},
        { name: 'lastname', type: 'string'},
        { name: 'address', type: 'string'},
         { name:'password', type:'string'},
        ]


}

});

And My Login controller:

Ext.define('NCAPP.controller.tablet.LoginController', {
extend: 'Ext.app.Controller',    
config: {
    refs: {   
        loginForm:'loginForm'
    },
    control: {
        '#btnLogin':{
            tap:'onLoginButtonTap'
        }            
    }
},
onLoginButtonTap:function(){

},
init:function(application){

}

});

As I have mentioned earlier, my api is completely restful. I think I can't use ajax proxy and i have to use rest proxy. My big question is how can pass the username and password to restful api?

Can any body help me with this (preferably with example)?

Unrelated to the answer to your question, but you should really not be sending the username and password directly over the URL using plain HTTP. While sending it over HTTP at all isn't safe, sending it in the URL makes it even easier for some random person to steal user credentials. — jprofitt
Can you please let me know which is the best way to authenticate user if i have restful api? — Shree

Pierre Pierre · Accepted Answer · 2013-03-28T17:33:56

Just a few precisions your RESTful API. As you are trying to authenticate a user, the login and password, even if encrypted/hashed should never be in your URL. Instead, prefer a POST request with the url api-url/user/ and a POST message (json for exemple) containing your username and password.

For the ajax request, in your controller, you should do something like (assuming everything works properly):

Ext.define('NCAPP.controller.tablet.LoginController', {
    extend: 'Ext.app.Controller',    
    config: {
        refs: {   
            loginForm:'loginForm'
        },
        control: {
            '#btnLogin':{
                tap:'onLoginButtonTap'
            }            
        }
    },
    onLoginButtonTap:function(){
        var values = this.getLoginForm().getValues();
        var jsonToPost = {};
        jsonToPost.user = values.username;
        jsonToPost.passwd = values.password;
        Ext.Ajax.request({
            url: 'your-url/user',
            method: 'POST',
            params: jsonToPost,
            success: function(response) {
                // Server send a 200 code response. it means it understood the request and was able to deal with it
                // you should check whether or not it is a success. Your answer JSON should contain this information
            },
            failure: function(response) {
                // any other response than a 200
            }
        });
    },
    init:function(application){

    }    
});

The code has been tested.

Sencha touch 2 user login example

1 Answers