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

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

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.

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
}

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.

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

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.

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.

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.

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

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>

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

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.

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.

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]

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

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

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. :-)

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.

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.

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>

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.