一、前端页面设计
1、创建HTML登录表单：首先创建一个包含用户名和密码输入框以及登录按钮的HTML表单。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form id="loginForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<button type="button" onclick="login()">Login</button>
</form>
<div id="message"></div>
<script>
function login() {
var username = $('#username').val();
var password = $('#password').val();
$.ajax({
url: 'login.php',
method: 'POST',
data: {
username: username,
password: password
},
success: function (response) {
if (response.success) {
alert('Login successful');
} else {
alert('Invalid credentials');
}
}
});
}
</script>
</body>
</html> 2、添加JavaScript代码：使用JavaScript（这里以jQuery为例）编写Ajax请求代码，当用户点击登录按钮时，获取输入的用户名和密码，并通过POST请求发送到服务器端的PHP脚本（如login.php），在Ajax请求的回调函数中，根据服务器返回的响应结果显示相应的消息。
二、后端PHP代码编写
1、连接数据库：在PHP脚本（如login.php）中，首先需要连接到MySQL数据库，假设数据库名为testdb，用户名为root，密码为root，可以使用以下代码进行连接：
<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "testdb";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?> 2、接收并验证数据：从POST请求中接收用户名和密码参数，然后查询数据库中的用户表（假设表名为users），检查是否存在匹配的用户名和密码记录。
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST['username'];
$password = $_POST['password'];
$sql = "SELECT FROM users WHERE username='$username' AND password='$password'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
echo json_encode(array("success" => true));
} else {
echo json_encode(array("success" => false));
}
}
$conn->close(); 三、实现登录验证流程
1、用户输入信息：用户在前端页面输入用户名和密码，并点击登录按钮。
2、Ajax请求发送：前端JavaScript代码捕获用户输入的信息，并通过Ajax请求发送到服务器端的PHP脚本（login.php）。
3、PHP脚本处理：服务器端的PHP脚本接收到请求后，连接到数据库，并根据用户提供的用户名和密码查询用户表，如果找到匹配的记录，则返回一个表示登录成功的JSON响应；否则，返回一个表示登录失败的JSON响应。
4、前端显示结果：前端JavaScript代码接收到服务器返回的响应后，根据响应内容更新页面显示相应的消息，如果登录成功，可以跳转到其他页面或执行其他操作；如果登录失败，提示用户输入的用户名或密码错误。
四、相关问题与解答
1、如何防止SQL注入攻击？
答：为了防止SQL注入攻击，可以使用预处理语句来代替直接拼接SQL查询字符串，在PHP中使用mysqli_prepare和mysqli_bind_param等函数来准备和绑定参数化的查询语句，这样可以确保用户输入的数据被正确地转义和过滤，从而防止恶意代码注入到数据库中。
$stmt = $conn->prepare("SELECT FROM users WHERE username=? AND password=?");
$stmt->bind_param("ss", $username, $password);
$stmt->execute();
$result = $stmt->get_result(); 2、如何对用户密码进行加密存储？
答：为了保护用户的密码安全，不应该将明文密码存储在数据库中，可以使用哈希算法（如bcrypt、MD5等）对密码进行加密后再存储，在验证密码时，再将用户输入的密码进行同样的哈希处理，然后与数据库中存储的哈希值进行比较，在注册新用户时，可以使用以下代码对密码进行加密：
$passwordHash = password_hash($password, PASSWORD_BCRYPT);
$sql = "INSERT INTO users (username, password) VALUES ('$username', '$passwordHash')"; 而在登录验证时，则使用以下代码进行密码验证：
$stmt = $conn->prepare("SELECT FROM users WHERE username=?");
$stmt->bind_param("s", $username);
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows > 0) {
$row = $result->fetch_assoc();
if (password_verify($password, $row['password'])) {
echo json_encode(array("success" => true));
} else {
echo json_encode(array("success" => false));
}
} else {
echo json_encode(array("success" => false));
} 原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1655862.html
本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。
发表回复