Home > Article > Backend Development > How to implement gesture login in php
How to implement gesture login in php
- PHPzOriginal
- 2023-04-05 10:29:03682browse
Gesture login is already very common on mobile devices. Users only need to slide the specified gesture on the screen to log in to the system, without having to enter cumbersome account passwords. This article will introduce how to implement gesture login using PHP.
1. Preparation
First of all, some basic knowledge is required. PHP has become one of the most popular server-side scripting languages in the world, with a wide range of applications and a large developer community. If you don’t know much about PHP yet, it is recommended to learn some basic PHP knowledge first.
Secondly, some front-end knowledge is required. Gesture login is implemented based on front-end technology, involving HTML, CSS, JavaScript and other technologies, so it requires a certain understanding of the front-end.
Finally, some algorithm knowledge is required. Gesture login involves how to recognize the pattern drawn by the user, so it requires some algorithm knowledge. Here are some related algorithms recommended: $1.Leap Motion$, $2.Golden Section Search$, $3.Longest Common Subsequence(LCS)$.
2. Implementation steps
1. Build a PHP environment
To build a PHP running environment, you can use WAMP, XAMPP, MAMP and other software, or you can configure Apache Nginx MySQL PHP operating environment.
2. Design database
Design a user table to save user account, password, gesture and other information. The table structure can be as follows:
CREATE TABLE `users` ( `id` int(11) NOT NULL AUTO_INCREMENT, `account` varchar(20) NOT NULL COMMENT '用户名或注册邮箱', `password` varchar(36) NOT NULL COMMENT '登录密码', `gesture` text COMMENT '手势锁', PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户信息表';
3. Front-end implementation of gesture drawing
Use HTML, CSS and JavaScript to implement the front-end page, which is used to display gesture patterns, process user drawing gestures and other operations.
1) Create a canvas to draw gestures.
<canvas id="gesture" style="border: 1px solid #ccc;"></canvas>
2) Implement gesture drawing through JavaScript
var canvas = document.getElementById('gesture');
var context = canvas.getContext('2d');
var start = false;
var path = '';
canvas.addEventListener('touchstart', function(event) {
start = true;
path = '';
var touch = event.touches[0];
var x = touch.pageX - canvas.offsetLeft;
var y = touch.pageY - canvas.offsetTop;
context.beginPath();
context.moveTo(x, y);
}, false);
canvas.addEventListener('touchmove', function(event) {
if (start) {
var touch = event.touches[0];
var x = touch.pageX - canvas.offsetLeft;
var y = touch.pageY - canvas.offsetTop;
path += x + ',' + y + ';';
context.lineTo(x, y);
context.stroke();
}
}, false);
canvas.addEventListener('touchend', function(event) {
start = false;
console.log('gesture path:', path);
}, false);
4. Back-end implementation of gesture recognition
The back-end receives the gesture data from the front-end and recognizes it to determine whether the gesture is correct.
// 读取用户的手势锁
$sql = 'SELECT gesture FROM users WHERE account = \''.$account.'\'';
$result = mysqli_query($con, $sql);
$row = mysqli_fetch_assoc($result);
$gesture = $row['gesture'];
// 计算用户绘制的手势锁的MD5值
$md5 = md5($gesturePath);
if ($md5 == $gesture) {
// 登录成功
} else {
// 登录失败
}
5. Complete implementation code
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gesture Login</title>
<style type="text/css">
#gesture {
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="gesture"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('gesture');
var context = canvas.getContext('2d');
var start = false;
var path = '';
canvas.addEventListener('touchstart', function(event) {
start = true;
path = '';
var touch = event.touches[0];
var x = touch.pageX - canvas.offsetLeft;
var y = touch.pageY - canvas.offsetTop;
context.beginPath();
context.moveTo(x, y);
}, false);
canvas.addEventListener('touchmove', function(event) {
if (start) {
var touch = event.touches[0];
var x = touch.pageX - canvas.offsetLeft;
var y = touch.pageY - canvas.offsetTop;
path += x + ',' + y + ';';
context.lineTo(x, y);
context.stroke();
}
}, false);
canvas.addEventListener('touchend', function(event) {
start = false;
gestureLogin(path);
}, false);
// 后端接口
var url = '/gesture/login.php';
function gestureLogin(gesturePath) {
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('account', 'xxx'); // 用户账号
formData.append('gesturePath', gesturePath); // 手势路径
xhr.open('POST', url);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var response = JSON.parse(xhr.responseText);
if (response.code == 0) {
alert('登录成功');
} else {
alert('登录失败：' + response.message);
}
} else {
alert('网络错误');
}
}
};
xhr.send(formData);
}
</script>
</body>
</html>
PHP code:
<?php
// 连接数据库
$con = mysqli_connect('localhost', 'root', 'root', 'test') or die('连接失败');
mysqli_set_charset($con, 'utf8mb4');
// 判断是否POST请求
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// 读取请求参数
$account = mysqli_real_escape_string($con, $_POST['account']);
$gesturePath = mysqli_real_escape_string($con, $_POST['gesturePath']);
// 读取用户的手势锁
$sql = 'SELECT gesture FROM users WHERE account = \''.$account.'\'';
$result = mysqli_query($con, $sql);
if ($result) {
$row = mysqli_fetch_assoc($result);
$gesture = $row['gesture'];
// 计算用户绘制的手势锁的MD5值
$md5 = md5($gesturePath);
if ($md5 == $gesture) {
// 登录成功
$response = array(
'code' => 0,
'message' => '登录成功'
);
} else {
// 登录失败
$response = array(
'code' => -1,
'message' => '手势不正确'
);
}
} else {
// 用户不存在
$response = array(
'code' => -1,
'message' => '用户不存在'
);
}
// 返回结果
header('Content-Type: application/json;charset=utf-8');
echo json_encode($response);
} else {
// 非POST请求
http_response_code(404);
}
// 关闭数据库连接
mysqli_close($con);
?>
3. Summary
This article introduces Specific steps to implement gesture login using PHP. Through the cooperation of the front and back ends, users can use gestures instead of entering cumbersome account passwords when logging in to the system on mobile devices, which improves user experience and security. Although gesture login is relatively simple to implement, there are still many issues that need to be considered in the actual application of the technology, such as security, ease of use, performance, etc., which need to be continuously optimized and improved in actual applications.
The above is the detailed content of How to implement gesture login in php. For more information, please follow other related articles on the PHP Chinese website!