Sencha touch Sencha touch 2用户登录示例

我是sencha touch的新手，正在尝试制作一个用户必须登录才能使用的应用程序。此外，我还为用户身份验证创建了restful api，如果身份验证正确，它将以json格式响应用户。用户身份验证的api url如下所示：

http://api-url/user/$username/$password.

我的登录视图：

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'

        }
    ]
}

}))

我还有用户模型：

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'},
        ]


}

}))

和我的登录控制器：

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

},
init:function(application){

}    

}))

正如我前面提到的，我的api是完全restful的。我想我不能使用ajax代理，我必须使用rest代理。我的大问题是如何将用户名和密码传递给restful api

---

有人能帮我吗（最好是举个例子）

只需对RESTful API进行一些精确设置。当您尝试验证用户身份时，登录名和密码（即使已加密/哈希）也不应出现在您的URL中。相反，更喜欢使用url api url/user/和包含用户名和密码的POST消息（例如json）的POST请求

对于ajax请求，在控制器中，您应该执行如下操作（假设一切正常）：

---

代码已经过测试。

仅对RESTful API进行了一些精度测试。当您尝试验证用户身份时，登录名和密码（即使已加密/哈希）也不应出现在您的URL中。相反，更喜欢使用url api url/user/和包含用户名和密码的POST消息（例如json）的POST请求

对于ajax请求，在控制器中，您应该执行如下操作（假设一切正常）：

---

代码已经过测试。

与您的问题答案无关，但您确实不应该使用普通HTTP直接通过URL发送用户名和密码。虽然通过HTTP发送并不安全，但在URL中发送会让一些随机的人更容易窃取用户凭据。如果我有restful api，请告诉我哪种方式是对用户进行身份验证的最佳方式？与您问题的答案无关，但是您不应该使用普通HTTP直接通过URL发送用户名和密码。虽然通过HTTP发送是不安全的，但通过URL发送会让一些随机的人更容易窃取用户凭据。如果我有restful api，请告诉我哪种方法是对用户进行身份验证的最佳方法？嗨，Pierre，谢谢你的回答。我想知道，如果我有post请求，如何在API中检索用户名和密码。（我应该根据api中的数据库验证用户名和密码）很抱歉，我对sencha touch和api开发非常陌生。让我用更多细节编辑答案。不过，我给你们的其他例子是正确的，就像jprofitt在他的另一个回答中所说的那样。但是为了更安全，你应该考虑至少一个SSL连接。但这是另一个问题的主题！我将在生产环境中实现SSL连接。谢谢我不确定我是否理解你的问题。您提到在API中检索用户和密码，并在数据库中进行测试。这两件事是不同的。Sencha touch在客户端，然后我的答案是正确的。在服务器端针对中的数据库进行测试，对此的答案主要取决于您使用的语言。JAVAC#？PHP？如果是后者，您可以使用类似$_POST['username']的东西；获取您的参数。即使身份验证失败，您也应该返回一个200响应，其中40x是为其他故障保留的。另一方面，我正在尝试使用model/store/proxy对用户进行身份验证。这是用户身份验证的正确方法吗？嗨，Pierre，谢谢你的回答。我想知道，如果我有post请求，如何在API中检索用户名和密码。（我应该根据api中的数据库验证用户名和密码）很抱歉，我对sencha touch和api开发非常陌生。让我用更多细节编辑答案。不过，我给你们的其他例子是正确的，就像jprofitt在他的另一个回答中所说的那样。但是为了更安全，你应该考虑至少一个SSL连接。但这是另一个问题的主题！我将在生产环境中实现SSL连接。谢谢我不确定我是否理解你的问题。您提到在API中检索用户和密码，并在数据库中进行测试。这两件事是不同的。Sencha touch在客户端，然后我的答案是正确的。在服务器端针对中的数据库进行测试，对此的答案主要取决于您使用的语言。JAVAC#？PHP？如果是后者，您可以使用类似$_POST['username']的东西；获取您的参数。即使身份验证失败，您也应该返回一个200响应，其中40x是为其他故障保留的。另一方面，我正在尝试使用model/store/proxy对用户进行身份验证。这是用户身份验证的正确方法吗？

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){

    }    
});