手勢登入在行動裝置上已經很普遍了,使用者只需要在螢幕上滑動指定的手勢就可以登入系統,不用輸入繁瑣的帳號密碼。本文將介紹使用PHP如何實現手勢登入。
一、準備工作
#首先,需要一些基礎知識。 PHP已成為世界上最受歡迎的伺服器端腳本語言之一,擁有廣泛的應用和龐大的開發者社群。如果你對PHP還不太了解,建議先學習一些PHP基礎。
其次,需要一些前端知識。手勢登入是基於前端技術實現的,涉及HTML、CSS、JavaScript等技術,因此需要對前端有一定的了解。
最後,需要一些演算法知識。手勢登入涉及如何識別使用者繪製的圖案,因此需要一些演算法知識。這裡推薦一些相關演算法:$1.Leap Motion$,$2.Golden Section Search$,$3.Longest Common Subsequence(LCS)$。
二、實作步驟
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畫布,用來繪製手勢。
<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); ?>
三、總結
##本文介紹了使用PHP實現手勢登入的具體步驟。透過前後端的配合,實現了使用者在行動裝置上登入系統時,可以用手勢取代輸入繁瑣的帳號密碼,提高了使用者的體驗和安全性。雖然手勢登入在實作上較為簡單,但在技術的實際應用中,仍有許多需要考慮的問題,如安全性、易用性、效能等方面,需要在實際應用中不斷優化和完善。以上是php如何實現手勢登錄的詳細內容。更多資訊請關注PHP中文網其他相關文章!