Почему эта форма не побуждает браузер предлагать сохранить пароль?

Question

У меня есть следующая форма, которая размещается на странице через AJAX (jQuery AJAX, если это помогает):

        <div id="login">
            <iframe src="/api/core/authSystem/authUser.php" id="temp" name="temp" style="display:none"></iframe>
            <form id="loginForm" target="temp" onSubmit="App.Auth.login(); return false;">
                Email: <input type="text" name="email" id="email" onkeydown='if(event.keyCode == 13){ this.submit; }' /><br />
                Password: <input type="password" name="password" id="password" onkeydown='if(event.keyCode == 13){ this.submit; }' /><br />
                <div class="errorMsg" id="loginError"></div>
                <div class="loginHelp l"><a href="#">Cant access your account?</a></div>
                <input class="button rounded r" type="submit" id="loginButton" value="Log In" />
            </form>
        </div>

Следуя предложениям, сделанным в Этот вопрос Я добавил iframe и нацеливаюсь на него. Однако браузеры по-прежнему не будут предлагать пользователям сохранить пароль. Есть идеи почему?

РЕДАКТИРОВАТЬ: Я только что заметил, что Firefox попросит сохранить пароль, но на самом деле не поместит его в форму, как только вы вернетесь на страницу входа.

Answer 1

Вы можете попробовать метод "двойной подачи".

Вкратце: при первой отправке отмените ее, но после успешной авторизации запустите ее снова и не отменяйте.

Подробнее:

Вам нужно переписать форму следующим образом:

<form id="loginForm" onSubmit="return App.Auth.login();" method="POST" action="/back-redirector">

/back-redirector просто перенаправляет обратно на ту же страницу или на главную страницу. Я перенаправляю обратно на ту же страницу.

И ваша App.Auth.login() функция должна return false при первом вызове и return true, если первый вызов привел к успешному входу в систему.

Как это:

letTheLoginFormDoTheSubmit = false; 
// flag to show that login was successful 
// and we need to trigger password save prompt.

login: function() {
    if (letTheLoginFormDoTheSubmit) {
        return true;
    }
    // Do the login
    // Start ajax
    ajax(login, password, function() {
        // This function is called when AJAX has completed
        if (loginIsGood) {
            letTheLoginFormDoTheSubmit = true;
            loginForm.submit(); // trigger submit again
        });
    return false;
}

Так что же происходит?

1. Когда ваша функция входа в систему вызывается в первый раз, она запускает последовательность входа в систему и возвращает false, чтобы остановить обычную отправку формы.
2. Функция входа получает данные, и, если вход выполнен успешно, он сохраняет их на стороне браузера, поднимает флаг «все в порядке, вызывает запрос на сохранение пароля» и снова отправляет форму.
3. Но поскольку флажок «login», функция не выполняет повторный вход в систему, а просто позволяет браузеру отправлять форму в обычном режиме, и это вызывает запрос сохранения пароля.

Форма отправляется на URL, который просто перенаправляет браузер назад, и не выполняет никакой работы.

Некоторые предостережения:

• Страница будет перезагружена, так что сохраните ваш файл cookie аутентификации как-нибудь локально, или сообщите перенаправителю, что это такое, чтобы он мог включить его в редирект.
• Все данные формы могут пройти через эту вторую отправку. Чтобы избежать этого, удалите соответствующие поля из формы или удалите атрибуты имени.
• Перенаправитель необходим на стороне сервера.

Но в целом это не является серьезным изменением в процессе входа в систему и должно вызывать запрос сохранения пароля в каждом браузере.