Bagaimana saya bisa mendapatkan browser untuk meminta untuk menyimpan kata sandi?


149

Hai, saya sedang mengerjakan aplikasi web yang memiliki dialog masuk yang berfungsi seperti ini:

  1. Pengguna mengklik "login"
  2. Formulir masuk HTML dimuat dengan AJAX dan ditampilkan dalam DIV pada halaman
  3. Pengguna memasukkan bidang pengguna / izin masuk dan klik kirim. BUKAN <form>- pengguna / pass dikirimkan melalui AJAX
  4. Jika pengguna / pass baik-baik saja, halaman dimuat ulang dengan pengguna yang login.
  5. Jika pengguna / pass buruk, halaman TIDAK memuat ulang tetapi pesan kesalahan muncul di DIV dan pengguna bisa mencoba lagi.

Inilah masalahnya: browser tidak pernah menawarkan prompt "Simpan kata sandi ini? Ya / Tidak / Tidak Sekarang" yang berfungsi untuk situs lain.

Aku mencoba membungkus <div>di <form>tag dengan "autocomplete = 'on'" tapi itu tidak membuat perbedaan.

Apakah mungkin untuk mendapatkan browser untuk menawarkan untuk menyimpan kata sandi tanpa pengerjaan ulang utama alur login saya?

terima kasih Eric

ps untuk menambahkan pertanyaan saya, saya pasti bekerja dengan browser yang menyimpan kata sandi, dan saya tidak pernah mengklik "tidak pernah untuk situs ini" ... ini adalah masalah teknis dengan browser tidak mendeteksi bahwa itu adalah formulir login, tidak kesalahan operator :-)


Jangan lupa bahwa tidak semua browser dapat menyimpan kata sandi.
Buhake Sindi

1
mabe peramban yang ditawarkan untuk menyelamatkan pengguna / pass Anda dan Anda mengklik "Jangan tanya lagi!" ?
clyfe

Jawaban:


72

Saya menemukan solusi lengkap untuk pertanyaan ini. (Saya sudah menguji ini di Chrome 27 dan Firefox 21).

Ada dua hal yang perlu diketahui:

  1. Memicu 'Simpan kata sandi', dan
  2. Kembalikan nama pengguna / kata sandi yang disimpan

1. Pemicu 'Simpan kata sandi':

Untuk Firefox 21 , 'Simpan kata sandi' dipicu ketika mendeteksi bahwa ada formulir yang berisi bidang teks input dan bidang kata sandi input dikirimkan. Jadi kita hanya perlu menggunakan

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

someFunctionForLogin()melakukan login ajax dan memuat ulang / mengarahkan ke halaman yang sudah masuk sambil event.preventDefault()memblokir pengalihan asli karena mengirimkan formulir.

Jika Anda hanya berurusan dengan Firefox, solusi di atas sudah cukup tetapi tidak bekerja di Chrome 27. Kemudian Anda akan bertanya bagaimana memicu 'Simpan kata sandi' di Chrome 27.

Untuk Chrome 27 , 'Simpan kata sandi' dipicu setelah diarahkan ke halaman dengan mengirimkan formulir yang berisi bidang teks input dengan nama atribut = 'nama pengguna' dan bidang kata sandi input dengan nama atribut = 'kata sandi' . Karena itu, kami tidak dapat memblokir pengalihan karena mengirimkan formulir tetapi kami dapat melakukan pengalihan setelah kami melakukan login ajax. (Jika Anda ingin login ajax tidak memuat ulang halaman atau tidak mengalihkan ke halaman, sayangnya, solusi saya tidak berfungsi.) Kemudian, kita dapat menggunakan

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

Tombol dengan tipe = 'tombol' akan membuat formulir tidak dikirimkan ketika tombol diklik. Kemudian, mengikat fungsi ke tombol untuk login ajax. Akhirnya, memanggil $('#loginForm').submit();pengalihan ke halaman yang masuk. Jika halaman yang masuk adalah halaman saat ini, maka Anda dapat mengganti 'signedIn.xxx' dengan halaman saat ini untuk membuat 'refresh'.

Sekarang, Anda akan menemukan bahwa metode untuk Chrome 27 juga berfungsi di Firefox 21. Jadi, lebih baik menggunakannya.

2. Kembalikan nama pengguna / kata sandi yang disimpan:

Jika Anda sudah memiliki loginForm hard-coded sebagai HTML, maka Anda tidak akan menemukan masalah untuk mengembalikan kata sandi yang disimpan di loginForm.
Namun, nama pengguna / kata sandi yang disimpan tidak akan diikat ke loginForm jika Anda menggunakan js / jquery untuk membuat loginForm secara dinamis, karena nama pengguna / kata sandi yang disimpan hanya diikat ketika dokumen dimuat.
Oleh karena itu, Anda perlu membuat hard-code loginForm sebagai HTML dan menggunakan js / jquery untuk memindahkan / menampilkan / menyembunyikan loginForm secara dinamis.


Catatan: Jika Anda melakukan login ajax, jangan tambahkan autocomplete='off'dalam bentuk tag seperti

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

autocomplete='off' akan membuat mengembalikan nama pengguna / kata sandi ke dalam loginForm gagal karena Anda tidak memperbolehkannya 'melengkapi secara otomatis' nama pengguna / kata sandi.


2
Di Chrome, 'event.preventDefault ()' mencegah ditampilkan "Simpan kata sandi", lihat bug ini: code.google.com/p/chromium/issues/detail?id=282488
mkurz

Untuk siapa pun yang menemukan ini, saya pikir mereka sedang merilis sebuah perbaikan untuk itu: code.google.com/p/chromium/issues/detail?id=357696

2
Banyak pengguna menggunakan ENTERkunci untuk mengirimkan formulir, karena Anda miliki prevented defaultketika pengguna mengirimkan formulir, tidak ada yang akan terjadi, itu adalah UX yang buruk. Anda dapat memeriksa kunci enter keycodesaat mengirim, namun Anda akan mendapatkan lagi permintaan tersebut ...
David Reinberger

2
Chrome 46 memperbaiki perilaku salahnya - tidak ada solusi yang diperlukan lagi. Lihat stackoverflow.com/a/33113374/810109
mkurz

1
Tidak berfungsi dengan baik, beberapa browser tidak memicu fitur "ingat" jika Anda mengirim dari Javascript.
JustAMartin

44

Menggunakan tombol untuk masuk:

Jika Anda menggunakan type="button"dengan onclickpawang untuk login menggunakan ajax, maka browser tidak akan menawarkan untuk menyimpan kata sandi.

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

Karena formulir ini tidak memiliki tombol kirim dan tidak memiliki bidang tindakan, browser tidak akan menawarkan untuk menyimpan kata sandi.


Menggunakan tombol kirim untuk masuk:

Namun, jika Anda mengubah tombol ke type="submit"dan menangani pengiriman, maka browser akan menawarkan untuk menyimpan kata sandi.

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

Dengan menggunakan metode ini, browser harus menawarkan untuk menyimpan kata sandi.


Inilah Javascript yang digunakan dalam kedua metode:

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
}

1
@Bigood Karena berfungsi sementara jawaban yang diterima tidak (bagi saya, setidaknya). Terima kasih spetson!
Double M

1
Bekerja untuk saya di IE juga. Aku bisa menciummu sekarang!
Renra

1
Bekerja untuk saya juga .. :)
Nabeel

1
Ini adalah solusi yang tepat dan juga solusi paling elegan untuk masalah ini.
Arash Kazemi

Ini berfungsi karena saya cukup menyalin kode ke-2 dan menempelkannya ke halaman login melalui elemen inspect, Masukkan nama pengguna / kata sandi di halaman yang baru ditambahkan dan tekan login lalu saya diminta untuk menyimpan pengguna / kata sandi. Kemudian saya me-refresh halaman dan voila, Ini meminta saya untuk memilih pengguna / pass yang sudah disimpan;)
Dewlance

15

Saya sendiri sudah berjuang dengan ini, dan akhirnya saya bisa melacak masalah dan apa yang menyebabkannya gagal.

Itu semua berasal dari kenyataan bahwa formulir login saya sedang secara dinamis disuntikkan ke halaman (menggunakan backbone.js). Segera setelah saya menyematkan formulir login saya langsung ke file index.html saya, semuanya bekerja seperti pesona.

Saya pikir ini karena browser harus menyadari bahwa ada form login yang sudah ada, tetapi karena milik saya sedang disuntikkan secara dinamis ke dalam halaman, ia tidak tahu bahwa form login "nyata" pernah ada.


Mulai dengan Chrome versi 46 sekarang Anda juga dapat secara dinamis menyuntikkan formulir dan mereka akan dikenali sebagai formulir masuk "nyata" yang kredensial dapat disimpan. Lihat stackoverflow.com/a/33113374/810109
mkurz

12

Solusi ini berhasil bagi saya yang diposting oleh Eric di forum kode


Alasan mengapa itu tidak meminta itu adalah karena browser membutuhkan halaman secara fisik untuk menyegarkan kembali ke server. Trik kecil yang dapat Anda lakukan adalah melakukan dua tindakan dengan formulir. Tindakan pertama adalah onsubmit untuk memanggil kode Ajax Anda. Juga memiliki target bentuk iframe tersembunyi.

Kode:

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

Lihat apakah itu menyebabkan prompt muncul.

Eric


Diposting di http://www.codingforums.com/showthread.php?t=123007


5
Sebagai catatan, saya menemukan bahwa Chrome 11 tidak menawarkan untuk menyimpan kredensial Anda jika formulir dikirimkan ke dirinya sendiri . Jadi, Anda perlu mengatur actionke beberapa halaman dummy.
user123444555621

Ini akan mengirimkan plaintext kata sandi di url sebagai permintaan dapatkan. Jika metode diubah menjadi POST, Firefox (16) akan membuka bingkai yang sebelumnya tersembunyi di tab baru. Hal yang sama berlaku untuk chrome di Android 4. :-(
stefan.s

Chrome 46 memperbaiki perilaku salahnya - tidak ada iframesolusi yang diperlukan lagi. Lihat stackoverflow.com/a/33113374/810109
mkurz

10

Ada ultimate solusi untuk memaksa semua browser (diuji: chrome 25, safari 5.1, IE10, Firefox 16) untuk meminta menyimpan password menggunakan jQuery dan ajax permintaan:

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>

Caranya adalah menghentikan formulir untuk mengirimkan caranya sendiri (event.stopPropagation ()), alih-alih mengirim kode Anda sendiri ($ .ajax ()) dan dalam panggilan balik sukses ajax kirimkan formulir lagi sehingga browser menangkapnya dan menampilkan permintaan untuk menyimpan kata sandi. Anda juga dapat menambahkan beberapa penangan kesalahan, dll.

Semoga ini bisa membantu seseorang.


7
Ini sebenarnya akan melakukan HTTP sampai ke tujuan login.php?username=username&password=passwordyang mengalahkan seluruh tujuan menyimpan kata sandi
Adaptabi

Wooooooooooooooooooooooooooooooooooooooooooooh! Itu berhasil bagi saya;) terima kasih banyak!
Hardik Thaker

1
Yap, tambahkan event listenerke formulir dan tambahkan event.preventDefault()plusevent.stopPropagation()
Densi Tensy

7

Saya mencoba jawaban spetson tetapi itu tidak berhasil untuk saya di Chrome 18. Apa yang berhasil adalah menambahkan load handler ke iframe dan tidak mengganggu pengiriman (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 () melakukan panggilan AJAX dan menampilkan div loginForm jika gagal. (Layanan web akan mengembalikan 403 jika pengguna tidak diautentikasi).

Diuji untuk bekerja di FF dan IE8 juga.


Saya mencoba metode ini di Chrome, dan itu tidak akan berfungsi kecuali halaman tindakan ( /logindalam contoh Anda) mengembalikan beberapa teks atau konten yang terlihat lainnya.
Stephen Bunch

1
Chrome 46 memperbaiki perilaku salahnya - tidak ada iframesolusi yang diperlukan lagi. Lihat stackoverflow.com/a/33113374/810109
mkurz

4

Peramban mungkin tidak dapat mendeteksi bahwa formulir Anda adalah formulir masuk. Menurut beberapa diskusi dalam pertanyaan sebelumnya ini , browser mencari bidang formulir yang terlihat seperti <input type="password">. Apakah bidang formulir kata sandi Anda diterapkan serupa dengan itu?

Sunting: Untuk menjawab pertanyaan Anda di bawah, saya pikir Firefox mendeteksi kata sandi dengan form.elements[n].type == "password"(mengulangi semua elemen formulir) dan kemudian mendeteksi bidang nama pengguna dengan mencari mundur melalui elemen formulir untuk bidang teks segera sebelum bidang kata sandi (info lebih lanjut di sini ). Dari apa yang saya tahu, formulir login Anda harus menjadi bagian dari <form>atau Firefox tidak akan mendeteksinya.


1
Ini mirip, ya, terima kasih saya akan menerima ini sebagai jawaban resmi karena ini sedekat yang kita dapatkan. Berikut ini sesuatu yang membuat saya frustrasi: Saya sepertinya tidak dapat menemukan (di mana pun di web) posting blog sederhana yang mengatakan "Berikut adalah aturan yang digunakan browser untuk mendeteksi jika formulir yang Anda isi adalah formulir login, sehingga mereka dapat menawarkan untuk menyimpan kata sandi pengguna. " Mengingat ini adalah sedikit ilmu hitam (dan mengingat Mozilla, setidaknya, adalah open source), Anda akan berpikir seseorang hanya akan menerbitkan heuristik.
Eric

(Dan juga, sepertinya tidak ada cara bagi saya untuk "mengisyaratkan" formulir login saya sehingga browser tahu itu adalah formulir login. Sekali lagi, terkejut ini tidak didokumentasikan dengan lebih baik di web. Saya pikir perubahan saya akan ke nama bidang formulir dan struktur HTML keseluruhan, dan kemudian saya berharap [!] yang memperbaiki masalah.)
Eric

Oke, tidak berhasil. Saya telah mengajukan pertanyaan baru, mendekati ini dari sudut yang sedikit berbeda: stackoverflow.com/questions/2398763/…
Eric

3

Pendekatan 2020 sederhana

Ini secara otomatis akan mengaktifkan pelengkapan otomatis dan menyimpan kata sandi di browser.

  • autocomplete="on" (bentuk)
  • autocomplete="username" (masukan, email / nama pengguna)
  • autocomplete="current-password" (masukan, kata sandi)
<form autocomplete="on">
  <input id="user-text-field" type="email" autocomplete="username"/>
  <input id="password-text-field" type="password" autocomplete="current-password"/>
</form>

Lihat lebih lanjut di dokumentasi Apple: Mengaktifkan IsiOtomatis Kata Sandi pada Elemen Input HTML


4
FYI ini tampaknya memerlukan pengiriman formulir (tidak dapat menggunakan XHR dan preventDefault) dan itu tidak akan berfungsi jika hanya ada satu bidang kata sandi (aplikasi tipe aman digital). Membagikan temuan ini untuk siapa pun yang mungkin merasa bermanfaat.
Tomáš Hübelbauer

2

Saya menghabiskan banyak waktu membaca berbagai jawaban di utas ini, dan bagi saya, itu sebenarnya sesuatu yang sedikit berbeda (terkait, tetapi berbeda). Pada Mobile Safari (perangkat iOS), jika formulir login HIDDEN saat halaman dimuat, prompt tidak akan muncul (setelah Anda menunjukkan formulir kemudian kirimkan). Anda dapat menguji dengan kode berikut, yang menampilkan formulir 5 detik setelah memuat halaman. Hapus JS dan tampilan: tidak ada dan berfungsi. Saya belum menemukan solusi untuk ini, hanya diposting jika ada orang lain yang memiliki masalah yang sama dan tidak dapat mengetahui penyebabnya.

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>

2

Tidak ada jawaban yang menjelaskan Anda dapat menggunakan API Riwayat HTML5 untuk meminta untuk menyimpan kata sandi.

Pertama, Anda harus memastikan bahwa Anda memiliki setidaknya satu <form>elemen dengan kata sandi dan bidang email atau nama pengguna. Sebagian besar browser menangani ini secara otomatis selama Anda menggunakan jenis input yang tepat (kata sandi, email atau nama pengguna). Namun yang pasti, setel nilai pelengkapan otomatis dengan benar untuk setiap elemen input.

Anda bisa menemukan daftar nilai autocomplete di sini: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

Yang Anda butuhkan adalah: username, emaildancurrent-password

Maka Anda memiliki dua kemungkinan:

  • Jika Anda menavigasi ke URL yang berbeda setelah mengirim, sebagian besar browser akan meminta untuk menyimpan kata sandi.
  • Jika Anda tidak ingin mengalihkan ke URL lain atau bahkan memuat ulang halaman (mis. Aplikasi satu halaman). Cegah default event (menggunakan e.preventDefault) di dalam formulir yang Anda kirim. Anda dapat menggunakan API riwayat HTML5 untuk mendorong sesuatu pada riwayat untuk menunjukkan bahwa Anda 'dinavigasi' di dalam aplikasi satu halaman Anda. Browser sekarang akan meminta untuk menyimpan kata sandi dan nama pengguna.
history.pushState({}, "Your new page title");

Anda juga dapat mengubah URL halaman, tetapi itu tidak diperlukan untuk meminta untuk menyimpan kata sandi:

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

Dokumentasi: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

Ini memiliki manfaat tambahan sehingga Anda dapat mencegah browser untuk meminta untuk menyimpan kata sandi jika pengguna memasukkan kata sandi dengan salah. Perhatikan bahwa di beberapa browser, browser akan selalu meminta untuk menyimpan kredensial, bahkan ketika Anda menelepon .preventDefault dan tidak menggunakan API riwayat.

Jika Anda tidak ingin menavigasi dan / atau memodifikasi riwayat browser, Anda dapat menggunakan replaceState sebagai gantinya (ini juga berfungsi).


ini jawaban tahun 2020! Saya harus menggunakan history.pushState({}, null "Your new page title");untuk mengubah url tanpa navigasi apa pun
Delcon

1

Kode berikut diuji pada

  • Chrome 39.0.2171.99m: BEKERJA
  • Android Chrome 39.0.2171.93: BEKERJA
  • Android stock-browser (Android 4.4): TIDAK BEKERJA
  • Internet Explorer 5+ (dicontoh): BEKERJA
  • Internet Explorer 11.0.9600.17498 / Pembaruan-Versi: 11.0.15: BEKERJA
  • Firefox 35.0: BEKERJA

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

Kode Pos:

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

Catatan

  • Untuk formulir login dinamis window.external.AutoCompleteSaveFormdiperlukan panggilan
  • Internet Explorer memerlukan "kata sandi"-bidang untuk menampilkan dialog kata sandi toko
  • Internet Explorer tampaknya memerlukan klik pada tombol kirim (bahkan jika itu adalah klik palsu)

Berikut ini contoh kode-masuk 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
    });
};

Catatan

  • "akun / login" menetapkan cookie jika berhasil
  • Redirect-halaman ("manual" yang diprakarsai oleh js-code) tampaknya diperlukan. Saya juga menguji postingan iframe, tetapi saya tidak berhasil.

1

Saya menemukan solusi yang cukup elegan (atau retas, apa pun yang cocok) untuk pengguna Prototype.JS, menjadi salah satu penahan terakhir menggunakan Prototipe. Substitusi sederhana dari metode jQuery yang sesuai harus melakukan trik.

Pertama, pastikan ada <form>tag, dan tombol kirim dengan nama kelas yang dapat direferensikan nanti (dalam hal ini faux-submit) yang bersarang di dalam elemen dengan set gaya display:none, seperti digambarkan di bawah ini:

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

Kemudian buat pengamat klik untuk button, yang akan "mengirimkan" formulir seperti yang diilustrasikan:

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

Lalu buat pendengar untuk submitacara, dan hentikan. event.stop()akan menghentikan semua ajukan acara di DOM kecuali jika dibungkus Event.findElementdengan kelas tombol input tersembunyi (seperti di atas, faux-submit):

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

Ini diuji sebagai berfungsi di Firefox 43 dan Chrome 50.


0

Situs Anda mungkin sudah ada dalam daftar di mana browser diberitahu untuk tidak meminta untuk menyimpan kata sandi. Di firefox, Opsi -> Keamanan -> Ingat kata sandi untuk situs [kotak centang] - pengecualian [tombol]


0

tambahkan sedikit informasi lebih lanjut ke jawaban @Michal Roharik.

jika panggilan ajax Anda akan mengembalikan url kembali, Anda harus menggunakan jquery untuk mengubah atribut aksi formulir ke url sebelum memanggil form.submit

ex.

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

0

Saya memiliki masalah yang serupa, login dilakukan dengan ajax, tetapi browser (firefox, chrome, safari dan IE 7-10) tidak akan menawarkan untuk menyimpan kata sandi jika form (#loginForm) dikirimkan dengan ajax.

Sebagai SOLUSI saya telah menambahkan input kirim tersembunyi (#loginFormHiddenSubmit) ke formulir yang dikirimkan oleh ajax dan setelah panggilan ajax akan mengembalikan kesuksesan, saya akan memicu klik untuk menyembunyikan masukan yang dikirimkan. Halaman dengan cara apa pun perlu di-refresh. Klik dapat dipicu dengan:

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

Alasan mengapa saya telah menambahkan tombol kirim tersembunyi karena:

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

tidak akan menawarkan untuk menyimpan kata sandi di IE (meskipun telah berfungsi di browser lain).


-1

Tidak setiap browser (misalnya IE 6) memiliki opsi untuk mengingat kredensial.

Satu hal yang dapat Anda lakukan adalah (setelah pengguna berhasil masuk) menyimpan informasi pengguna melalui cookie dan memiliki opsi "Remember Me on this machine". Dengan begitu, ketika pengguna datang lagi (bahkan jika dia keluar), aplikasi web Anda dapat mengambil cookie dan mendapatkan informasi pengguna (ID pengguna + ID Sesi) dan memungkinkannya untuk terus bekerja.

Semoga ini bisa menjadi sugestif. :-)


Saya tidak akan menyimpan informasi pengguna dalam cookie, setidaknya apa pun yang sensitif.
Jack Marchetti

Saya tidak bermaksud menyimpan kata sandi pengguna. Jelas Anda harus sangat kreatif tentang bagaimana Anda harus membuat useful garbageuntuk mengidentifikasi informasi pengguna. Bahkan SO menyimpan info dalam cookie untuk mengenali Anda.
Buhake Sindi

cukup adil, tetapi saya masih akan mengenkripsi sebanyak yang Anda bisa.
Jack Marchetti

@JackMarchetti mengenkripsi sisi klien akan menjadi ide yang buruk (dan agak tidak berguna). Karena kode yang diperlukan untuk mengenkripsi terlihat, siapa pun dapat menemukan file .js dan mendekripsi. Ini berarti bahwa Anda tidak boleh menyimpan data dalam cookie
Universal Electricity

-1

Yang benar adalah, Anda tidak bisa memaksa browser untuk bertanya. Saya yakin browser memiliki algoritma sendiri untuk menebak apakah Anda telah memasukkan nama pengguna / kata sandi, seperti mencari inputtype="password" tetapi Anda tidak dapat mengatur apa pun untuk memaksa browser.

Anda dapat, seperti yang disarankan orang lain, menambahkan informasi pengguna dalam cookie. Jika Anda melakukan ini, lebih baik Anda mengenkripsi paling tidak dan tidak menyimpan kata sandi mereka. Mungkin paling banyak menyimpan nama pengguna mereka.


Dan Anda menyarankan cookie?
Buhake Sindi

saya katakan untuk mengenkripsi apa pun yang Anda simpan di dalamnya.
Jack Marchetti

1
Kue? Itu adalah ide buruk yang menunggu untuk terjadi
NightSkyCode

-1

Anda dapat melampirkan dialog ke formulir, sehingga semua input tersebut ada dalam formulir. Hal lainnya adalah membuat bidang teks kata sandi tepat setelah bidang teks nama pengguna.


-1

Ini bekerja jauh lebih baik bagi saya, karena 100% ajaxed dan browser mendeteksi login.

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

-2

Menggunakan cookie mungkin akan menjadi cara terbaik untuk melakukan ini.

Anda dapat memiliki kotak centang untuk 'Ingat saya?' dan minta formulir membuat cookie untuk menyimpan // login pengguna // info. EDIT: Informasi Sesi Pengguna

Untuk membuat cookie, Anda harus memproses formulir login dengan PHP.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.