ジェスチャー ログインは、モバイル デバイスではすでに非常に一般的になっており、ユーザーは、面倒なアカウント パスワードを入力することなく、画面上で指定されたジェスチャーをスライドするだけでシステムにログインできます。この記事では、PHPを使用してジェスチャーログインを実装する方法を紹介します。
1. 準備
まず、いくつかの基礎知識が必要です。 PHP は、幅広いアプリケーションと大規模な開発者コミュニティを備えた、世界で最も人気のあるサーバーサイド スクリプト言語の 1 つとなっています。 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 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
