Phát hiện tự động điền của mẫu đăng nhập

Question

Tôi đang cố gắng tạo trang web có trang đăng nhập. Khi người dùng đăng nhập lần đầu tiên tên người dùng và mật khẩu sẽ được trình duyệt lưu, nếu anh ta kiểm tra "Duy trì trạng thái đăng nhập". Khi anh ấy đăng nhập lần thứ hai, trình duyệt sẽ tự động điền biểu mẫu và tôi có thể đăng nhập anh ấy mà không cần anh ấy tương tác với trang.

Vấn đề là tôi không thể lấy mật khẩu từ biểu mẫu đăng nhập. Hãy xem mã của tôi:

$(document).ready(setTimeout(function() { 
    loginForm.form.submit(function(e) { // I don't have a onsubmit action defined on the login form 
    console.log("Submit"); 
    checkLogin(); // This function should get the username and password value and makes a credential check but I cant get the password here 
    }); 
    var username = $(".login-form__username").val(); 
    var password = $(".login-form__password").val(); // This always is "", an empty string! 
    if (username) { // If the username is set we assume its an autofill 
    console.log("autofilled"); 
    loginForm.form.submit(); // I manually fire the submit event when the browser autofills the username and password field 
    } 
}, 100)); 

Tôi có thể thấy rõ tên người dùng và mật khẩu được điền vào biểu mẫu, nhưng bằng cách nào đó tôi không thể lấy mật khẩu. Mọi thứ diễn ra tốt đẹp Nếu tôi nhấp vào nút gửi của biểu mẫu theo cách thủ công. Điều này tất nhiên sẽ kích hoạt checkLogin(); và tôi có thể nhận được mật khẩu ở đây. Nhưng nó sẽ không hoạt động, nếu tôi kích hoạt sự kiện theo cách thủ công sau sự kiện sẵn sàng tài liệu.

Có ai biết cách khắc phục điều này không hay tại sao điều này xảy ra?

Cảm ơn, David

EDIT

Tôi chỉ tìm ra, đó là vấn đề này chỉ xuất hiện trên Chrome cho Mac, nó hoạt động như một nét duyên dáng trên Chrome dành cho Windows và trên Firefox. Điều này không hoạt động trên Safari, bởi vì bạn cần phải chọn người dùng bạn muốn đăng nhập.

Bên cạnh đó tôi cũng tìm ra, mà trọng tâm cần phải được thiết lập để các trang web itselfe, không phải trên URL-Bar hoặc trên refreshButton

Answer 1

"Stay logged in" và các trình duyệt tự động điền là hai cặp giày. "Duy trì trạng thái đăng nhập" thường được thực hiện bởi một cookie hoặc một cửa hàng địa phương chứa thông tin người dùng hiện tại. Một tập lệnh chạy trên trang của bạn sẽ kiểm tra và ghi lại người dùng trong hoặc gửi anh ta đến biểu mẫu đăng nhập.

Tính năng tự động điền là tính năng của trình duyệt nơi người dùng được yêu cầu lưu trữ thông tin xác thực trong trình duyệt. Bạn không biết thông qua javascript nếu là một cái gì đó được lưu trữ. Nhưng bạn có thể thử kiểm tra độ dài của nội dung bạn nhập và gửi một cách mù quáng. Nếu nó hoạt động các thông tin đã đúng.

Answer 2

Bạn có thể lưu Form Username và Password Trong Local Storage của trình duyệt

localStorage.setItem("username", "Danyial.com"); 
localStorage.setItem("password", "1234567901"); 

Và Nhận Value và đặt trong Form

var username =localStorage.getItem("username"); 
    var password =localStorage.getItem("password"); 
    $(".login-form__username").val(username); 
    $(".login-form__password").val(password);