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

Posted 2023-02-24

【中文标题】ExtJS：使用“记住我”功能登录

【英文标题】：ExtJS: Login with 'Remember me' functionality

【发布时间】：2011-02-26 00:34:10

【问题描述】：

我正在尝试使用非常常见的“记住我”功能创建一个简单的登录窗口。登录验证采用 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 方法，但是在哪个组件上（我的猜测是在两个文本字段上）？我没有意识到的另一件事是，我的 button 上的 click 事件如何连接到我的 textfields 的状态属性？

【参考方案1】：

与 Ajax 功能一起使用：

    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');
                
            
        
    ]

【讨论】：

适用于 4.2.1。当表单面板嵌套在窗口中时，我需要添加style: 'margin-bottom: 0px' 以让 Ext 正确计算表单面板的高度。

【参考方案2】：

这不适用于 IE 8。会产生运行时错误。我不知道是不是因为我使用的是 Google Frame，但我想指出 el 是公共属性之一，不是配置选项，所以我不相信 Ext 是为工作而设计的像这样。同样在谷歌浏览器中，您可以选择用户名，但不会显示密码。我认为这是谷歌浏览器设计的一部分，但我也看到它在其他使用谷歌浏览器的网站上正常工作。我没有使用 AJAX 提交表单，但我喜欢 Ext textfields 的外观，我也喜欢工具提示。

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

让网络浏览器在功能上控制这意味着不同的用户可能会根据他们所访问的浏览器有不同的体验（主要谈论谷歌浏览器如何处理保存密码）。

总之，一个非常好的帖子，谢谢。

【参考方案3】：

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

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

要使浏览器的密码保存功能起作用，验证表单必须在页面首次加载时出现在文档中。此外，凭据必须通过该表单以传统（非 AJAX）提交方式提交，这将刷新整个页面。

您可以满足这些要求，同时仍然在 ExtJS UI 中显示表单，方法是最初将表单隐藏到文档中，然后使用 ExtJS 的功能来征用现有的 HTML 元素。

在文档的正文中放置：

<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”配置属性使用现有的输入字段。 其中一个包含字段的面板对现有表单元素执行相同的操作。 通过模拟点击现有的提交按钮来提交表单。

【讨论】：

同意，不要为此使用状态。此外，任何客户端验证也必须在服务器端完成，因为任何 JS 验证都可以很容易地被 Firebug 恶意用户绕过。

非常感谢您的详尽回答。我已经放弃了 AJAX 功能并改用您的方法。能够使用 AJAX 身份验证会很好，因为我可以在我的应用程序上放置一个模式窗口并进行验证，而无需重新加载整个站点。

出色的工作，猫头鹰。这是我的声望+50。这正是我完成重构任务所需的信息。谢谢。

遗憾的是，el 配置自 ExtJS 4 以来已经消失。

有人知道如何为 ExtJS 6 实现这个吗？ el 和 contentEl 都不起作用。