Bagaimana untuk melaksanakan log masuk isyarat dalam php

Log masuk gerak isyarat sudah sangat biasa pada peranti mudah alih Pengguna hanya perlu meluncurkan gerak isyarat yang ditentukan pada skrin untuk log masuk ke sistem, tanpa perlu memasukkan kata laluan akaun yang menyusahkan. Artikel ini akan memperkenalkan cara melaksanakan log masuk gerak isyarat menggunakan PHP.

1. Persediaan

Pertama sekali, beberapa pengetahuan asas diperlukan. PHP telah menjadi salah satu bahasa skrip sebelah pelayan yang paling popular di dunia, dengan pelbagai aplikasi dan komuniti pembangun yang besar. Jika anda masih belum tahu banyak tentang PHP, disyorkan untuk mempelajari beberapa pengetahuan asas PHP terlebih dahulu.

Kedua, beberapa pengetahuan front-end diperlukan. Log masuk gerak isyarat dilaksanakan berdasarkan teknologi bahagian hadapan, yang melibatkan HTML, CSS, JavaScript dan teknologi lain, jadi ia memerlukan pemahaman tertentu tentang bahagian hadapan.

Akhir sekali, beberapa pengetahuan algoritma diperlukan. Log masuk gerak isyarat melibatkan cara mengenali corak yang dilukis oleh pengguna, jadi ia memerlukan pengetahuan algoritma. Berikut ialah beberapa algoritma berkaitan yang disyorkan: $1.Leap Motion$, $2.Golden Section Search$, $3.Longest Common Subsequence(LCS)$.

2. Langkah pelaksanaan

1 Bina persekitaran PHP

Untuk membina persekitaran berjalan PHP, anda boleh menggunakan WAMP, XAMPP, MAMP dan perisian lain, atau anda boleh konfigurasikan persekitaran operasi Apache+Nginx+ MySQL+PHP.

2. Reka bentuk pangkalan data

Reka bentuk jadual pengguna untuk menyimpan akaun pengguna, kata laluan, gerak isyarat dan maklumat lain. Struktur jadual boleh menjadi seperti berikut:

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. Pelaksanaan lukisan gerak isyarat bahagian hadapan

Gunakan HTML, CSS dan JavaScript untuk melaksanakan halaman hujung hadapan untuk memaparkan corak gerak isyarat, proses gerak isyarat lukisan pengguna dan operasi lain.

1) Cipta kanvas untuk melukis gerak isyarat.

<canvas></canvas>

2) Laksanakan lukisan gerak isyarat melalui 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. Laksanakan pengecaman gerak isyarat pada bahagian belakang

Halaman belakang menerima data gerak isyarat dari hujung hadapan dan mengecam. ia , tentukan sama ada gerak isyarat itu betul.

// 读取用户的手势锁
$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. Kod pelaksanaan lengkap

Kod HTML:

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>

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

Ringkasan

Artikel ini memperkenalkan langkah khusus untuk melaksanakan log masuk gerak isyarat menggunakan PHP. Melalui kerjasama hujung hadapan dan belakang, pengguna boleh menggunakan gerak isyarat dan bukannya memasukkan kata laluan akaun yang menyusahkan apabila log masuk ke sistem pada peranti mudah alih, yang meningkatkan pengalaman dan keselamatan pengguna. Walaupun log masuk gerak isyarat agak mudah untuk dilaksanakan, masih terdapat banyak isu yang perlu dipertimbangkan dalam aplikasi sebenar teknologi, seperti keselamatan, kemudahan penggunaan, prestasi, dsb., yang perlu terus dioptimumkan dan diperbaiki dalam keadaan sebenar. aplikasi.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan log masuk isyarat dalam php. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!