Як я можу змусити браузера запропонувати зберегти пароль?

Привіт, я працюю над веб-програмою, яка має діалогове вікно входу, яке працює так:

1. Користувач натискає "вхід"
2. Форма для входу в HTML завантажується з AJAX та відображається у DIV на сторінці
3. Користувач вводить користувача / проходить у поля та надсилає кліки. Це НЕ <form>- користувач / пропуск подаються через AJAX
4. Якщо з користувачем / проходом нормально, сторінки перезавантажуються із користувачем, який увійшов.
5. Якщо користувач / пропуск поганий, сторінка НЕ ​​перезавантажується, але в 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 = "ім'я користувача" та поле пароля для введення з атрибутом = = "пароль" . Таким чином, ми не можемо заблокувати перенаправлення через подання форми, але ми можемо зробити перенаправлення після того, як ми виконали вхід у 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();переспрямувань на сторінку, на яку ви ввійшли. Якщо сторінка, на якій зареєстровано, є поточною сторінкою, ви можете замінити "підписаний.xxx" на поточну сторінку, щоб зробити "оновлення".

Тепер ви побачите, що метод для Chrome 27 також працює у Firefox 21. Тому краще використовувати його.

2. Відновіть збережене ім’я користувача / пароль:

Якщо у вас вже є жорсткий код для входу в систему як loginForm, то ви не знайдете жодної проблеми відновити збережений пароль у loginForm.
Однак збережені ім'я користувача / пароль не будуть прив’язані до loginForm, якщо ви використовуєте js / jquery для того, щоб зробити реєстраційну форму динамічно, оскільки збережені ім’я користувача / пароль прив'язуються лише тоді, коли документ завантажується.
Тому вам потрібно було жорстко кодувати loginForm як HTML і використовувати js / jquery для переміщення / показу / приховування форми входу динамічно.

Зауваження: Якщо ви робите вхід у ajax, не додайте його autocomplete='off'у форму тегів, як

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

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

За допомогою кнопки для входу:

Якщо ви використовуєте a 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, все спрацювало як шарм.

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

Це рішення працювало для мене, розміщене Еріком на кодируючих форумах

Причина, чому це не підказує, полягає в тому, що веб-переглядачу потрібна сторінка для фізкультурного оновлення для повернення на сервер. Маленький трюк, який ви можете зробити, - це виконати дві дії з формою. Перша дія - підписка, вона викликає ваш код Ajax. Також має форму націлювання на прихований кадр.

Код:

<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 запиту:

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 і показує поділ 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

Я провів багато часу, читаючи різні відповіді на цю тему, і для мене це було насправді щось трохи інше (пов'язане, але різне). На мобільному 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 історії.

Якщо ви не хочете переходити та / або змінювати історію веб-переглядача, замість цього ви можете скористатися substituState (це також працює).

Наступний код тестується на

• Хром 39.0.2171.99 м: РОБОТА
• 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: РОБОТА

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
    });
};

Зауваження

• "акаунт / логін" встановлює файл cookie у разі успіху
• Здається, потрібна перенаправлення сторінки ("вручну", ініційована js-кодом). Я також протестував iframe-post, але не мав успіху в цьому.

Я знайшов досить елегантне рішення (або зламати, що б підходило) для користувачів 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, хром, сафарі та IE 7-10) не запропонували зберегти пароль, якщо форма (#loginForm) подається з ajax.

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

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

Причина, чому я додав кнопку прихованої подачі, полягає в тому, що:

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

не пропонував би зберігати пароль в IE (хоча він працював і в інших браузерах).

Не кожен браузер (наприклад, IE 6) має можливість запам'ятати облікові дані.

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

Сподіваюсь, це може бути навіюючим. :-)

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

Ви можете, як пропонують інші, додати інформацію про користувача у файл cookie. Якщо ви це зробите, то краще принаймні зашифруйте його і не зберігайте їх пароль. Можливо, зберігайте їхнє ім’я щонайбільше.

Ви можете долучити до форми діалогове вікно, щоб усі ці входи були у формі. Інша справа - ввести текстове поле пароля відразу після текстового поля користувача.

Це працює набагато краще для мене, тому що він на 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>

Використання файлу cookie, мабуть, був би найкращим способом зробити це.

Ви можете мати прапорець "Пам'ятаєте мене?" і мають форму створити файл cookie для зберігання // входу користувача // info. EDIT: Інформація про сеанс користувача

Щоб створити файл cookie, вам потрібно буде обробити форму входу за допомогою PHP.