Hai, saya sedang mengerjakan aplikasi web yang memiliki dialog masuk yang berfungsi seperti ini:
- Pengguna mengklik "login"
- Formulir masuk HTML dimuat dengan AJAX dan ditampilkan dalam DIV pada halaman
- Pengguna memasukkan bidang pengguna / izin masuk dan klik kirim. BUKAN
<form>
- pengguna / pass dikirimkan melalui AJAX - Jika pengguna / pass baik-baik saja, halaman dimuat ulang dengan pengguna yang login.
- 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 :-)
Jawaban:
Saya menemukan solusi lengkap untuk pertanyaan ini. (Saya sudah menguji ini di Chrome 27 dan Firefox 21).
Ada dua hal yang perlu diketahui:
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
someFunctionForLogin()
melakukan login ajax dan memuat ulang / mengarahkan ke halaman yang sudah masuk sambilevent.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
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 sepertiautocomplete='off'
akan membuat mengembalikan nama pengguna / kata sandi ke dalam loginForm gagal karena Anda tidak memperbolehkannya 'melengkapi secara otomatis' nama pengguna / kata sandi.sumber
ENTER
kunci untuk mengirimkan formulir, karena Anda milikiprevented default
ketika pengguna mengirimkan formulir, tidak ada yang akan terjadi, itu adalah UX yang buruk. Anda dapat memeriksa kunci enterkeycode
saat mengirim, namun Anda akan mendapatkan lagi permintaan tersebut ...Menggunakan tombol untuk masuk:
Jika Anda menggunakan
type="button"
denganonclick
pawang untuk login menggunakanajax
, maka browser tidak akan menawarkan untuk menyimpan kata sandi.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.Dengan menggunakan metode ini, browser harus menawarkan untuk menyimpan kata sandi.
Inilah Javascript yang digunakan dalam kedua metode:
sumber
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.
sumber
Solusi ini berhasil bagi saya yang diposting oleh Eric di forum kode
Kode:
Lihat apakah itu menyebabkan prompt muncul.
Eric
Diposting di http://www.codingforums.com/showthread.php?t=123007
sumber
action
ke beberapa halaman dummy.iframe
solusi yang diperlukan lagi. Lihat stackoverflow.com/a/33113374/810109Ada 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:
HTML:
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.
sumber
login.php?username=username&password=password
yang mengalahkan seluruh tujuan menyimpan kata sandievent listener
ke formulir dan tambahkanevent.preventDefault()
plusevent.stopPropagation()
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):
HTML:
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.
sumber
/login
dalam contoh Anda) mengembalikan beberapa teks atau konten yang terlihat lainnya.iframe
solusi yang diperlukan lagi. Lihat stackoverflow.com/a/33113374/810109Peramban 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.sumber
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)Lihat lebih lanjut di dokumentasi Apple: Mengaktifkan IsiOtomatis Kata Sandi pada Elemen Input HTML
sumber
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.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:
HTML:
sumber
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
,email
dancurrent-password
Maka Anda memiliki dua kemungkinan:
Anda juga dapat mengubah URL halaman, tetapi itu tidak diperlukan untuk meminta untuk menyimpan kata sandi:
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).
sumber
history.pushState({}, null "Your new page title");
untuk mengubah url tanpa navigasi apa punKode berikut diuji pada
JS-Fiddle:
http://jsfiddle.net/ocozggqu/
Kode Pos:
Catatan
window.external.AutoCompleteSaveForm
diperlukan panggilanBerikut ini contoh kode-masuk ajax:
Catatan
sumber
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 inifaux-submit
) yang bersarang di dalam elemen dengan set gayadisplay:none
, seperti digambarkan di bawah ini:Kemudian buat pengamat klik untuk
button
, yang akan "mengirimkan" formulir seperti yang diilustrasikan:Lalu buat pendengar untuk
submit
acara, dan hentikan.event.stop()
akan menghentikan semua ajukan acara di DOM kecuali jika dibungkusEvent.findElement
dengan kelas tombol input tersembunyi (seperti di atas,faux-submit
):Ini diuji sebagai berfungsi di Firefox 43 dan Chrome 50.
sumber
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]
sumber
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.
sumber
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:
Alasan mengapa saya telah menambahkan tombol kirim tersembunyi karena:
tidak akan menawarkan untuk menyimpan kata sandi di IE (meskipun telah berfungsi di browser lain).
sumber
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. :-)
sumber
useful garbage
untuk mengidentifikasi informasi pengguna. Bahkan SO menyimpan info dalam cookie untuk mengenali Anda.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 input
type="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.
sumber
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.
sumber
Ini bekerja jauh lebih baik bagi saya, karena 100% ajaxed dan browser mendeteksi login.
sumber
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.
sumber