Как заставить браузер запрашивать пароль?

Ответ 1

Я нашел полное решение для этого вопроса. (Я тестировал это в Chrome 27 и Firefox 21).

Есть две вещи, которые нужно знать:

• Триггер "Сохранить пароль" и
• Восстановить сохраненное имя пользователя/пароль

1. Триггер "Сохранить пароль" :

Для Firefox 21, "Сохранить пароль" запускается, когда он обнаруживает, что существует форма, содержащая текстовое поле ввода и поле ввода пароля ввода. Поэтому нам просто нужно использовать

$('#loginButton').click(someFunctionForLogin);
$('#loginForm').submit(function(event){event.preventDefault();});

someFunctionForLogin() выполняет ли вход ajax и перезагружает/перенаправляет на подписанную страницу, а event.preventDefault() блокирует первоначальное перенаправление из-за отправки формы.

Если вы имеете дело только с Firefox, вышеупомянутого решения достаточно, но он не работает в Chrome 27. Затем вы спросите, как вызвать "Сохранить пароль" в Chrome 27.

Для Chrome 27, "Сохранить пароль" запускается после, он перенаправляется на страницу, отправив форму, содержащую поле ввода с атрибутом name= 'username' и введите поле пароля с атрибутом name= 'password'. Поэтому мы не можем заблокировать перенаправление из-за отправки формы, но мы можем сделать перенаправление после того, как мы выполнили вход ajax. (Если вы хотите, чтобы вход ajax не перезагружал страницу или не перенаправлял страницу, к сожалению, мое решение не работает.) Затем мы можем использовать

<form id='loginForm' action='signedIn.xxx' method='post'>
    <input type='text' name='username'>
    <input type='password' name='password'>
    <button id='loginButton' type='button'>Login</button>
</form>
<script>
    $('#loginButton').click(someFunctionForLogin);
    function someFunctionForLogin(){
        if(/*ajax login success*/) {
            $('#loginForm').submit();
        }
        else {
            //do something to show login fail(e.g. display fail messages)
        }
    }
</script>

Кнопка с типом = 'button' сделает форму не отправленной при нажатии кнопки. Затем привязка функции к кнопке для входа ajax. Наконец, вызов $('#loginForm').submit(); перенаправляется на страницу с подпиской. Если страница с подпиской является текущей страницей, вы можете заменить "signedIn.xxx" на текущую страницу, чтобы сделать "обновить".

Теперь вы обнаружите, что метод для Chrome 27 также работает в Firefox 21. Так что лучше использовать его.

2. Восстановить сохраненное имя пользователя/пароль:

Если у вас уже есть loginForm, жестко закодированный как HTML, то вы не найдете проблемы с восстановлением сохраненного пароля в loginForm.
Однако сохраненное имя пользователя/пароль не будет привязываться к loginForm, если вы используете js/jquery для динамического ввода loginForm, поскольку сохраненное имя пользователя/пароль связывается только при загрузке документа.
Поэтому вам необходимо жестко закодировать loginForm как HTML и использовать js/jquery для динамического перемещения/отображения/скрытия loginForm.

Примечание: Если вы выполните вход в систему ajax, не добавляйте autocomplete='off' в форму тега, например

<form id='loginForm' action='signedIn.xxx' autocomplete='off'>

autocomplete='off' приведет к восстановлению имени пользователя/пароля в loginForm, потому что вы не разрешаете ему "автозаполнять" имя пользователя/пароль.

Ответ 2

Использование кнопки для входа в систему:

Если вы используете type="button" с обработчиком onclick для входа в систему с помощью ajax, браузер не будет предлагать для сохранения пароля.

<form id="loginform">
 <input name="username" type="text" />
 <input name="password" type="password" />
 <input name="doLogin"  type="button" value="Login" onclick="login(this.form);" />
</form>

Так как эта форма не имеет кнопки отправки и не имеет поля действия, браузер не будет предлагать сохранить пароль.

Используя кнопку отправить для входа в систему:

Однако, если вы измените кнопку на type="submit" и обработаете отправку, браузер предложит сохранить пароль.

<form id="loginform" action="login.php" onSubmit="return login(this);">
 <input name="username" type="text" />
 <input name="password" type="password" />
 <input name="doLogin"  type="submit" value="Login" />
</form>

Используя этот метод, браузер должен предложить сохранить пароль.

Здесь Javascript используется в обоих методах:

function login(f){
    var username = f.username.value;
    var password = f.password.value;

    /* Make your validation and ajax magic here. */

    return false; //or the form will post your data to login.php
}

Ответ 3

Я сам боролся с этим, и я, наконец, смог отследить проблему и то, что вызывало ее.

Все это связано с тем, что моя форма входа динамически вводилась на страницу (используя backbone.js). Как только я вставляю свою регистрационную форму непосредственно в файл index.html, все работает как шарм.

Я думаю, это связано с тем, что браузер должен знать, что существует существующая форма входа, но поскольку моя динамически вводилась на страницу, она не знала, что когда-либо существовала "настоящая" форма входа.

Ответ 4

Это решение сработало для меня, опубликованного Эриком на codingforums

Причина, по которой это не подсказывает, потому что браузеру требуется физически обновлять страницу для обновления до сервера. Небольшой трюк, который вы можете сделать, это выполнить два действия с формой. Первое действие - onsubmit, если он вызывает ваш код Ajax. Кроме того, форма предназначена для скрытого iframe.

код:

<iframe src="ablankpage.htm" id="temp" name="temp" style="display:none"></iframe>
<form target="temp" onsubmit="yourAjaxCall();">

Посмотрите, появится ли это сообщение.

Эрик

Отправлено http://www.codingforums.com/showthread.php?t=123007

Ответ 5

Существует решение ultimate, чтобы заставить все браузеры (протестированные: chrome 25, safari 5.1, IE10, Firefox 16) запросить сохранение пароля с помощью jQuery и ajax:

JS:

$(document).ready(function() {
    $('form').bind('submit', $('form'), function(event) {
        var form = this;

        event.preventDefault();
        event.stopPropagation();

        if (form.submitted) {
            return;
        }

        form.submitted = true;

        $.ajax({
            url: '/login/api/jsonrpc/',
            data: {
                username: $('input[name=username]').val(),
                password: $('input[name=password]').val()
            },
            success: function(response) {
                form.submitted = false;
                form.submit(); //invoke the save password in browser
            }
        });
    });
});

HTML:

<form id="loginform" action="login.php" autocomplete="on">
    <label for="username">Username</label>
    <input name="username" type="text" value="" autocomplete="on" />
    <label for="password">Password</label>
    <input name="password" type="password" value="" autocomplete="on" />
   <input type="submit" name="doLogin" value="Login" />
</form>

Трюк заключается в том, чтобы остановить форму, чтобы отправить свой путь (event.stopPropagation()), вместо этого отправить свой собственный код ($.ajax()), а в обратном вызове ajax отправить форму снова, чтобы браузер ее поймал и отобразить запрос на сохранение пароля. Вы также можете добавить обработчик ошибок и т.д.

Надеюсь, что это помогло кому-то.

Ответ 6

Я попробовал ответ spetson, но это не сработало для меня в Chrome 18. Что делалось для добавления обработчика нагрузки в iframe, а не для прерывания отправки (jQuery 1.7):

function getSessions() {
    $.getJSON("sessions", function (data, textStatus) {
        // Do stuff
    }).error(function () { $('#loginForm').fadeIn(); });
}
$('form', '#loginForm').submit(function (e) {
    $('#loginForm').fadeOut();
}); 
$('#loginframe').on('load', getSessions);
getSessions();

HTML:

<div id="loginForm">
    <h3>Please log in</h3>
    <form action="/login" method="post" target="loginframe">
            <label>Username :</label>
            <input type="text" name="login" id="username" />
            <label>Password :</label>
            <input type="password" name="password" id="password"/>
            <br/>
            <button type="submit" id="loginB" name="loginB">Login!</button>
    </form>
</div>
<iframe id="loginframe" name="loginframe"></iframe>

getSessions() выполняет вызов AJAX и отображает div loginForm, если он терпит неудачу. (Веб-служба вернет 403, если пользователь не прошел аутентификацию).

Протестировано для работы в FF и IE8.

Ответ 7

Браузер не сможет обнаружить, что ваша форма является формой входа. Согласно некоторому обсуждению в этом предыдущем вопросе, браузер ищет поля формы, которые выглядят как <input type="password">. Вне зависимости от того, введено ли ваше поле формы пароля?

Изменить:. Чтобы ответить на ваши вопросы ниже, я думаю, что Firefox обнаруживает пароли с помощью form.elements[n].type == "password" (итерации по всем элементам формы), а затем обнаруживает поле имени пользователя путем поиска в обратном порядке через элементы формы для текстового поля непосредственно перед полем пароля (подробнее здесь). Из того, что я могу сказать, ваша форма входа должна быть частью <form> или Firefox не обнаружит ее.

Ответ 8

Я потратил много времени на чтение различных ответов на эту тему, и для меня это было на самом деле что-то немного другое (связанное, но другое). В Mobile Safari (устройства iOS), если форма входа в систему HIDDEN при загрузке страницы, приглашение не появится (после того, как вы отобразите форму, затем отправьте ее). Вы можете протестировать следующий код, который отображает форму через 5 секунд после загрузки страницы. Удалите JS и дисплей: нет, и он работает. Мне еще предстоит найти решение этого вопроса, только что опубликованное на случай, если у кого-то другая проблема, и не может понять причину.

JS:

$(function() {
  setTimeout(function() {
    $('form').fadeIn();
  }, 5000);
});

HTML:

<form method="POST" style="display: none;">
  <input name='email' id='email' type='email' placeholder='email' />
  <input name='password' id='password' type='password' placeholder='password' />
  <button type="submit">LOGIN</button>
</form>

Ответ 9

Я нашел довольно элегантное решение (или взломать, независимо от того, что подходит) для пользователей Prototype.JS, являясь одним из последних проверок с использованием Prototype. Простая подстановка соответствующих методов jQuery должна делать трюк.

Сначала убедитесь, что есть тег <form> и кнопка отправки с именем класса, на которое можно ссылаться позже (в этом случае faux-submit), который вложен внутри элемента со стилем, установленным в display:none, как показано ниже:

<form id="login_form" action="somewhere.php" method="post">
    <input type="text" name="login" />
    <input type="password" name="password" />
    <div style="display:none">
        <input class="faux-submit" type="submit" value="Submit" />
    </div>
    <button id="submit_button">Login</button>
</form>

Затем создайте наблюдателя кликов для button, который будет "представлять" форму, как показано:

$('submit_button').observe('click', function(event) {
    $('login_form').submit();
});

Затем создайте прослушиватель для события submit и остановите его. event.stop() остановит все отправку событий в DOM, если только он не заключил в Event.findElement класс скрытой кнопки ввода (как указано выше, faux-submit):

document.observe('submit', function(event) {
    if (event.findElement(".faux-submit")) { 
        event.stop();
    }
});

Это проверено как работающее в Firefox 43 и Chrome 50.

Ответ 10

Возможно, ваш сайт уже находится в списке, где браузеру предлагается не запрашивать сохранение пароля. В firefox, Опции → Безопасность → Запомнить пароль для сайтов [флажок] - исключения [кнопка]

Ответ 11

добавьте немного больше информации в ответ @Michal Roharik.

если ваш вызов ajax вернет возвращаемый url, вы должны использовать jquery, чтобы изменить атрибут действия формы на этот url перед вызовом form.submit

ех.

$(form).attr('action', ReturnPath);
form.submitted = false;
form.submit(); 

Ответ 12

У меня была аналогичная проблема, логин был выполнен с помощью ajax, но браузеры (firefox, chrome, safari и IE 7-10) не предлагали бы сохранять пароль, если форма (#loginForm) отправлена ​​с помощью ajax.

Как РЕШЕНИЕ Я добавил скрытый ввод ввода (#loginFormHiddenSubmit) для формирования, который был отправлен ajax, и после того, как вызов ajax вернет успех, я бы вызвал щелчок на скрытый ввод. Страница любой способ, необходимый для обновления. Щелчок можно запускать с помощью:

jQuery('#loginFormHiddenSubmit').click();

Причина, почему я добавил скрытую кнопку отправки, заключается в следующем:

jQuery('#loginForm').submit();

не предлагал бы сохранять пароль в IE (хотя он работал в других браузерах).

Ответ 13

Следующий код тестируется на

• Chrome 39.0.2171.99m: РАБОТА
• Android Chrome 39.0.2171.93: РАБОТА
• Android-браузер (Android 4.4): НЕ РАБОТАЕТ
• Internet Explorer 5+ (эмулированный): РАБОТА
• Internet Explorer 11.0.9600.17498/Версия для обновления: 11.0.15: РАБОТА
• Firefox 35.0: WORKING

JS-Fiddle:
http://jsfiddle.net/ocozggqu/

Пост-код:

// modified post-code from https://stackoverflow.com/questions/133925/javascript-post-request-like-a-form-submit
function post(path, params, method)
{
    method = method || "post"; // Set method to post by default if not specified.

    // The rest of this code assumes you are not using a library.
    // It can be made less wordy if you use one.

    var form = document.createElement("form");
    form.id = "dynamicform" + Math.random();
    form.setAttribute("method", method);
    form.setAttribute("action", path);
    form.setAttribute("style", "display: none");
    // Internet Explorer needs this
    form.setAttribute("onsubmit", "window.external.AutoCompleteSaveForm(document.getElementById('" + form.id + "'))");

    for (var key in params)
    {
        if (params.hasOwnProperty(key))
        {
            var hiddenField = document.createElement("input");
            // Internet Explorer needs a "password"-field to show the store-password-dialog
            hiddenField.setAttribute("type", key == "password" ? "password" : "text");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);

            form.appendChild(hiddenField);
        }
    }

    var submitButton = document.createElement("input");
    submitButton.setAttribute("type", "submit");

    form.appendChild(submitButton);

    document.body.appendChild(form);

    //form.submit(); does not work on Internet Explorer
    submitButton.click(); // "click" on submit-button needed for Internet Explorer
}

Примечания

• Для динамических форм входа в систему требуется вызов window.external.AutoCompleteSaveForm
• Internet Explorer требуется поле "пароль" , чтобы отобразить диалоговое окно store-password
• Internet Explorer, кажется, требует клика по кнопке отправки (даже если это поддельный клик)

Вот пример ajax login-code:

function login(username, password, remember, redirectUrl)
{
    // "account/login" sets a cookie if successful
    return $.postJSON("account/login", {
        username: username,
        password: password,
        remember: remember,
        returnUrl: redirectUrl
    })
    .done(function ()
    {
        // login succeeded, issue a manual page-redirect to show the store-password-dialog
        post(
            redirectUrl,
            {
                username: username,
                password: password,
                remember: remember,
                returnUrl: redirectUrl
            },
            "post");
    })
    .fail(function ()
    {
        // show error
    });
};

Примечание

• "account/login" устанавливает cookie, если он успешный
• Страница-перенаправление ( "вручную", инициированное js-кодом), по-видимому, требуется. Я также тестировал iframe-пост, но мне это не удалось.

Ответ 14

Не все браузеры (например, IE 6) имеют опции для запоминания учетных данных.

Одна вещь, которую вы можете сделать, - это (как только пользователь успешно войдет в систему) сохранить информацию пользователя через cookie и установить опцию "Запомнить меня на этом компьютере". Таким образом, когда пользователь снова придет (даже если он выйдет из системы), ваше веб-приложение может извлечь файл cookie и получить информацию о пользователе (идентификатор пользователя + идентификатор сеанса) и позволить ему/ей продолжать работать.

Надеюсь, это может быть наводящим на размышления.: -)

Ответ 15

По правде говоря, вы не можете заставить браузер спрашивать. Я уверен, что у браузера есть собственный алгоритм для угадывания, если вы ввели имя пользователя/пароль, например, искали ввод type="password", но вы не можете установить что-либо, чтобы заставить браузер.

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

Ответ 16

Вы можете прикрепить диалог к ​​форме, так что все эти входы находятся в форме. Другое дело - введите текстовое поле пароля сразу после текстового поля имени пользователя.

Ответ 17

Эта работа намного лучше для меня, потому что она на 100% ааксирована и браузер обнаруживает логин.

<form id="loginform" action="javascript:login(this);" >
 <label for="username">Username</label>
 <input name="username" type="text" value="" required="required" />
 <label for="password">Password</label>
 <input name="password" type="password" value="" required="required" />
 <a href="#" onclick="document.getElementById("loginform").submit();"  >Login</a>
</form>

Ответ 18

Использование файла cookie, вероятно, будет лучшим способом для этого.

У вас может быть флажок "Запомнить меня?" и иметь форму, чтобы создать файл cookie для////входа пользователя //info. EDIT: информация о сеансе пользователя

Чтобы создать файл cookie, вам необходимо обработать регистрационную форму с помощью PHP.