Ajaxовая форма логина и запоминание пароля
1. кнопка логин
2. по клику аджаксом подгружается форма логина
3. обработка ее опятьже происходит по адажксу.
4.при успехе, либо document.location.reload(true) либо даже сабмитил форму(обьясню ниже)
Браузер вызывать диалог сохранения пароля отказывается.
Что сделал. в качестве акшена, урл на скрипт который, просто делает редирект, соответсвеннно после того как аджаксовый выхлоп сказал, что все ок, юзер залогинен, я делал сабмит формы.
Результат - ФФ предложил сохранить пароль, но при следуйщем вызове формы логина - поля не заполнены. Хром, даже не сохранял пароль..
Мож кто сталкивался. как решить задачу?
2. по клику аджаксом подгружается форма логина
3. обработка ее опятьже происходит по адажксу.
4.при успехе, либо document.location.reload(true) либо даже сабмитил форму(обьясню ниже)
Браузер вызывать диалог сохранения пароля отказывается.
Что сделал. в качестве акшена, урл на скрипт который, просто делает редирект, соответсвеннно после того как аджаксовый выхлоп сказал, что все ок, юзер залогинен, я делал сабмит формы.
Результат - ФФ предложил сохранить пароль, но при следуйщем вызове формы логина - поля не заполнены. Хром, даже не сохранял пароль..
Мож кто сталкивался. как решить задачу?
А ты форму просто скрытую сделай.
в силу определенных ограничений - это очень проблемный вариант.
Вот такой он ajax :D Насколько я знаю решения как такового нет (разве что в iframe подгружать форму а не ajax'om или ъранить логин/пасс в кукизах и самому их подгружать, что не очень безопасно) Предложение о сохранении выползет только когда onsubmit возвращает true. Поля логина и пароля заполняются только при загрузке страници. (Проблема не только у тебя например такой сайт если нажать вход (слева вверху) то логин с паролем не подтягиваются, а на страничке входа автоматом поля заполняются)
Привет. arrjj прав, с Аяксом так не получится, даже если субмитишь форму. Как вариант: хранить два пароля в базе: один настоящий, другой темповый (чет большое). Темповый сменяется каждый раз после "Входа" и хранится вечно на компе клиента вместе с логином. При выводе формы, туда они вписываются:
Это такой извращенный вариант галочки "запомнить меня" в случае если, человек не должен сразу "Входить" в систему, а только после нажатии кнопки Х, но и не хочется его заставлять вводить каждый раз пароль.
Это такой извращенный вариант галочки "запомнить меня" в случае если, человек не должен сразу "Входить" в систему, а только после нажатии кнопки Х, но и не хочется его заставлять вводить каждый раз пароль.
Заинтересовала эта тема, так что провел небольшие опыты. Первым делом скачал исходники 4 FF и посмотрел, как там организовано подставление паролей. Если вкратце, то на этапе формирования дерева DOM к input'у в форме цепляются слушатели, обеспечивающие подстановку/запоминание паролей. Запоминание паролей происходит перед вызовом обработчиков onsubmit формы. Данные для подстановки сопоставляются action формы и имени поля. Я не стал особо углубляться, но, по-моему, слушалка вешается только на input логина.
Беда подгружаемой по AJAX формы в том, что на ее input'е не висит слушателей (они же вешаются при формировании DOM страницы), поэтому я предлагаю силами разметки или программно (силами JS) вставлять в документ форму с таким же action и именами полей логина и пароля, а при подгрузке по AJAX формы изымать эти поля из DOM (заранее вставленные, с висящими на одном из них слушателями) и подменять ими соответствующие поля в подгруженной форме. Таким образом получаем работающую подстановку паролей, но есть всякие нюансы в зависимости от браузера.
FF. С FF все обстоит наилучшим образом. FF позволяет добавить форму, на которую будут вешаться слушатели, как методами DOM, так и с помощью "document.write". Так же замечательно дела у FF обстоят и с отправкой - залогиниванием FF считает и непосредственную отправку подгруженной формы (кликом по submit и т. п.), и ее программную отправку и AJAX отправку (по крайней мере ту, что предоставляет JQuery без доп. плагинов). Причем работает это все аж с 3 версии FF (более ранней у меня под рукой не было).
Chrome. Этот друг ведет себя несколько хуже. Он как минимум не пытается запомнить пароль, если не было отправки формы (непосредственной или программной). Возможно, ему еще что-то не нравится, но я вокруг него с бубном особо не плясал. В итоговом варианте он работает и это хорошо. :)
Opera. То же замечание, что и для Хрома - нужна отправка формы. Работае как минимум начиная с 9.01 версии.
IE. Ну, IE не может не выделиться. Ожидаемо, что у него особые претензии, выражающиеся в необходимости отправлять форму непосредственно (т. е. не препятствовать дефолтнуму поведению кнопки отправки формы возвращением false из onclick). Я поначалу подумал, что он еще и не цепляет слушателей (или как у него это там реализовано) к элементам формы, добавленным через DOM, а не через "document.write()", но ошибся. По крайней мере 8ая версия на это не жалуется. Все правильно подумал, действительно, не цепляет IE менеджер паролей к полям формы, добавляемым через DOM. Поэтому для работы подстановки/запоминания паролей еще и в нем цепляю скрипт извне с "document.write()"ами. :o
файл bz.html:
файл bz2.html
файл bz.js
Я, правда, не совсем понял, в чем проблема. Может результат изысканий все равно
не подходит. Короче, требую более внятное пояснение сути проблемы и имеющихся
ограничений. :)
Беда подгружаемой по AJAX формы в том, что на ее input'е не висит слушателей (они же вешаются при формировании DOM страницы), поэтому я предлагаю силами разметки или программно (силами JS) вставлять в документ форму с таким же action и именами полей логина и пароля, а при подгрузке по AJAX формы изымать эти поля из DOM (заранее вставленные, с висящими на одном из них слушателями) и подменять ими соответствующие поля в подгруженной форме. Таким образом получаем работающую подстановку паролей, но есть всякие нюансы в зависимости от браузера.
FF. С FF все обстоит наилучшим образом. FF позволяет добавить форму, на которую будут вешаться слушатели, как методами DOM, так и с помощью "document.write". Так же замечательно дела у FF обстоят и с отправкой - залогиниванием FF считает и непосредственную отправку подгруженной формы (кликом по submit и т. п.), и ее программную отправку и AJAX отправку (по крайней мере ту, что предоставляет JQuery без доп. плагинов). Причем работает это все аж с 3 версии FF (более ранней у меня под рукой не было).
Chrome. Этот друг ведет себя несколько хуже. Он как минимум не пытается запомнить пароль, если не было отправки формы (непосредственной или программной). Возможно, ему еще что-то не нравится, но я вокруг него с бубном особо не плясал. В итоговом варианте он работает и это хорошо. :)
Opera. То же замечание, что и для Хрома - нужна отправка формы. Работае как минимум начиная с 9.01 версии.
IE. Ну, IE не может не выделиться. Ожидаемо, что у него особые претензии, выражающиеся в необходимости отправлять форму непосредственно (т. е. не препятствовать дефолтнуму поведению кнопки отправки формы возвращением false из onclick). Я поначалу подумал, что он еще и не цепляет слушателей (или как у него это там реализовано) к элементам формы, добавленным через DOM, а не через "document.write()", но ошибся. По крайней мере 8ая версия на это не жалуется. Все правильно подумал, действительно, не цепляет IE менеджер паролей к полям формы, добавляемым через DOM. Поэтому для работы подстановки/запоминания паролей еще и в нем цепляю скрипт извне с "document.write()"ами. :o
файл bz.html:
Код:
<html>
<head>
<script type="text/javascript" src="./js/jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$.ajax({
type: "POST",
url: "/bz2.html"
}).success(function( data ) {
var $bz = $('#z input[name="log"]').detach().css('background-color','red');
var $bz2 = $('#z input[name="pwd"]').detach().css('background-color','red');
$('#z').empty();
$('#z').html(data);
$('#z input[name="log"]').replaceWith($bz);
$('#z input[name="pwd"]').replaceWith($bz2);
});
});
});
</script>
</head>
<body>
<button>Load!</button>
<div id="z">
<form action="" id="k">
<!-- лучший вариант, иметь форму прямо в разметке
<input type="text" name="log" value="" />
<input type="password" name="pwd" id="pwd" value="" />-->
<script type="text/javascript">
$('#k').append('<script type="text/javascript" src="./bz.js"></'+'script>');
/*$(document).ready(function(){return; по окончание разбора документа
брыкаться уже поздно - ни один браузер не подтянул менеджер паролей
к вставленной таким образом форме */
/* Такое работает, но не в IE. IE, почему-то цепляетяет менеджер паролей
только к результатам document.write(); ВРУ, как минимум 8ой цепляет;
Нет, Не вру ^_^
$('#z form')
.append('<input type="text" name="log" value="" />')
.append('<input type="password" name="pwd" id="pwd" value="" />');
//});*/
</script>
<input type="submit" value="submit!" />
</form>
</div>
</body>
</html>
<head>
<script type="text/javascript" src="./js/jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
$.ajax({
type: "POST",
url: "/bz2.html"
}).success(function( data ) {
var $bz = $('#z input[name="log"]').detach().css('background-color','red');
var $bz2 = $('#z input[name="pwd"]').detach().css('background-color','red');
$('#z').empty();
$('#z').html(data);
$('#z input[name="log"]').replaceWith($bz);
$('#z input[name="pwd"]').replaceWith($bz2);
});
});
});
</script>
</head>
<body>
<button>Load!</button>
<div id="z">
<form action="" id="k">
<!-- лучший вариант, иметь форму прямо в разметке
<input type="text" name="log" value="" />
<input type="password" name="pwd" id="pwd" value="" />-->
<script type="text/javascript">
$('#k').append('<script type="text/javascript" src="./bz.js"></'+'script>');
/*$(document).ready(function(){return; по окончание разбора документа
брыкаться уже поздно - ни один браузер не подтянул менеджер паролей
к вставленной таким образом форме */
/* Такое работает, но не в IE. IE, почему-то цепляетяет менеджер паролей
только к результатам document.write(); ВРУ, как минимум 8ой цепляет;
Нет, Не вру ^_^
$('#z form')
.append('<input type="text" name="log" value="" />')
.append('<input type="password" name="pwd" id="pwd" value="" />');
//});*/
</script>
<input type="submit" value="submit!" />
</form>
</div>
</body>
</html>
файл bz2.html
Код:
<form method="post">
<input type="text" name="log" value="" />
<input type="password" name="pwd" id="pwd" value="" />
<!-- не возвращаем false из onclick, т. к. IE в этом случае
не запомнит пароль, даже если потом форму отправить программно -->
<input type="submit" value="submit!" onclick="doBz(this.form);" />
</form>
<script type="text/javascript">
function doBz(form)
{
var data = {};
data.log = $('[name="log"]', form).val();
data.pwd = $('[name="pwd"]', form).val();
$.ajax({
type: "POST",
url: "/",
data: data
}); /* хром требует отправки формы как непосредственно или программно, а ajax
не цепляет .done(function(){ form.submit(); }); */
}
</script>
<input type="text" name="log" value="" />
<input type="password" name="pwd" id="pwd" value="" />
<!-- не возвращаем false из onclick, т. к. IE в этом случае
не запомнит пароль, даже если потом форму отправить программно -->
<input type="submit" value="submit!" onclick="doBz(this.form);" />
</form>
<script type="text/javascript">
function doBz(form)
{
var data = {};
data.log = $('[name="log"]', form).val();
data.pwd = $('[name="pwd"]', form).val();
$.ajax({
type: "POST",
url: "/",
data: data
}); /* хром требует отправки формы как непосредственно или программно, а ajax
не цепляет .done(function(){ form.submit(); }); */
}
</script>
файл bz.js
Код:
document.write('<input type="text" name="log" value="" />');
document.write('<input type="password" name="pwd" id="pwd" value="" />');
document.write('<input type="password" name="pwd" id="pwd" value="" />');
Я, правда, не совсем понял, в чем проблема. Может результат изысканий все равно
не подходит. Короче, требую более внятное пояснение сути проблемы и имеющихся
ограничений. :)
Все это конечно чудесно, за проведенную работу и исследование низкий поклон и уважение, но суть проблемы именно в ...
Цитата:
Беда подгружаемой по AJAX формы в том, что на ее input'е не висит слушателей (они же вешаются при формировании DOM страницы), поэтому я предлагаю силами разметки или программно (силами JS) вставлять в документ форму с таким же action и именами полей логина и пароля, а при подгрузке по AJAX формы изымать эти поля из DOM (заранее вставленные, с висящими на одном из них слушателями) и подменять ими соответствующие поля в подгруженной форме. Таким образом получаем работающую подстановку паролей, но есть всякие нюансы в зависимости от браузера.
Форма подгружается через AJAX именно для того, чтобы подгрузить ее динамически. К примеру в Диалоговое окно. Другими словами: хрен знает, кто, когда, зачем и при каких обстоятельствах эту форму подгрузит, а самое главное: с какой именно статической страницы. Вставлять "спрятанные" боксы с логином и паролем в каждую статическую страницу сайта, назвать кроме как "ненужным излишеством", ничего на ум не приходит. Но главный вопрос: Насколько цель оправдывает средства? Говоря по русски: стоит ли это такого геморра?
Edit: Уточну, в моем случае подгрузки формы по аяксу. К примеру на том же feedbackme.org. Как обстоят дела у Вульфа я конечно не знаю.
Ничего, в каком веке живем. Можно для всех страниц сделать включение одного и того же js скрипта, который будет формировать dummy-форму, обвешиваемую слушателями. Лишние 4 узла в DOM не большая беда. Нет, конечно если менеджер паролей не нужен в принципе, или почти совсем не нужен, то, конечно, и заморачиваться не стоит. :)
Можно еще параллельно с подгрузкой проблемной формы по AJAX подгружать (добавлять в DOM) iframe, который, в свою очередь, будет подгружать почти пустую html страницу с одной только dummy-формой и двумя (тремя для смены пароля) полями. К ним подцепится менеджер паролей, и можно будет извлечь их из дерева iframe'а и вставить к себе в AJAX форму. Фишка iframe в том, что для него формируется DOM дерево, а на этой операции и вешаются слушатели, в отличие от случая сборки формы из сырья, выбранного по AJAX в виде json и т. п.
---
Вообще, самая главная затыка тут - это то, что кроме FF, видимо, никто не умеет без отправки формы пароли подхватывать. Но Вульф упоминал, что он сабмитил форму, использовал редиректы, т. е. для него это, как я понял, не критично. А откуда берется форма логина у тебя, я не понял (статичная или собирается скриптом?).
Можно еще параллельно с подгрузкой проблемной формы по AJAX подгружать (добавлять в DOM) iframe, который, в свою очередь, будет подгружать почти пустую html страницу с одной только dummy-формой и двумя (тремя для смены пароля) полями. К ним подцепится менеджер паролей, и можно будет извлечь их из дерева iframe'а и вставить к себе в AJAX форму. Фишка iframe в том, что для него формируется DOM дерево, а на этой операции и вешаются слушатели, в отличие от случая сборки формы из сырья, выбранного по AJAX в виде json и т. п.
---
Вообще, самая главная затыка тут - это то, что кроме FF, видимо, никто не умеет без отправки формы пароли подхватывать. Но Вульф упоминал, что он сабмитил форму, использовал редиректы, т. е. для него это, как я понял, не критично. А откуда берется форма логина у тебя, я не понял (статичная или собирается скриптом?).
Цитата:
Можно еще параллельно с подгрузкой проблемной формы по AJAX подгружать (добавлять в DOM) iframe, который, в свою очередь, будет подгружать почти пустую html страницу с одной только dummy-формой и двумя (тремя для смены пароля) полями. К ним подцепится менеджер паролей, и можно будет извлечь их из дерева iframe'а и вставить к себе в AJAX форму. Фишка iframe в том, что для него формируется DOM дерево, а на этой операции и вешаются слушатели, в отличие от случая сборки формы из сырья, выбранного по AJAX в виде json и т. п.
А вот это кстати мысль очень и очень здравая... Раскладываю по полочкам:
1. Подгружается скрытый ифрайм с паролями
2. Подгружается "реальная" Аях форма
3. Вводя пароли в Аях форму, они так же вводятся в ифрайм форму. Просто мы это не видим
3. Субмит "Аях" формы на самом деле жестко субмитит ифрайм... по всем стандартам, без излишеств.. Другими словами субмит идет на реальный обработчик без аях заморочек. (тем самым мы симулируем Аях)
4. Как факт браузер это воспринимает как вполне нормальный субмит формы и предлагает запомнить пароль
5. В след раз пароль введется в Аях форму. .В теории, а на практике браузера вроде как не вводят пароли в то, что "скрыто от глаз".. Но проверить можно
Мне самом здесь больше интересен выпадающий список возможных логинов и подстановка пароля в соответствии с логином. FF совершенно безразлично, видна форма или нет, а вот в IE, возможно, придется прибегнуть к вынесению за границы окна.
Цитата:
список возможных логинов и подстановка пароля в соответствии с логином
А зачем? +) Единственное, что в голову приходит: воровать пароли =)
Как зачем - для юзеров. Разве это вообще нормально, обрезать функционал браузеров своей версткой / динамикой? Я считаю, что нет. :)
Ненене.. Это понятно =) Я имею ввиду зачем программно добираться до списка "логинов" и вытаскивать через него соответствующий пароль?
Edit... А сори.. тупанул.. Не правильно понял твое предыдущей пост. Теперь все ясно.
Edit... А сори.. тупанул.. Не правильно понял твое предыдущей пост. Теперь все ясно.
Кстати, если тебе удастся провернуть сие на всех браузерах. Будь другом, выложи решение, я его в Фидбак всабачу, для массового текста. У самого к сожалению, просто физически нет времени экспериментировать =(