Как я могу получить браузер с просьбой сохранить пароль?

Эй, я работаю над веб-приложением, в котором есть диалог входа в систему, который работает следующим образом:

1. Пользователь нажимает «Войти»
2. Форма входа HTML загружается с AJAX и отображается в DIV на странице
3. Пользователь вводит пользователя / передает в поля и нажимает кнопку отправить. Это НЕ <form>- пользователь / пароль передаются через AJAX
4. Если пользователь / пароль в порядке, страница перезагружается, когда пользователь вошел в систему.
5. Если user / pass не верны, страница НЕ перезагружается, но в DIV появляется сообщение об ошибке, и пользователь пытается повторить попытку.

Вот в чем проблема: браузер никогда не предлагает обычную подсказку «Сохранить этот пароль? Да / Никогда / Не сейчас», которую он делает для других сайтов.

Я попытался обертывание <div>в <form>тегах с «автозаполнения =" на» , но это не имеет никакого значения.

Можно ли заставить браузер предлагать хранить пароль без серьезной переделки моего входа в систему?

спасибо Эрик

PS, чтобы добавить к моему вопросу, я определенно работаю с браузерами, которые хранят пароли, и я никогда не нажимал «никогда для этого сайта» ... это техническая проблема с браузером, не обнаружившим, что это форма входа, не ошибка оператора :-)

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

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

1. Нажмите «Сохранить пароль» и
2. Восстановите сохраненное имя пользователя / пароль

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>

Кнопка с type = 'button' сделает форму не подлежащей отправке при нажатии кнопки. Затем, связывание функции с кнопкой для входа в AJAX. Наконец, вызов $('#loginForm').submit();перенаправляет на страницу входа. Если страница входа в систему является текущей страницей, то вы можете заменить «SignIn.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 завершится неудачно, потому что вы не разрешаете ему «автозаполнение» имени пользователя / пароля.

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

Если вы используете для входа 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
}

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

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

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

Это решение работало для меня, размещенного Эриком на codingforums

Причина, по которой он не запрашивает это, заключается в том, что браузеру необходимо физически обновить страницу для возврата на сервер. Небольшая хитрость, которую вы можете сделать, это выполнить два действия с формой. Первое действие заключается в том, чтобы он вызвал ваш 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

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

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 отправьте форму снова, чтобы браузер перехватил ее и отобразил запрос на сохранение пароля. Вы также можете добавить обработчик ошибок и т. Д.

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

Я попробовал ответ спецона, но это не сработало для меня в 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.

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

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

Простой подход 2020

Это автоматически включит автозаполнение и сохранит пароль в браузерах.

• autocomplete="on" (Форма)
• autocomplete="username" (ввод, электронная почта / имя пользователя)
• autocomplete="current-password" (введите пароль)

<form autocomplete="on">
  <input id="user-text-field" type="email" autocomplete="username"/>
  <input id="password-text-field" type="password" autocomplete="current-password"/>
</form>

Узнайте больше в документации Apple: Включение автозаполнения пароля в элементе ввода HTML

Я потратил много времени на чтение различных ответов в этой теме, и для меня это было что-то немного другое (связанное, но другое). В Mobile Safari (устройства iOS), если форма входа скрыта при загрузке страницы, приглашение не появится (после того, как вы покажете форму, отправьте ее). Вы можете проверить с помощью следующего кода, который отображает форму через 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>

Ни один из ответов уже не дает понять, что вы можете использовать API истории HTML5, чтобы запросить сохранение пароля.

Во-первых, вы должны убедиться, что у вас есть хотя бы <form>элемент с паролем и адресом электронной почты или именем пользователя. Большинство браузеров обрабатывают это автоматически, если вы используете правильные типы ввода (пароль, адрес электронной почты или имя пользователя). Но чтобы быть уверенным, установите значения автозаполнения правильно для каждого элемента ввода.

Вы можете найти список значений автозаполнения здесь: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

Те , которые вам нужны: username, emailиcurrent-password

Тогда у вас есть две возможности:

• Если после отправки вы перейдете на другой URL-адрес, большинство браузеров предложит сохранить пароль.
• Если вы не хотите перенаправлять на другой URL или даже перезагрузить страницу (например, одностраничное приложение). Просто предотвратите события по умолчанию (используя e.preventDefault) в вашем обработчике отправки формы. Вы можете использовать API истории HTML5, чтобы вставить что-то в историю, чтобы указать, что вы «переместились» внутри одностраничного приложения. Браузер теперь предложит сохранить пароль и имя пользователя.

history.pushState({}, "Your new page title");

Вы также можете изменить URL страницы, но это не обязательно, чтобы запросить сохранение пароля:

history.pushState({}, "Your new page title", "new-url");

Документация: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

Это дает дополнительное преимущество: вы можете запретить браузеру запрашивать сохранение пароля, если пользователь ввел пароль неверно. Обратите внимание, что в некоторых браузерах браузер всегда запрашивает сохранение учетных данных, даже когда вы вызываете .preventDefault и не используете API истории.

Если вы не хотите уходить и / или изменять историю браузера, вы можете вместо этого использовать replaceState (это также работает).

Следующий код проверен на

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

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

Пост-код:

// modified post-code from /programming/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 требуется поле «пароль», чтобы отобразить диалог сохранения пароля
• Похоже, что Internet Explorer требует нажатия кнопки подтверждения (даже если это поддельный щелчок)

Вот пример ajax-логина:

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, но мне это не удалось.

Я нашел довольно элегантное решение (или взломать, что угодно) для пользователей 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.

Ваш сайт, вероятно, уже находится в списке, в котором браузеру запрещается сохранять пароль. В Firefox Настройки -> Безопасность -> Запомнить пароль для сайтов [флажок] - исключения [кнопка]

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

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

ех.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<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>

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

Вы могли бы иметь флажок «Запомнить меня?» и иметь форму создания куки для хранения // логина пользователя // информация. РЕДАКТИРОВАТЬ: Информация о сеансе пользователя

Чтобы создать cookie, вам нужно обработать форму входа с помощью PHP.