recherche

Maison  >  Article  >  développement back-end  >  Comment implémenter la connexion gestuelle en php

Comment implémenter la connexion gestuelle en php

PHPz
PHPzoriginal
2023-04-05 10:29:03686parcourir

La connexion gestuelle est déjà très courante sur les appareils mobiles. Les utilisateurs n'ont qu'à faire glisser le geste spécifié sur l'écran pour se connecter au système, sans avoir à saisir des mots de passe de compte fastidieux. Cet article explique comment implémenter la connexion gestuelle à l'aide de PHP.

1. Préparation

Tout d'abord, quelques connaissances de base sont requises. PHP est devenu l'un des langages de script côté serveur les plus populaires au monde, avec une large gamme d'applications et une large communauté de développeurs. Si vous ne savez pas encore grand-chose sur PHP, il est recommandé d’acquérir d’abord quelques connaissances de base en PHP.

Deuxièmement, certaines connaissances front-end sont requises. La connexion gestuelle est implémentée sur la base d'une technologie frontale, impliquant HTML, CSS, JavaScript et d'autres technologies, elle nécessite donc une certaine compréhension du front-end.

Enfin, certaines connaissances en algorithmes sont requises. La connexion gestuelle implique la façon de reconnaître le modèle dessiné par l'utilisateur, elle nécessite donc une certaine connaissance de l'algorithme. Voici quelques algorithmes associés recommandés : $1.Leap Motion$, $2.Golden Section Search$, $3.Longest Common Subsequence(LCS)$.

2. Étapes de mise en œuvre

1. Créer un environnement PHP

Pour créer un environnement d'exécution PHP, vous pouvez utiliser WAMP, XAMPP, MAMP et d'autres logiciels, ou vous pouvez configurer l'environnement d'exécution d'Apache+Nginx+MySQL+PHP. .

2. Concevoir une base de données

Concevez une table utilisateur pour enregistrer le compte utilisateur, le mot de passe, les gestes et d'autres informations. La structure du tableau peut être la suivante : 

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. Implémentation frontale du dessin gestuel

Utilisez HTML, CSS et JavaScript pour implémenter la page frontale, qui est utilisée pour afficher les modèles de gestes, traiter les gestes de dessin des utilisateurs et autres. opérations.

1) Créez une toile pour dessiner des gestes. 

<canvas id="gesture" style="border: 1px solid #ccc;"></canvas>

2) Implémentez le dessin de gestes via 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. Le backend implémente la reconnaissance des gestes

Le backend reçoit les données de geste du frontend et les reconnaît pour déterminer si le geste est 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. Code d'implémentation complet

Code 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>

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

3. Résumé

Cet article présente les étapes spécifiques de l'utilisation de PHP pour implémenter la connexion gestuelle. Grâce à la coopération des front-ends et des back-ends, les utilisateurs peuvent utiliser des gestes au lieu de saisir des mots de passe de compte fastidieux lorsqu'ils se connectent au système sur des appareils mobiles, ce qui améliore l'expérience utilisateur et la sécurité. Bien que la connexion gestuelle soit relativement simple à mettre en œuvre, de nombreux problèmes doivent encore être pris en compte dans l'application réelle de la technologie, tels que la sécurité, la facilité d'utilisation, les performances, etc., qui doivent être continuellement optimisés et améliorés dans le contexte réel. candidatures.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php JavaScript mysql nginx css html canvas 算法 数据库 apache
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée des conseils pratiques pour installer l'extension PECL et l'extension PHPArticle suivant：Explication détaillée des conseils pratiques pour installer l'extension PECL et l'extension PHP

Articles Liés

Voir plus