ExtJS: Войти с функцией «Запомнить меня»

Не используйте состояние. Вы сохраняете пароль пользователя в виде простого текста в файлах cookie браузера. Любой, у кого есть доступ к браузеру, может прочитать его, и он отправляется обратно на сервер при каждом запросе.

Надеюсь, вы используете некоторую форму сеансов на стороне сервера и не зависите от информации об аутентификации пользователя, присутствующей в каждом запросе, для поддержания состояния входа в систему. Если это так, то я рекомендую воспользоваться функцией сохранения пароля, встроенной в большинство современных браузеров, чтобы запомнить пользователя для начальной аутентификации в любом данном сеансе.

Чтобы функция сохранения пароля браузера работала, форма аутентификации должна присутствовать в документе при первой загрузке страницы. Кроме того, учетные данные должны быть отправлены этой формой в традиционном (не AJAX) представлении, которое обновит всю страницу.

Вы можете выполнить эти требования, по-прежнему представляя форму в пользовательском интерфейсе ExtJS, сначала отображая форму, скрытую в документе, а затем используя возможности 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».
• Одна из панелей, содержащих поля, делает то же самое для существующего элемента формы.
• Отправка формы выполняется путем имитации нажатия на существующую кнопку отправки.

Использование с функциональностью 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'});
                }
            }
        }
    ]
}

Это не работает с IE 8. Возникает ошибка времени выполнения. Я не знаю, связано ли это с тем, что я использую Google Frame, но я хотел бы отметить, что el является одним из общедоступных свойств, а не параметром конфигурации, поэтому я не верю, что Ext был разработан для такой работы. Также в Google Chrome вы можете выбрать имя пользователя, но пароль не отображается. Я думаю, что это часть дизайна Google Chrome, но я также видел, что он правильно работает на других сайтах с Google Chrome. Я не использую AJAX для отправки формы, но мне нравится, как выглядит Ext textfields, а также мне нравятся подсказки.

Я не вижу, насколько этот способ безопаснее, чем использование файла cookie, потому что теперь независимо от того, как вы его реализуете, пароль хранится на клиентской машине. Завтра я собираюсь попробовать решение для хранения клиентов html5.

Позволить веб-браузеру управлять этим функционально означает, что у разных пользователей может быть разный опыт в зависимости от браузера, к которому у них есть доступ (в основном речь идет о том, как Google Chrome обрабатывает сохранение паролей).

А вообще очень хороший пост спасибо.