제스처 로그인은 이미 모바일 장치에서 매우 일반적입니다. 사용자는 번거로운 계정 비밀번호를 입력할 필요 없이 시스템에 로그인하기 위해 화면에서 지정된 제스처만 슬라이드하면 됩니다. 이 글에서는 PHP를 사용하여 제스처 로그인을 구현하는 방법을 소개합니다.
1. 준비
우선 기본적인 지식이 필요합니다. PHP는 광범위한 애플리케이션과 대규모 개발자 커뮤니티를 통해 세계에서 가장 인기 있는 서버측 스크립팅 언어 중 하나가 되었습니다. 아직 PHP에 대해 잘 모른다면, 먼저 기본적인 PHP 지식을 익히는 것이 좋습니다.
둘째, 프론트엔드 지식이 필요합니다. 제스처 로그인은 HTML, CSS, JavaScript 등의 기술이 포함된 프런트엔드 기술을 기반으로 구현되므로 프런트엔드에 대한 어느 정도의 이해가 필요합니다.
마지막으로 일부 알고리즘 지식이 필요합니다. 제스처 로그인은 사용자가 그린 패턴을 인식하는 방법을 포함하므로 어느 정도의 알고리즘 지식이 필요합니다. 다음은 권장되는 몇 가지 관련 알고리즘입니다: $1.Leap Motion$, $2.Golden Section Search$, $3.Longest Common Subsequence(LCS)$.
2. 구현 단계
1. PHP 환경 구축
PHP 실행 환경을 구축하려면 WAMP, XAMPP, MAMP 및 기타 소프트웨어를 사용하거나 Apache+Nginx+MySQL+PHP의 실행 환경을 구성할 수 있습니다. .
2. 데이터베이스 디자인
사용자 계정, 비밀번호, 제스처 및 기타 정보를 저장할 사용자 테이블을 디자인합니다. 테이블 구조는 다음과 같습니다:
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. 제스처 드로잉의 프런트 엔드 구현
HTML, CSS 및 JavaScript를 사용하여 제스처 패턴 표시, 사용자 그리기 제스처 및 기타 처리에 사용되는 프런트 엔드 페이지를 구현합니다. 운영.
1) 제스처를 그릴 캔버스를 만듭니다.
<canvas id="gesture" style="border: 1px solid #ccc;"></canvas>
2) 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. 백엔드는 제스처 인식을 구현합니다
백엔드는 프런트엔드로부터 제스처 데이터를 수신하고 이를 인식하여 제스처가 올바른지 확인합니다.
// 读取用户的手势锁
$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. 전체 구현 코드
HTML 코드:
<!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 코드:
<?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. 요약
이 문서에서는 PHP를 사용하여 제스처 로그인을 구현하는 구체적인 단계를 소개합니다. 프런트엔드와 백엔드의 협력을 통해 사용자는 모바일 기기에서 시스템에 로그인할 때 번거로운 계정 비밀번호를 입력하는 대신 제스처를 사용할 수 있어 사용자 경험과 보안이 향상됩니다. 제스처 로그인은 비교적 구현이 간단하지만, 보안, 사용 편의성, 성능 등 기술을 실제 적용하기 위해서는 아직 고려해야 할 문제가 많아, 실제로 지속적으로 최적화하고 개선해야 합니다. 응용 프로그램.
위 내용은 PHP에서 제스처 로그인을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
