ExtJS: Войти с помощью функции «Запомнить меня» - PullRequest
Новая
       13

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

9 голосов
/ 31 мая 2010

Я пытаюсь создать простое окно входа в систему с очень распространенной функциональностью «Запомнить меня». Проверка логина выполнена в стиле 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, но на каком компоненте (я думаю, в двух текстовых полях)? Еще одна вещь, которую я не могу понять: как мое событие click на кнопке связано со свойствами состояния моих текстовых полей ?

Ответы [ 3 ]

25 голосов
/ 31 мая 2010

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

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

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

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

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

В целом очень хороший пост, спасибо.

...