Làm thế nào để trình duyệt biết khi nào cần nhắc người dùng lưu mật khẩu?

Điều này liên quan đến câu hỏi tôi đã hỏi ở đây: Làm cách nào để trình duyệt nhắc lưu mật khẩu?

Đây là sự cố: Tôi KHÔNG THỂ yêu cầu trình duyệt nhắc tôi lưu mật khẩu cho trang web mà tôi đang phát triển. (Tôi đang nói về thanh đôi khi xuất hiện khi bạn gửi biểu mẫu trên Firefox, có nội dung "Nhớ mật khẩu cho trang web của bạn? Có / Không phải bây giờ / Không bao giờ")

Điều này thật khó chịu vì tính năng này của Firefox (và hầu hết các trình duyệt hiện đại khác, mà tôi hy vọng sẽ hoạt động theo cách tương tự) dường như là một bí ẩn. Nó giống như một trò ảo thuật mà trình duyệt thực hiện, nơi nó nhìn vào mã của bạn hoặc những gì bạn gửi, hoặc thứ gì đó và nếu nó "trông giống" như một biểu mẫu đăng nhập với trường tên người dùng (hoặc địa chỉ email) và trường mật khẩu, nó sẽ cung cấp để tiết kiệm.

Ngoại trừ trường hợp này, khi nó không cung cấp cho người dùng của tôi tùy chọn đó sau khi họ sử dụng biểu mẫu đăng nhập của tôi và điều đó khiến tôi phát điên. :-)

(Tôi đã kiểm tra cài đặt Firefox của mình - Tôi KHÔNG nói với trình duyệt "không bao giờ" cho trang web này. Nó sẽ được nhắc nhở.)

Câu hỏi của tôi

Các kinh nghiệm mà Firefox sử dụng để biết khi nào nó nên nhắc người dùng lưu? Điều này không quá khó để trả lời, vì nó nằm ngay trong nguồn Mozilla (tôi không biết tìm ở đâu hoặc nếu không thì tôi sẽ tự tìm hiểu). Tôi cũng không gặp may khi tìm thấy một bài đăng trên blog hoặc một số ghi chú tương tự khác của nhà phát triển từ các nhà phát triển Mozilla về điều này.

(Tôi sẽ ổn khi câu hỏi này được trả lời cho Safari hoặc IE; tôi sẽ tưởng tượng rằng tất cả người dùng trình duyệt có quy tắc rất giống nhau, vì vậy nếu tôi có thể làm cho nó hoạt động ở một trong số chúng, thì nó sẽ hoạt động ở các trình duyệt khác.)

(* Lưu ý rằng nếu câu trả lời của bạn cho tôi có liên quan đến cookie, mã hóa hoặc bất kỳ điều gì khác liên quan đến cách tôi lưu trữ mật khẩu trong cơ sở dữ liệu cục bộ của mình, rất có thể bạn đã hiểu sai câu hỏi của tôi. :-)

Dựa trên những gì tôi đã đọc, 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 biểu mẫu) và sau đó phát hiện trường tên người dùng bằng cách tìm kiế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 tại đây ). Bạn có thể thử một cái gì đó tương tự trong Javascript và xem liệu bạn có thể phát hiện ra trường mật khẩu của mình hay không.

Từ những gì tôi có thể biết, biểu mẫu đăng nhập của bạn cần phải là một phần của một <form>hoặc Firefox sẽ không phát hiện ra nó. Đặt id="password"trên trường mật khẩu của bạn có lẽ cũng không ảnh hưởng gì.

Nếu điều này vẫn khiến bạn gặp nhiều vấn đề, tôi khuyên bạn nên hỏi một trong các danh sách gửi thư dành cho nhà phát triển của dự án Mozilla (bạn thậm chí có thể nhận được phản hồi từ nhà phát triển đã thiết kế tính năng này).

Tôi đã gặp vấn đề tương tự và đã tìm ra giải pháp:

1. để làm cho trình duyệt yêu cầu lưu trữ mật khẩu, tên người dùng và các hộp mật khẩu phải ở trong một biểu mẫu và biểu mẫu đó phải thực sự được gửi. Nút gửi có thể trả về false từ trình xử lý onclick (vì vậy việc gửi không thực sự xảy ra).

2. để làm cho trình duyệt khôi phục lại mật khẩu đã lưu trước đó, các hộp nhập phải tồn tại ở dạng HTML chính và không được tạo động thông qua javascript. Biểu mẫu có thể được tạo với display: none.

Cần lưu ý rằng mật khẩu được điền ngay khi trang được tải và hiện diện ở đó trong suốt phiên, vì vậy nó có thể được đọc bằng javascript được chèn: nó làm cho các cuộc tấn công như vậy trở nên tồi tệ hơn nhiều. Để tránh điều này, chuyển tiếp đến một trang riêng chỉ để đăng nhập là hợp lý, và nó giải quyết tất cả các vấn đề mà bạn bắt đầu đọc chủ đề này :). Như một giải pháp từng phần, tôi xóa các trường khi gửi biểu mẫu - nếu người dùng đăng xuất và muốn đăng nhập lại, mật khẩu sẽ không được trình duyệt điền, nhưng điều đó là nhỏ đối với tôi.

Viliam

Bạn nên xem trang Gỡ lỗi trình quản lý mật khẩu Mozilla và tài liệu nsILoginManager dành cho người viết tiện ích mở rộng (chỉ để biết các chi tiết kỹ thuật thực tế về cách Firefox xử lý việc quản lý mật khẩu). Bạn có thể tìm hiểu câu trả lời ở đó và các trang khác được liên kết ở đó để tìm hiểu nhiều hơn những gì bạn có thể muốn biết cách trình quản lý mật khẩu tương tác với các trang web và tiện ích mở rộng.

(Cụ thể như đã chỉ ra trong tài liệu gỡ lỗi của trình quản lý mật khẩu, hãy đảm bảo rằng bạn không đặt tắt tính năng tự động hoàn thành trong html của mình, vì điều đó sẽ ngăn chặn lời nhắc lưu tên người dùng và mật khẩu)

Điều này dường như hoạt động đối với Firefox, Chrome và Safari trên Mac. Không được thử nghiệm trên Windows.

<form id="bridgeForm" action="#" target="loginframe" autocomplete="on">
    <input type="text" name="username" id="username" />
    <input type="password" name="password" id="password"/>
</form>

<iframe id="loginframe" name="loginframe" src="anyblankpage.html"></iframe>

Điều này cần được thêm vào trang. Nó không thể được thêm động. Biểu mẫu và iframe có thể được đặt để hiển thị: không có. Nếu bạn không đặt src của iframe, lời nhắc sẽ không hiển thị cho đến khi bạn gửi biểu mẫu ít nhất một lần.

Sau đó gọi biểu mẫu gửi ():

bridgeForm.submit();

Hành động có thể là tùy chọn và tự động hoàn thành có thể là tùy chọn. Chưa thử nghiệm.

Lưu ý : Trên một số trình duyệt, biểu mẫu phải chạy trên máy chủ (không phải máy chủ cục bộ và không phải hệ thống tệp) trước khi trình duyệt phản hồi.

Vì vậy, điều này:

http://www.mysite.com/myPage.html

không phải cái này:

http://126.0.0.1/myPage.html
http://localhost/myPage.html
file://directory/myPage.html

Hoạt động với tôi với angle, chrome, firefox: (Tôi đã tìm kiếm và thử nghiệm trong nhiều giờ - đối với chrome, tham số form action ( #) là câu trả lời. @ 1.21 gigawatts , cảm ơn bạn !!! Câu trả lời của bạn là vô giá.)

hình thức

firefox 30.0 - không cần iframe ẩn và nút gửi (như được hiển thị bên dưới), nhưng cần chỉ thị "đăng nhập-biểu mẫu-tự động điền-sửa lỗi" để nhận dạng các thư tín dụng tự động điền, như sau:

<form name="loginForm" login-form-autofill-fix action="#" target="emptyPageForLogin" method="post" ng-submit="login({loginName:grpEmail,password:grpPassword})">
<input type="text" name=username" id="username" ng-model="grpEmail"/>
<input type="password" name="password" id="password" ng-model="grpPassword"/>
<button type="submit">Login</button>
</form>

iframe ẩn

chrome 35.0 - không cần chỉ thị trên, nhưng cần iframe ẩn và nút gửi trên biểu mẫu thực. Iframe ẩn trông giống như

<iframe src="emptyPageForLogin.html" id="emptyPageForLogin" name="emptyPageForLogin" style="display:none"></iframe>

chỉ thị góc (sử dụng jqLite)

Điều này hoạt động với góc 1.2.18

module.directive('loginFormAutofillFix', function() { 
            return function(scope, elem, attrs) {
        if(!attrs.ngSubmit) {
            return;
        }
        setTimeout(function() {
            elem.unbind("submit").bind("submit", function(e) {
                //DO NOT PREVENT!  e.preventDefault(); 
                elem.find("input").triggerHandler("input");
                scope.$apply(attrs.ngSubmit);
            });
        }, 0);
});

sự sửa đổi

• sau một số thử nghiệm, tôi nhận ra rằng chrome cần một chút thời gian chờ theo phương pháp đăng nhập theo góc (200ms) - có vẻ như chuyển hướng đôi khi quá nhanh đối với trình quản lý mật khẩu.
• xóa bộ nhớ cache rõ ràng hơn ... với mọi thay đổi

Vâng, trên trang web của chúng tôi , một trường biểu mẫu có tên "tên người dùng" nhập "văn bản" ngay sau đó là một trường có tên "mật khẩu" và nhập "mật khẩu" dường như có tác dụng.

Nếu bạn đang sử dụng đăng nhập AJAX, hãy xem mã nguồn đó: https://gist.github.com/968927

Nó bao gồm việc gửi biểu mẫu đăng nhập tới iframe ẩn để IE và Chrome có thể phát hiện thông tin đăng nhập thực tế mà không cần phải tải lại trang.

Phương pháp heuristics ở đây khá đơn giản: phát hiện các trường có tên nhất định theo thứ tự nhất định. Những cái nào, tôi không thể nói, nhưng điều này hoạt động tốt với tôi trong Chrome và IE:

Username field: name "login", type "text";
Password field: name "password", type "password"
Submit button: element "input", type "submit". 
Element "button" type "submit" did not work.

Tôi cũng nhận thấy rằng Chrome sẽ không đề nghị ghi nhớ mật khẩu nếu biểu mẫu đăng nhập vẫn hiển thị sau yêu cầu đăng nhập, ngay cả khi biểu mẫu đó bị ẩn trên trang.

Tôi đoán nó nghĩ rằng hành động đăng nhập không thành công và do đó từ chối lưu trữ thông tin đăng nhập không hợp lệ.

Đã xem trên Chrome 34.0.

Tôi khuyên bạn nên xem mã nguồn Firefox . Nó thực sự là mã khá đơn giản.

Các phương pháp bạn muốn xem là _onFormSubmit, _getFormFieldsvà _getPasswordFields.

Bạn thậm chí có thể thấy vấn đề bạn đang gặp phải là một lỗi chưa được phát hiện trong Firefox;) https://bugzilla.mozilla.org/show_bug.cgi?id=1211780

Ngoài rất nhiều điều đã được nói, tôi nhận ra rằng các trường đầu vào không được "vô hiệu hóa". Chúng tôi đã đăng nhập nhiều bước, đầu tiên yêu cầu tên người dùng và sau đó, trên màn hình tiếp theo, nhập mật khẩu. Trên màn hình thứ hai đó, chúng tôi đã lặp lại email nhưng đã vô hiệu hóa nó và điều đó đã ngăn Chrome et. al. từ việc công nhận là trường hợp lệ cho tên người dùng.

Vì chúng tôi thực sự muốn giữ lại trường đầu vào bị vô hiệu hóa đó nên chúng tôi đã kết thúc với cách giải quyết khó hiểu này:

<input type="text" name="display-username" id="display-username" value="ENTERED_USERNAME" placeholder="Username" disabled="disabled">
<input type="text" name="username" id="username" value="ENTERED_USERNAME" placeholder="Username" style="display: none;">
<input type="password" name="password" id="password" value="" autofocus="autofocus" autocomplete="on" placeholder="Password" required="required">

Tôi sẽ không đi quá xa để giới thiệu điều này nhưng có thể nó chỉ ai đó đến một cái gì đó trong mã của riêng họ:

1. Phần tử đầu tiên hiển thị tên người dùng trong trường nhập bị tắt. Đã tắt không gửi như một phần của biểu mẫu và bị vô hiệu hóa không được trình duyệt nhận dạng.
2. Phần tử thứ hai là trường nhập thích hợp, với type = "text" và name / id = "username". Điều này đang được trình duyệt công nhận. Để ngăn người dùng chỉnh sửa nó, chúng tôi ẩn nó bằng CSS (display: none).

Ví dụ, nếu bạn có hai loại = văn bản trong biểu mẫu của mình trước loại nhập = mật khẩu, Trình duyệt sẽ phát hiện loại đầu vào = văn bản gần nhất cho tên người dùng của bạn.

Đây không phải là vấn đề mà đầu vào khác có là = tên người dùng và tên = tên người dùng

để giải quyết vấn đề này, bạn phải nhập tên người dùng mà bạn muốn lưu chính xác trước mật khẩu đầu vào của mình

Chúc may mắn :-)

Từ khóa chính ở đây,

   <input type="password">