Làm cách nào để có được trình duyệt nhắc nhở lưu mật khẩu?

Xin chào, tôi đang làm việc trên một ứng dụng web có hộp thoại đăng nhập hoạt động như thế này:

1. Người dùng nhấp vào "đăng nhập"
2. Biểu mẫu đăng nhập HTML được tải bằng AJAX và được hiển thị trong DIV trên trang
3. Người dùng nhập người dùng / vượt qua trong các trường và nhấp vào gửi. Đó KHÔNG phải là <form>- người dùng / thẻ được gửi qua AJAX
4. Nếu người dùng / vượt qua được, trang tải lại với người dùng đã đăng nhập.
5. Nếu người dùng / pass xấu, trang KHÔNG tải lại nhưng thông báo lỗi xuất hiện trong DIV và người dùng sẽ thử lại.

Đây là vấn đề: trình duyệt không bao giờ cung cấp lời nhắc "Lưu mật khẩu này? Có / Không bao giờ / Không phải bây giờ" thông thường mà nó làm cho các trang web khác.

Tôi đã thử bọc các thẻ <div>trong <form>"autocomplete = 'on'" nhưng điều đó không có gì khác biệt.

Có thể yêu cầu trình duyệt cung cấp để lưu trữ mật khẩu mà không cần xử lý lại luồng đăng nhập của tôi không?

cảm ơn Eric

Để thêm vào câu hỏi của tôi, tôi chắc chắn đang làm việc với những người lưu trữ mật khẩu và tôi chưa bao giờ nhấp vào "không bao giờ cho trang web này" ... đây là sự cố kỹ thuật với trình duyệt không phát hiện ra đó là hình thức đăng nhập, không phải lỗi vận hành :-)

Tôi tìm thấy một giải pháp hoàn chỉnh cho câu hỏi này. (Tôi đã thử nghiệm điều này trong Chrome 27 và Firefox 21).

Có hai điều cần biết:

1. Kích hoạt 'Lưu mật khẩu' và
2. Khôi phục tên người dùng / mật khẩu đã lưu

1. Kích hoạt 'Lưu mật khẩu':

Đối với Firefox 21 , 'Lưu mật khẩu' được kích hoạt khi phát hiện thấy có một biểu mẫu chứa trường văn bản đầu vào và trường mật khẩu đầu vào được gửi. Vì vậy, chúng ta chỉ cần sử dụng

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

someFunctionForLogin()không đăng nhập ajax và tải lại / chuyển hướng đến trang đã đăng nhập trong khi event.preventDefault()chặn chuyển hướng ban đầu do gửi biểu mẫu.

Nếu bạn chỉ giao dịch với Firefox, giải pháp trên là đủ nhưng nó không hoạt động trong Chrome 27. Sau đó, bạn sẽ hỏi cách kích hoạt 'Lưu mật khẩu' trong Chrome 27.

Đối với Chrome 27 , 'Lưu mật khẩu' được kích hoạt sau khi được chuyển hướng đến trang bằng cách gửi biểu mẫu có chứa trường văn bản đầu vào với tên thuộc tính = 'tên người dùng' và trường mật khẩu nhập với tên thuộc tính = 'mật khẩu' . Do đó, chúng tôi không thể chặn chuyển hướng do gửi biểu mẫu nhưng chúng tôi có thể thực hiện chuyển hướng sau khi chúng tôi thực hiện đăng nhập ajax. (Nếu bạn muốn đăng nhập ajax không tải lại trang hoặc không chuyển hướng đến một trang, thật không may, giải pháp của tôi không hoạt động.) Sau đó, chúng tôi có thể sử dụng

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

Nút có kiểu = 'nút' sẽ khiến biểu mẫu không được gửi khi nhấp vào nút. Sau đó, liên kết một chức năng với nút để đăng nhập ajax. Cuối cùng, gọi $('#loginForm').submit();chuyển hướng đến trang đăng nhập. Nếu trang đăng nhập là trang hiện tại, thì bạn có thể thay thế 'SignIn.xxx' bằng trang hiện tại để thực hiện 'làm mới'.

Bây giờ, bạn sẽ thấy rằng phương pháp cho Chrome 27 cũng hoạt động trong Firefox 21. Vì vậy, tốt hơn là sử dụng nó.

2. Khôi phục tên người dùng / mật khẩu đã lưu:

Nếu bạn đã có loginForm được mã hóa cứng dưới dạng HTML, thì bạn sẽ không gặp vấn đề gì khi khôi phục mật khẩu đã lưu trong loginForm.
Tuy nhiên, tên người dùng / mật khẩu đã lưu sẽ không được liên kết với loginForm nếu bạn sử dụng js / jquery để tạo loginForm một cách linh hoạt, vì tên người dùng / mật khẩu đã lưu chỉ được liên kết khi tải tài liệu.
Do đó, bạn cần mã hóa loginForm dưới dạng HTML và sử dụng js / jquery để di chuyển / hiển thị / ẩn động cơ đăng nhập.

Lưu ý: Nếu bạn thực hiện đăng nhập ajax, đừng thêm autocomplete='off'vào dạng thẻ như

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

autocomplete='off' sẽ khiến việc khôi phục tên người dùng / mật khẩu vào loginForm không thành công vì bạn không cho phép nó 'tự động hoàn thành' tên người dùng / mật khẩu.

Sử dụng nút để đăng nhập:

Nếu bạn sử dụng type="button"với một onclickhandler để đăng nhập sử dụng ajax, thì trình duyệt sẽ không cung cấp để lưu các mật khẩu.

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

Vì biểu mẫu này không có nút gửi và không có trường hành động, trình duyệt sẽ không cung cấp để lưu mật khẩu.

Sử dụng nút gửi để đăng nhập:

Tuy nhiên, nếu bạn thay đổi nút thành type="submit"và xử lý việc gửi, thì trình duyệt sẽ đề nghị lưu mật khẩu.

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

Sử dụng phương pháp này, trình duyệt sẽ cung cấp để lưu mật khẩu.

Đây là Javascript được sử dụng trong cả hai phương pháp:

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
}

Tôi đã phải vật lộn với điều này và cuối cùng tôi đã có thể theo dõi vấn đề và điều gì đã khiến nó thất bại.

Tất cả xuất phát từ thực tế là hình thức đăng nhập của tôi đang được tự động đưa vào trang (sử dụng backbone.js). Ngay sau khi tôi nhúng biểu mẫu đăng nhập của mình trực tiếp vào tệp index.html, mọi thứ đều hoạt động như một bùa mê.

Tôi nghĩ điều này là do trình duyệt phải biết rằng đã có một hình thức đăng nhập hiện có, nhưng vì tôi đã được tiêm động vào trang, nên nó không biết rằng hình thức đăng nhập "thực" đã từng tồn tại.

Giải pháp này hiệu quả với tôi được đăng bởi Eric trên bảng mã

Lý do tại sao nó không nhắc nó là vì trình duyệt cần trang để thực hiện lại để làm mới máy chủ. Một mẹo nhỏ bạn có thể làm là thực hiện hai hành động với biểu mẫu. Hành động đầu tiên là onsubmit để nó gọi mã Ajax của bạn. Cũng có mục tiêu mẫu một iframe ẩn.

Mã số:

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

Xem nếu điều đó gây ra dấu nhắc xuất hiện.

Eric

Đăng trên http://www.codingforums.com/showthread.php?t=123007

Có một giải pháp tối ưu để buộc tất cả các trình duyệt (đã thử nghiệm: chrome 25, safari 5.1, IE10, Firefox 16) yêu cầu lưu mật khẩu bằng yêu cầu jQuery và 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>

Thủ thuật là dừng biểu mẫu để gửi theo cách riêng của nó (event.stopPropagation ()), thay vào đó hãy gửi mã của riêng bạn ($ .ajax ()) và trong cuộc gọi lại thành công của ajax, hãy gửi lại biểu mẫu để trình duyệt bắt và hiển thị yêu cầu lưu mật khẩu. Bạn cũng có thể thêm một số xử lý lỗi, vv

Hy vọng nó sẽ giúp được ai đó.

Tôi đã thử câu trả lời của spetson nhưng điều đó không hiệu quả với tôi trên Chrome 18. Điều gì đã làm là thêm trình xử lý tải vào iframe và không làm gián đoạn việc gửi (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>

getSimes () thực hiện cuộc gọi AJAX và hiển thị div loginForm nếu không thành công. (Dịch vụ web sẽ trả về 403 nếu người dùng không được xác thực).

Đã thử nghiệm để làm việc trong FF và IE8.

Trình duyệt có thể không phát hiện ra rằng biểu mẫu của bạn là biểu mẫu đăng nhập. Theo một số cuộc thảo luận trong câu hỏi trước đây , một trình duyệt tìm kiếm các trường biểu mẫu trông như thế nào <input type="password">. Là trường mẫu mật khẩu của bạn được thực hiện tương tự như vậy?

Chỉnh sửa: Để trả lời các câu hỏi của bạn bên dưới, tôi nghĩ Firefox phát hiện mật khẩu bằng cách form.elements[n].type == "password"(lặp qua tất cả các thành phần của biểu mẫu) và sau đó phát hiện trường tên người dùng bằng cách tìm ngược thông qua các thành phần biểu mẫu cho trường văn bản ngay trước trường mật khẩu (thông tin thêm ở đây ). Từ những gì tôi có thể nói, biểu mẫu đăng nhập của bạn cần phải là một phần của <form>hoặc Firefox sẽ không phát hiện ra nó.

Aproach đơn giản 2020

Điều này sẽ tự động kích hoạt tự động hoàn thành và lưu mật khẩu trong trình duyệt.

• autocomplete="on" (hình thức)
• autocomplete="username" (đầu vào, email / tên người dùng)
• autocomplete="current-password" (nhập mật mã)

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

Kiểm tra thêm tại tài liệu của Apple: Kích hoạt Tự động điền mật khẩu trên Phần tử nhập HTML

Tôi đã dành rất nhiều thời gian để đọc các câu trả lời khác nhau về chủ đề này và đối với tôi, nó thực sự là một cái gì đó hơi khác (liên quan, nhưng khác nhau). Trên Mobile Safari (thiết bị iOS), nếu biểu mẫu đăng nhập là HIDDEN khi tải trang, lời nhắc sẽ không xuất hiện (sau khi bạn hiển thị biểu mẫu rồi gửi nó). Bạn có thể kiểm tra với đoạn mã sau, hiển thị biểu mẫu 5 giây sau khi tải trang. Xóa JS và hiển thị: không có và nó hoạt động. Tôi vẫn chưa tìm ra giải pháp cho vấn đề này, chỉ đăng trong trường hợp bất kỳ ai khác có cùng vấn đề và không thể tìm ra nguyên nhân.

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>

Chưa có câu trả lời nào làm rõ, bạn có thể sử dụng API Lịch sử HTML5 để nhắc lưu mật khẩu.

Trước tiên, bạn cần chắc chắn rằng bạn có ít nhất một <form> yếu tố có mật khẩu và email hoặc trường tên người dùng. Hầu hết các trình duyệt xử lý việc này tự động miễn là bạn sử dụng đúng loại đầu vào (mật khẩu, email hoặc tên người dùng). Nhưng để chắc chắn, hãy đặt chính xác các giá trị tự động hoàn thành cho từng thành phần đầu vào.

Bạn có thể tìm thấy danh sách các giá trị tự động hoàn thành tại đây: https://developer.mozilla.org/en-US/docs/Web/HTML/Attribut/autocomplete

Những cái bạn cần là: username, emailvàcurrent-password

Sau đó, bạn có hai khả năng:

• Nếu bạn điều hướng đến một URL khác sau khi gửi, hầu hết các trình duyệt sẽ nhắc lưu mật khẩu.
• Nếu bạn không muốn chuyển hướng đến một URL khác hoặc thậm chí tải lại trang (ví dụ: một ứng dụng trang duy nhất). Chỉ cần ngăn mặc định sự kiện (sử dụng e.preventDefault) trong trình xử lý biểu mẫu của bạn. Bạn có thể sử dụng API lịch sử HTML5 để đẩy thứ gì đó vào lịch sử để cho biết bạn 'điều hướng' trong ứng dụng trang duy nhất của mình. Trình duyệt sẽ nhắc lưu mật khẩu và tên người dùng.

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

Bạn cũng có thể thay đổi URL của trang, nhưng không bắt buộc phải lưu mật khẩu:

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

Tài liệu: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

Điều này có lợi ích bổ sung mà bạn có thể ngăn trình duyệt yêu cầu lưu mật khẩu nếu người dùng nhập mật khẩu không chính xác. Lưu ý rằng trong một số trình duyệt, trình duyệt sẽ luôn yêu cầu lưu thông tin đăng nhập, ngay cả khi bạn gọi .preventDefault và không sử dụng API lịch sử.

Nếu bạn không muốn điều hướng đi và / hoặc sửa đổi lịch sử trình duyệt, bạn có thể sử dụng thay thếState (điều này cũng hoạt động).

Các mã sau đây được thử nghiệm trên

• Chrome 39.0.2171.99m: LÀM VIỆC
• Android Chrome 39.0.2171.93: LÀM VIỆC
• Trình duyệt chứng khoán Android (Android 4.4): KHÔNG LÀM VIỆC
• Internet Explorer 5+ (mô phỏng): LÀM VIỆC
• Internet Explorer 11.0.9600.17498 / Cập nhật-Phiên bản: 11.0.15: LÀM VIỆC
• Firefox 35.0: LÀM VIỆC

Câu đố về JS:
http://jsfiddle.net/ocozggqu/

Mã bưu điện:

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

Nhận xét

• Để đăng nhập-hình thức động một cuộc gọi đến window.external.AutoCompleteSaveFormlà cần thiết
• Internet Explorer cần một trường "mật khẩu" để hiển thị hộp thoại lưu mật khẩu
• Internet Explorer dường như yêu cầu nhấp vào nút gửi (ngay cả khi đó là nhấp chuột giả)

Đây là một mã đăng nhập ajax mẫu:

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

Nhận xét

• "tài khoản / đăng nhập" đặt cookie nếu thành công
• Chuyển hướng trang ("thủ công" được khởi tạo bởi mã js) dường như là bắt buộc. Tôi cũng đã thử nghiệm iframe-post, nhưng tôi đã không thành công với điều đó.

Tôi đã tìm thấy một giải pháp khá thanh lịch (hoặc hack, bất cứ điều gì phù hợp) cho người dùng Prototype.JS, là một trong những tổ chức cuối cùng sử dụng Prototype. Một sự thay thế đơn giản của các phương thức jQuery tương ứng sẽ thực hiện thủ thuật.

Trước tiên, hãy đảm bảo có <form>thẻ và nút gửi với tên lớp có thể được tham chiếu sau (trong trường hợp này faux-submit) được lồng bên trong một phần tử có kiểu được đặt display:none, như minh họa bên dưới:

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

Sau đó, tạo một trình quan sát nhấp chuột cho button, sẽ "gửi" biểu mẫu như minh họa:

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

Sau đó tạo một người nghe cho submitsự kiện, và dừng nó. event.stop()sẽ dừng tất cả các sự kiện gửi trong DOM trừ khi nó được bao bọc bởi Event.findElementlớp của nút đầu vào ẩn (như trên, faux-submit):

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

Điều này được thử nghiệm khi hoạt động trong Firefox 43 và Chrome 50.

Trang web của bạn có thể đã nằm trong danh sách mà trình duyệt được thông báo không nhắc nhập mật khẩu. Trong firefox, Tùy chọn -> Bảo mật -> Ghi nhớ mật khẩu cho các trang web [hộp kiểm] - ngoại lệ [nút]

thêm một chút thông tin vào câu trả lời của @Michal Roharik.

nếu cuộc gọi ajax của bạn sẽ trả về một url trả về, bạn nên sử dụng jquery để thay đổi thuộc tính hành động biểu mẫu thành url đó trước khi gọi form.submit

Ví dụ.

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

Tôi gặp vấn đề tương tự, đăng nhập đã được thực hiện với ajax, nhưng các trình duyệt (firefox, chrome, safari và IE 7-10) sẽ không cung cấp lưu mật khẩu nếu mẫu (#loginForm) được gửi bằng ajax.

Với tư cách là GIẢI PHÁP, tôi đã thêm đầu vào gửi ẩn (#loginFormHiddenSubmit) vào mẫu đã được gửi bởi ajax và sau khi cuộc gọi ajax sẽ trả về thành công, tôi sẽ kích hoạt nhấp chuột để gửi đầu vào ẩn. Các trang bất kỳ cách nào cần thiết để làm mới. Nhấp chuột có thể được kích hoạt với:

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

Lý do tại sao tôi đã thêm nút gửi ẩn là vì:

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

sẽ không cung cấp để lưu mật khẩu trong IE (mặc dù nó đã hoạt động trong các trình duyệt khác).

Không phải mọi trình duyệt (ví dụ IE 6) đều có các tùy chọn để ghi nhớ thông tin đăng nhập.

Một điều bạn có thể làm là (một khi người dùng đăng nhập thành công) lưu trữ thông tin người dùng qua cookie và có tùy chọn "Ghi nhớ tôi trên máy này". Bằng cách đó, khi người dùng quay lại (ngay cả khi anh ta đã đăng xuất), ứng dụng web của bạn có thể truy xuất cookie và lấy thông tin người dùng (ID người dùng + ID phiên) và cho phép anh ta / cô ta tiếp tục làm việc.

Hy vọng điều này có thể được gợi ý. :-)

Sự thật là, bạn không thể buộc trình duyệt hỏi. Tôi chắc chắn trình duyệt có thuật toán riêng để đoán xem bạn đã nhập tên người dùng / mật khẩu, chẳng hạn như tìm kiếm đầu vào type="password"nhưng bạn không thể đặt bất cứ điều gì để buộc trình duyệt.

Bạn có thể, như những người khác đề xuất, thêm thông tin người dùng vào cookie. Nếu bạn làm điều này, ít nhất bạn nên mã hóa nó và không lưu trữ mật khẩu của họ. Có lẽ lưu trữ tên người dùng của họ nhiều nhất.

Bạn có thể đính kèm hộp thoại vào biểu mẫu, vì vậy tất cả các đầu vào đó đều ở dạng. Điều khác là làm cho trường văn bản mật khẩu ngay sau trường văn bản tên người dùng.

Điều này hoạt động tốt hơn đối với tôi, bởi vì nó được xử lý 100% và trình duyệt phát hiện thông tin đăng nhập.

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

Sử dụng cookie có lẽ là cách tốt nhất để làm điều này.

Bạn có thể có một hộp kiểm cho 'Ghi nhớ tôi?' và có biểu mẫu tạo cookie để lưu trữ // thông tin đăng nhập // của người dùng. EDIT: Thông tin phiên người dùng

Để tạo cookie, bạn sẽ cần xử lý biểu mẫu đăng nhập bằng PHP.