Log masuk automatik menggunakan JavaScript

Memandangkan semakin banyak laman web dan aplikasi menggunakan log masuk akaun, anda perlu memasukkan nama pengguna dan kata laluan anda setiap kali anda log masuk, yang sangat menyusahkan. Untuk meningkatkan pengalaman pengguna, banyak tapak web dan aplikasi menyediakan fungsi log masuk automatik. Ciri ini merekodkan maklumat log masuk pengguna dan mengisinya secara automatik pada kali berikutnya pengguna melawat. Dalam artikel ini, kami akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi log masuk automatik.

1. Dapatkan maklumat log masuk pengguna

Untuk melaksanakan fungsi log masuk automatik, anda perlu mendapatkan maklumat log masuk pengguna terlebih dahulu. Maklumat ini biasanya termasuk nama pengguna dan kata laluan. Maklumat ini boleh diperolehi dengan beberapa cara.

1. Dapatkan daripada Cookie

Selepas pengguna log masuk, laman web biasanya mencipta kuki dalam pelayar pengguna untuk merekodkan maklumat log masuk pengguna. Maklumat ini boleh diperolehi daripada kuki melalui JavaScript.

Sebagai contoh, katakan halaman log masuk kami mempunyai dua kotak input, satu untuk memasukkan nama pengguna dan satu lagi untuk memasukkan kata laluan. Kami boleh menggunakan kod berikut untuk mendapatkan nama pengguna dan kata laluan daripada kuki.

var username = getCookie("username");
var password = getCookie("password");

function getCookie(name) {
  var cookieArr = document.cookie.split(";");
  for (var i = 0; i < cookieArr.length; i++) {
    var cookiePair = cookieArr[i].split("=");
    if (name == cookiePair[0].trim()) {
      return decodeURIComponent(cookiePair[1]);
    }
  }
  return null;
}

2. Dapatkan daripada storan tempatan

Selain kuki, anda juga boleh menggunakan storan tempatan untuk merekodkan maklumat log masuk pengguna. Ini boleh dicapai menggunakan localStorage atau sessionStorage. Tidak seperti kuki, storan tempatan tidak dihantar pada setiap permintaan HTTP dan oleh itu lebih selamat daripada kuki. Nama pengguna dan kata laluan boleh diperolehi daripada localStorage menggunakan kod berikut.

var username = localStorage.getItem("username");
var password = localStorage.getItem("password");

2. Isi nama pengguna dan kata laluan secara automatik

Selepas mendapatkan maklumat log masuk pengguna, langkah seterusnya ialah mengisi maklumat ke dalam borang log masuk. Untuk kebanyakan tapak web, borang log masuk biasanya terdiri daripada kotak input nama pengguna dan kotak input kata laluan. Kami boleh mengisi borang ini secara automatik menggunakan kod berikut.

document.getElementById("username").value = username;
document.getElementById("password").value = password;

Di sini, kami menggunakan kaedah getElementById untuk mendapatkan kotak input nama pengguna dan kata laluan, dan isi kotak input ini dengan nama pengguna dan kata laluan yang diperolehi.

3. Hantar borang log masuk secara automatik

Selepas mengisi nama pengguna dan kata laluan secara automatik, langkah seterusnya ialah menyerahkan borang log masuk secara automatik. Biasanya, penyerahan borang dicapai dengan mengklik butang "Log Masuk", tetapi dalam kes log masuk automatik, kami perlu menggunakan JavaScript untuk mensimulasikan mengklik butang ini.

Berikut ialah contoh kod untuk menyerahkan borang secara automatik.

document.forms[0].submit();

Di sini, kami menggunakan kaedah serah untuk menyerahkan borang.

4. Kod lengkap untuk merealisasikan log masuk automatik

Dengan menyepadukan tiga langkah di atas, kita boleh merealisasikan fungsi log masuk automatik. Di bawah ialah contoh kod autolog masuk yang lengkap.

var username = getCookie("username");
var password = getCookie("password");

function getCookie(name) {
  var cookieArr = document.cookie.split(";");
  for (var i = 0; i < cookieArr.length; i++) {
    var cookiePair = cookieArr[i].split("=");
    if (name == cookiePair[0].trim()) {
      return decodeURIComponent(cookiePair[1]);
    }
  }
  return null;
}

if (username != null && password != null) {
  document.getElementById("username").value = username;
  document.getElementById("password").value = password;
  document.forms[0].submit();
}

Dalam contoh ini, kami mula-mula mendapat nama pengguna dan kata laluan yang disimpan dalam kuki. Kemudian, jika maklumat ini tidak kosong, kami mengisinya ke dalam borang log masuk dan menyerahkan borang secara automatik.

Perlu diambil perhatian bahawa jika pengguna menyemak pilihan "Ingat Kata Laluan" selepas log masuk, nama pengguna dan kata laluan akan disimpan dalam storan tempatan. Dalam kes ini, kita perlu menggunakan localStorage untuk mendapatkan maklumat ini. Begitu juga, kami juga boleh menggunakan localStorage untuk menyimpan maklumat log masuk pengguna supaya mereka boleh log masuk secara automatik pada kali seterusnya mereka melawat tapak web.

Ringkasan

Log masuk automatik ialah fungsi yang sangat berguna yang boleh mengurangkan beban kerja pengguna dan meningkatkan pengalaman pengguna. Artikel ini memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi log masuk automatik, termasuk mendapatkan maklumat log masuk pengguna, mengisi nama pengguna dan kata laluan secara automatik, menyerahkan borang log masuk secara automatik, dsb. Melalui teknik ini, kami boleh dengan mudah melaksanakan fungsi log masuk automatik dan meningkatkan kecekapan pengguna.

Atas ialah kandungan terperinci Log masuk automatik menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!