ExtJS: Вход в систему с 'Помнит меня' функциональность
Я пытаюсь создать простое окно входа в систему с очень общим, 'Помнят меня' функциональность. Проверка входа в систему является сделанным стилем 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 метод, но на какой компонент (мое предположение находится на этих двух текстовых полях)? Другая вещь, которую мне не удается понять, как мое событие щелчка на кнопке подключено к государственной собственности моих текстовых полей?
2 ответа
Не использовать состояние. Вы храните пароль пользователя в виде обычного текста в файлах 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'.
- Одна из панелей, содержащих поля, делает то же самое для существующего элемента формы.
- Отправка формы выполняется имитированным щелчком существующей кнопки отправки.
Это не работает с IE 8. Выдается ошибка времени выполнения. Я не знаю, связано ли это с тем, что я использую Google Frame, но я хотел бы отметить, что el является одним из общедоступных свойств, а не параметром конфигурации, поэтому я не верю, что Ext был разработан для такой работы. Также в Google Chrome вы можете выбрать имя пользователя, но пароль не отображается. Я думаю, что это часть дизайна Google Chrome, но я также видел, как он правильно работает на других сайтах с Google Chrome. Я не использую AJAX для отправки формы, но мне нравится, как выглядят текстовые поля Ext , и мне нравятся подсказки.
Я не понимаю, насколько этот способ безопаснее, чем использование cookie, потому что теперь, независимо от того, как вы его реализуете, пароль хранится на клиентской машине. Завтра собираюсь попробовать клиентское хранилище html5.
Разрешение веб-браузеру управлять этим функционально означает, что разные пользователи могут иметь разный опыт в зависимости от браузера, к которому у них есть доступ (в основном речь идет о том, как Google Chrome обрабатывает сохранение паролей).
В целом, очень хороший пост, спасибо.