ExtJS的：“记住我”登录功能 [英] ExtJS: Login with 'Remember me' functionality

问题描述

我想用很普通的记住我功能，创建一个简单的登录窗口。登录验证完成AJAX风格，所以浏览器不会记得我的输入。

I'm trying to create a simple login window with the very common 'Remember me' functionality. The login validation is done AJAX style, thus the browser won't remember my input.

我的方法是使用内置的状态的功能，但如何使用它混淆了我。

My approach is to use the built-in state functionality, but how to use it confuses me.

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 的方法，但什么成分（我的猜测是对两个文本框）？另一件事我没有意识到的是，怎么是我的点击上的按钮的连接状态属性我的文本框的？

I know I have to implement the getState method, but on what component (my guess is on the two textfields)? Another thing I fail to realize is, how is my click event on the button connected to the state properties of my textfields?

推荐答案

不要使用状态。你是存储用户的密码在浏览器的cookie纯文本。任何谁有权访问浏览器可以读取它，它被发送回服务器中的每个请求。

Don't use state. You are storing the user's password in plain text in the browser's cookies. Anyone who has access to the browser can read it and it is being sent back to the server in every request.

希望使用的是某种形式的服务器端的会话，并且不依赖于用户的认证信息是present在每一个请求，以保持已登录的状态。如果是这样的话，我建议采取内置于最现代的浏览器来处理记忆在任何给定的会话初始身份验证的用户的密码保存功能的优势。

Hopefully you are using some form of server-side sessions and are not depending on the user's authentication information being present in every request to maintain logged-in state. If so, then I recommend taking advantage of the password saving feature built in to most modern browsers to handle remembering of the user for the initial authentication in any given session.

有关浏览器的密码保存功能工作的认证形式必须是present的文件中第一次加载网页时。此外，该证书必须在传统（非Ajax）提交该表格提交，这将刷新整个页面。

For the browser's password saving feature to work the authentication form must be present in the document when the page is first loaded. Also, the credentials must be submitted by that form in a traditional (non-AJAX) submit which will refresh the entire page.

您可以满足这些要求，同时还$ P $由最初呈现隐入文件的格式，然后使用的ExtJS的能力征用现有的HTML元素的ExtJS的UI psenting的形式。

You can fulfill these requirements while still presenting the form in the ExtJS UI by initially rendering the form hidden into the document and then using the capabilities of ExtJS to commandeer existing HTML elements.

在文档的体认沽：

<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或当时正在显示一个认证形式建立一个小组，这使得使用上述表单元素的：

Then, in Ext.onReady or at the time you are displaying an authentication form build a panel which makes use of the above form elements:

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实例或任何其他。什么是重要的：

The exact composition of the form may vary. It may be built into an Ext.Window instance or whatever else. What is important:

• 的用户名和密码字段通过厄尔尼诺和车展配置属性利用现有的输入字段。
• 一个包含字段的面板做同样为现有的表单元素。
• 提交表单是由模拟点击现有的提交按钮。
执行

这篇关于ExtJS的：“记住我”登录功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！