Log masuk tetapan JavaScript

JavaScript ialah bahasa pengaturcaraan yang biasa digunakan, biasanya digunakan untuk kesan interaktif dan pemprosesan data dinamik pada halaman web. Dalam aplikasi web, log masuk ialah fungsi yang sangat penting, yang melibatkan isu seperti keselamatan dan perlindungan privasi maklumat pengguna. Hari ini kita akan meneroka cara menggunakan JavaScript untuk menyediakan fungsi log masuk, termasuk mengesahkan input pengguna, mengendalikan permintaan log masuk, mengingat pengguna dan log keluar, dsb.

Sahkan input pengguna

Sebelum menyediakan fungsi log masuk, kami perlu memastikan bahawa maklumat yang dimasukkan oleh pengguna adalah sah dan sah, seperti nama pengguna dan kata laluan. Untuk mengesahkan input pengguna, kami boleh menggunakan kaedah seperti ungkapan biasa, pengesahan borang dan pengesahan sebelah pelayan.

Ungkapan biasa ialah bahasa untuk corak padanan, yang boleh membantu kami menyemak sama ada input itu sah atau diformat dengan baik. Contohnya, ungkapan biasa yang mudah boleh menyemak sama ada input adalah alamat e-mel yang sah:

function validateEmail(email) {
  const re = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
  return re.test(String(email).toLowerCase());
}

Pengesahan borang ialah cara lain untuk mengesahkan input pengguna dengan menetapkan peraturan dan mesej ralat untuk menyemak keberkesanan input. Sebagai contoh, kami boleh menggunakan kod HTML dan JavaScript untuk mengesahkan borang log masuk, memastikan bahawa nama pengguna dan kata laluan diperlukan dan nama pengguna mengandungi sekurang-kurangnya 6 aksara:

<form id="loginForm" onsubmit="return validateForm()">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required minlength="6"><br><br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required><br><br>
  <input type="submit" value="Log in">
</form>

<script>
function validateForm() {
  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;
  if (username.length < 6) {
    document.getElementById("username").setCustomValidity("Username must contain at least 6 characters");
    return false;
  } else {
    document.getElementById("username").setCustomValidity("");
  }
  if (password.length < 8) {
    document.getElementById("password").setCustomValidity("Password must contain at least 8 characters");
    return false;
  } else {
    document.getElementById("password").setCustomValidity("");
  }
  return true;
}
</script>

Pengesahan bahagian pelayan ialah baris terakhir pertahanan dan ia Ia memastikan bahawa maklumat yang dimasukkan oleh pengguna adalah sah dan sah kerana ia mengesahkan bahawa nama pengguna dan kata laluan sepadan dengan rekod dalam pangkalan data. Sebagai contoh, kita boleh menggunakan Node.js dan rangka kerja Express untuk melaksanakan pengesahan bahagian pelayan:

app.post('/login', function(req, res) {
  const username = req.body.username;
  const password = req.body.password;
  if(username === 'admin' && password === 'admin') {
    res.status(200).send('Login successful');
  } else {
    res.status(401).send('Invalid username or password');
  }
});

Kendalikan permintaan log masuk

Setelah pengguna memasukkan nama pengguna dan kata laluan yang sah, dan ia telah disahkan, kami perlu Gunakannya untuk mengendalikan permintaan log masuk dan membuat sesi. Sesi ialah kaedah interaksi antara pelayan dan klien, yang membolehkan pelayan mengekalkan hubungan dengan klien untuk tempoh masa tertentu dan menyimpan status dan maklumat pengguna pada pelayan.

Dalam aplikasi web, kami boleh menggunakan kuki dan sesi untuk mencipta dan mengurus sesi pengguna. Antaranya, kuki ialah fail teks kecil yang boleh disimpan dalam komputer pengguna oleh penyemak imbas web dan dihantar ke pelayan pada kali berikutnya ia melawati laman web tersebut adalah struktur data sebelah pelayan yang boleh menyimpan dan mengurus pengguna status dan maklumat.

Sebagai contoh, kami boleh menggunakan kod JavaScript untuk membuat sesi dan menyimpan maklumat pengguna:

function login(username, password) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/login');
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onload = function() {
    if (xhr.status === 200) {
      const response = JSON.parse(xhr.responseText);
      const user = response.user;
      const sessionId = response.sessionId;
      // Save user information and sessionId in cookies
      document.cookie = `user=${user}`;
      document.cookie = `sessionId=${sessionId}`;
      // Redirect user to home page
      window.location.href = '/home';
    } else {
      alert('Invalid username or password');
    }
  };
  const data = JSON.stringify({ username: username, password: password });
  xhr.send(data);
}

Dalam contoh ini, kami menggunakan objek XMLHttpRequest untuk menghantar permintaan POST, menghantar nama pengguna dan kata laluan kepada pelayan untuk mengesahkan. Jika log masuk berjaya, pelayan akan mengembalikan maklumat pengguna dan ID sesi, yang boleh kami simpan dalam kuki. Kami kemudiannya mengubah hala pengguna ke halaman utama, mengekalkan sesi pengguna melalui maklumat dalam kuki.

Ingat Pengguna

Selepas pengguna log masuk, kami boleh meningkatkan pengalaman pengguna dengan mengingati nama pengguna dan kata laluan dan membenarkan pengguna log masuk secara automatik pada kali seterusnya mereka melawat tapak web. Ini boleh dicapai dengan menyimpan nama pengguna dan kata laluan dalam kuki.

Sebagai contoh, kami boleh menggunakan kod JavaScript untuk mengingati nama pengguna dan kata laluan pengguna:

function rememberMe() {
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  if (document.getElementById('rememberMe').checked) {
    // Save username and password in cookies for 30 days
    const expires = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toUTCString();
    document.cookie = `username=${username}; expires=${expires};`;
    document.cookie = `password=${password}; expires=${expires};`;
  } else {
    // Remove username and password from cookies
    document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC;";
    document.cookie = "password=; expires=Thu, 01 Jan 1970 00:00:00 UTC;";
  }
}

Dalam contoh ini, kami menggunakan kotak pilihan untuk mewakili pilihan "Ingat Saya". Jika pengguna menyemak pilihan ini, kami menyimpan nama pengguna dan kata laluan dalam kuki dan menetapkan masa tamat tempoh kepada 30 hari. Jika pengguna membatalkan pilihan ini, kami akan memadamkan nama pengguna dan kata laluan daripada kuki.

Log keluar

Akhir sekali, kami perlu menyediakan cara yang mudah untuk pengguna log keluar untuk mengelakkan penggunaan akaun pengguna secara tidak sengaja atau menyalahi undang-undang. Log keluar memerlukan memusnahkan sesi pengguna dan mengosongkan maklumat dalam kuki.

Sebagai contoh, kami boleh menggunakan kod JavaScript untuk log keluar:

function logout() {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/logout');
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onload = function() {
    if (xhr.status === 200) {
      // Remove user information and sessionId from cookies
      document.cookie = 'user=; expires=Thu, 01 Jan 1970 00:00:00 UTC;';
      document.cookie = 'sessionId=; expires=Thu, 01 Jan 1970 00:00:00 UTC;';
      // Redirect user to login page
      window.location.href = '/login';
    } else {
      alert('Logout failed');
    }
  };
  const sessionId = getCookie('sessionId');
  const data = JSON.stringify({ sessionId: sessionId });
  xhr.send(data);
}

Dalam contoh ini, kami menggunakan objek XMLHttpRequest untuk menghantar permintaan POST, menghantar ID sesi ke pelayan. Pelayan akan memusnahkan sesi pengguna dan mengembalikan kod status kejayaan. Kami kemudiannya akan mengalih keluar maklumat pengguna dan ID sesi daripada kuki dan mengubah hala pengguna ke halaman log masuk.

Kesimpulan

Dalam artikel ini, kami meneroka cara menggunakan JavaScript untuk menyediakan fungsi log masuk, termasuk mengesahkan input pengguna, mengendalikan permintaan log masuk, mengingat pengguna dan log keluar, dsb. Log masuk ialah fungsi yang sangat penting dalam aplikasi web, yang melibatkan isu penting seperti keselamatan dan perlindungan privasi maklumat pengguna. Dengan menggunakan teknologi seperti JavaScript dan pengesahan sisi pelayan, kami boleh memastikan bahawa maklumat yang dimasukkan oleh pengguna adalah sah dan sah, serta meningkatkan pengalaman dan keselamatan pengguna.

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