Как заставить Chrome запомнить пароль для формы AJAX?

Question

Я использую AJAX для быстрой проверки ввода на моей странице входа.Если все правильно, пользователь перенаправляется.

Вот код:

$(form).submit(function () {
    $.post($(this).attr('action'), $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            window.location = data.redirectUrl;
        }
   }
...

Он действительно хорошо работает во всех браузерахНо есть проблема в Chrome.Он не предлагает сохранять пароль.

Когда JavaScript отключен, пароль сохраняется, поэтому проблема, безусловно, заключается в перенаправлении на новое место.

Answer 1

Я нашел грязный обходной путь для этой проблемы, вставив невидимый iframe и нацелив на него форму:

<iframe src="/blank.html" id="loginTarget" name="loginTarget" style="display:none">
</iframe>

<form id="loginForm" action="/blank.html" method="post" target="loginTarget"></form>

Соответствующий JavaScript:

$('#loginForm').submit(function () {
    $.post('/login', $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            window.location = data.redirectUrl;
        }
    })
})

Трюкчто на самом деле сделано два запроса.Сначала форма отправляется в /blank.html, который будет игнорироваться сервером, но это вызывает диалог сохранения пароля в Chrome.Кроме того, мы делаем запрос ajax и отправляем реальную форму в / login.Поскольку целью первого запроса является невидимый iframe, страница не обновляется.

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

Редактировать:

Вот его простая JSFiddle версия.Вопреки утверждениям в разделе комментариев, перезагрузка страницы не требуется, и кажется, что она работает очень надежно.Я тестировал его на Win XP с Chrome и на Linux с Chromium.

Answer 2

Можете ли вы изменить значение action формы на data.redirectUrl и разрешить отправку формы в обычном режиме?Это должно вызвать запрос браузера на сохранение имени пользователя и пароля.

$(form).submit(function () {
    $.post($(this).attr('action'), $(this).serialize(), function (data) {
        if (data.status == 'SUCCESS') {
            $("form#name").attr('action', data.redirectUrl);
        }
    }
...

Answer 3

Прочитайте здесь - почему Chrome не распознает эту форму входа? .

Важный комментарий:

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

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

Answer 4

Я исправил это следующим образом:

<form action="/login"></form>

И JavaScript:

$(form).submit(function () {
   if(-1 !== this.action.indexOf('/login')) {
      var jForm = $(this);
      $.post(this.action, $(this).serialize(), function (data) {
         if (data.status == 'SUCCESS') {

            // change the form action to another url
            jForm[0].action = data.redirectUrl;

            // and resubmit -> so, no AJAX will be used 
            // and function will return true
            jForm.submit();
         }
      });
      return false;
   }
}

Answer 5

В моем случае Chrome не запоминал пароль, потому что в одной форме было два разных ввода типа password (создать / войти в одну форму). Проблема в моем случае была решена с помощью javascript-манипуляции по удалению одного из вводимых данных типа password, чтобы браузер мог решить, какие из представленных полей содержат учетные данные.

Answer 6

Со вчерашнего дня, 10.07.2013, Chrome 28, теперь это возможно без каких-либо хитростей. Кажется, они исправили это ...

Answer 7

Я обнаружил, что в полях ввода имени пользователя и пароля должен быть установлен тег имени, чтобы Chrome мог предложить сохранить пароль. В этой теме речь идет о простых формах, но то же самое исправлено в представлении формы jjery AJAX.

Answer 8

Итак, теперь в 2019 году мы можем сделать это с помощью API управления учетными данными.

ПРИМЕЧАНИЕ: это экспериментальный API! Проверьте это: https://developers.google.com/web/fundamentals/security/credential-management/save-forms

Основной код:

function onSubmit() {
    makeAjaxLoginRequest()
    .then((status) => {
        if (status.success) {
            if (window.PasswordCredential) {
                var cr = new PasswordCredential({ id: login, password: password });
                return navigator.credentials.store(cr);
            } else {
                return Promise.resolve();
            }
        }
    }).then(
        () => { // redirect || hide login window, etc... },
        () => { // show errors, etc... }
    )
}