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 Метод, но на каком компонент (мое предположение на двух текстовых полях)? Другая вещь, которую я не могу понять, как мой щелчок Мероприятие на кнопка подключен к государственным свойствам моего Текстовые поля?

Answer 1

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

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

Для сохранения пароля браузера для работы Форма аутентификации должна присутствовать в документе, когда страница впервые загружена. Кроме того, учетные данные должны быть представлены по этой форме в традиционном (без 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.Ready или в то время вы отображаете форму аутентификации, создайте панель, которая использует вышеупомянутые элементы формы:

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:

{
    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 Frame, но я хотел бы отметить, что el является одним из публичных свойств, а не вариант конфигурации, поэтому я не верю, что Ext Был ли дизайн работать так. Также в Google Chrome вы можете выбрать имя пользователя, но пароль не отображается. Я думаю, что это часть дизайна Google Chrome, но я также видел, что он правильно работал на других сайтах с Google Chrome. Я не использую Ajax, чтобы отправить форму, но мне нравится, как Ext textfields Смотрите, и мне тоже нравятся советы инструментов.

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

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

Все во всем очень хорошем посты спасибо.