php如何實現手勢登錄-PHP問題-PHP中文網

首頁

後端開發

PHP問題

php如何實現手勢登錄

PHPz

Apr 05, 2023 am 10:29 AM

手勢登入在行動裝置上已經很普遍了，使用者只需要在螢幕上滑動指定的手勢就可以登入系統，不用輸入繁瑣的帳號密碼。本文將介紹使用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(&#39;localhost&#39;, &#39;root&#39;, &#39;root&#39;, &#39;test&#39;) or die(&#39;连接失败&#39;);
mysqli_set_charset($con, &#39;utf8mb4&#39;);
// 判断是否POST请求
if ($_SERVER[&#39;REQUEST_METHOD&#39;] == &#39;POST&#39;) {
  // 读取请求参数
  $account = mysqli_real_escape_string($con, $_POST[&#39;account&#39;]);
  $gesturePath = mysqli_real_escape_string($con, $_POST[&#39;gesturePath&#39;]);
  // 读取用户的手势锁
  $sql = &#39;SELECT gesture FROM users WHERE account = \&#39;&#39;.$account.&#39;\&#39;&#39;;
  $result = mysqli_query($con, $sql);
  if ($result) {
    $row = mysqli_fetch_assoc($result);
    $gesture = $row[&#39;gesture&#39;];
    // 计算用户绘制的手势锁的MD5值
    $md5 = md5($gesturePath);
    if ($md5 == $gesture) {
      // 登录成功
      $response = array(
        &#39;code&#39; => 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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn