How to implement gesture login in php

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></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:

nbsp;html>


  
  
  


  <canvas></canvas>
  <script>
    var canvas = document.getElementById(&#39;gesture&#39;);
    var context = canvas.getContext(&#39;2d&#39;);
    var start = false;
    var path = &#39;&#39;;
    canvas.addEventListener(&#39;touchstart&#39;, function(event) {
      start = true;
      path = &#39;&#39;;
      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(&#39;touchmove&#39;, function(event) {
      if (start) {
        var touch = event.touches[0];
        var x = touch.pageX - canvas.offsetLeft;
        var y = touch.pageY - canvas.offsetTop;
        path += x + &#39;,&#39; + y + &#39;;&#39;;
        context.lineTo(x, y);
        context.stroke();
      }
    }, false);
    canvas.addEventListener(&#39;touchend&#39;, function(event) {
      start = false;
      gestureLogin(path);
    }, false);
    // 后端接口
    var url = &#39;/gesture/login.php&#39;;
    function gestureLogin(gesturePath) {
      var xhr = new XMLHttpRequest();
      var formData = new FormData();
      formData.append(&#39;account&#39;, &#39;xxx&#39;); // 用户账号
      formData.append(&#39;gesturePath&#39;, gesturePath); // 手势路径
      xhr.open(&#39;POST&#39;, url);
      xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
          if (xhr.status == 200) {
            var response = JSON.parse(xhr.responseText);
            if (response.code == 0) {
              alert(&#39;登录成功&#39;);
            } else {
              alert(&#39;登录失败：&#39; + response.message);
            }
          } else {
            alert(&#39;网络错误&#39;);
          }
        }
      };
      xhr.send(formData);
    }
  </script>

PHP code:

<?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);
?>

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!