Extjs：使用“记住我”功能登录

Question

我正在尝试使用非常常见的“记住我”功能创建一个简单的登录窗口。登录验证已完成AJAX样式，因此浏览器不记得我的输入。

我的方法是使用内置 state 功能，但是如何使用它使我感到困惑。

Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
    expires: new Date(new Date().getTime()+(1000*60*60*24*7)), //7 days from now
}));

...

{
    xtype: 'textfield',
    fieldLabel: 'User name',
    id: 'txt-username',
    stateful: true,
    stateId: 'username'
}, {
    xtype: 'textfield',
    fieldLabel: 'Password',
    id: 'txt-password',
    inputType: 'password',
    stateful: true,
    stateId: 'password'
}, {
    xtype: 'button',
    text: 'Validate',
    stateEvents: 'click'
}

我知道我必须实施 getState 方法，但是在哪个组件上（我的猜测在两个文本场上）？我没有意识到的另一件事是，我的 点击 事件 按钮 连接到我的状态属性 Textfields?

Answer 1

不要使用状态。您将用户的密码以纯文本存储在浏览器的cookie中。任何可以访问浏览器的人都可以阅读它，并且在每个请求中都将其发送回服务器。

希望您正在使用某种形式的服务器端会话，并且不依赖于用户的身份验证信息在每个请求中都存在以维护登录状态。如果是这样，我建议利用内置到大多数现代浏览器内置的密码保存功能来处理任何给定的会话中用户的初始身份验证的记忆。

对于浏览器的密码保存功能，必须在第一次加载页面时在文档中存在身份验证表格。此外，必须在传统（非AJAX）提交中以该表格提交凭据，该提交将刷新整个页面。

您可以通过将隐藏在文档中的表单渲染，然后使用EXTJS的功能来实现现有的HTML元素来满足这些要求，同时仍在Extjs UI中呈现表单。

在文件的身体中：

<form id="auth-form" action="/url/of/your/login/action" method="POST">
    <input id="auth-username" type="text" name="username" class="x-hidden">
    <input id="auth-password" type="password" name="password" class="x-hidden">
    <input id="auth-submit" type="submit" class="x-hidden">
</form>

然后，在Ext.Onready或当您显示身份验证表单时构建一个面板，该面板使用上述元素：

new Ext.Panel({
    el: 'auth-form',
    autoShow: true,
    layout: 'form',
    items: [
        {
            xtype: 'textfield',
            el: 'auth-username',
            autoShow: true,
            name: 'username',
            fieldLabel: 'Username',
            anchor: '100%'
        },
        {
            xtype: 'textfield',
            el: 'auth-password',
            autoShow: true,
            name: 'password',
            fieldLabel: 'Password',
            anchor: '100%'
        }
    ],
    buttons: [
        {
            text: 'Log in',
            handler: function() {
                Ext.get('auth-submit').dom.click();
            }
        }
    ]
});

形式的确切组成可能会有所不同。它可以内置在Ext.Window实例或其他任何内容中。重要的是：

• 用户名和密码字段通过“ EL”和“ AutoShow”配置属性利用现有输入字段。
• 包含字段的一个面板对现有表单元素的作用相同。
• 表格的提交是通过模拟单击现有提交按钮执行的。

Answer 2

与Ajax funcionality一起使用：

{
    xtype: 'form',
    autoEl: {
        //normal post for false submit
        tag: 'form', 
        action: "#", 
        method: 'post'
    },
    items: [
        {
            xtype: 'textfield',
            name: 'username',
            fieldLabel: 'Username',
            listeners: {
                afterrender:function(cmp){
                    cmp.inputEl.set({
                        autocomplete:'on'
                    });
                }
            }
        },
        {
            xtype: 'textfield',
            name: 'password',
            inputType: 'password', 
            fieldLabel: 'Password',
            listeners: {
                afterrender:function(cmp){
                    cmp.inputEl.set({
                        autocomplete:'on'
                    });
                },
            }
        },
        {
            xtype: 'button',
            text: 'Login',
            handler: function() {
                Ext.Ajax.request(); //login ajax request
                Ext.get('falsesubmit').dom.click(); //false submit
            },
        },
        {
            //button with submit input for false submit
            xtype: 'button',
            hidden:true,
            listeners: {
                afterrender: function() {
                    this.el.createChild({tag: 'input', type: 'submit', id: 'falsesubmit'});
                }
            }
        }
    ]
}

Answer 3

这与IE 8不起作用。产生运行时错误。我不知道这是否是因为我正在使用Google框架，但我想指出 el 是公共属性之一，而不是配置选项，所以我不相信 Ext 是这样的设计。另外，在Google Chrome中，您可以选择用户名，但密码不显示。我认为这是Google Chrome设计的一部分，但我也看到它在其他Google Chrome的其他网站上正常工作。我不是使用Ajax提交表格，但我喜欢 Ext textfields 看，我也喜欢工具提示。

我看不出这种方式比使用cookie更安全，因为现在如何实现它，密码存储在客户端计算机上。明天我将尝试使用HTML5客户端存储解决方案。

让Web浏览器控制此功能，这意味着不同用户可能会根据他们可以访问的浏览器具有不同的体验（主要在Google Chrome如何处理保存密码的方式上进行交谈）。

总而言之，非常好的帖子谢谢。