So implementieren Sie die Gesten-Anmeldung in PHP-PHP-Problem-php.cn

Die Gesten-Anmeldung ist auf Mobilgeräten bereits weit verbreitet. Benutzer müssen nur die angegebene Geste auf dem Bildschirm ausführen, um sich beim System anzumelden, ohne umständliche Kontokennwörter eingeben zu müssen. In diesem Artikel wird erläutert, wie Sie die Gesten-Anmeldung mit PHP implementieren.

1. Vorbereitung

Zunächst sind einige Grundkenntnisse erforderlich. PHP hat sich zu einer der beliebtesten serverseitigen Skriptsprachen der Welt entwickelt, mit einem breiten Anwendungsspektrum und einer großen Entwickler-Community. Wenn Sie noch nicht viel über PHP wissen, empfiehlt es sich, zunächst einige Grundkenntnisse in PHP zu erlernen.

Zweitens sind einige Frontend-Kenntnisse erforderlich. Die Gesten-Anmeldung basiert auf Front-End-Technologie, die HTML, CSS, JavaScript und andere Technologien umfasst, sodass ein gewisses Verständnis des Front-Ends erforderlich ist.

Abschließend sind noch einige Algorithmenkenntnisse erforderlich. Bei der Gesten-Anmeldung geht es darum, das vom Benutzer gezeichnete Muster zu erkennen, daher sind einige Algorithmenkenntnisse erforderlich. Hier sind einige verwandte Algorithmen empfohlen: $1.Leap Motion$, $2.Golden Section Search$, $3.Longest Common Subsequence(LCS)$.

2. Implementierungsschritte

1. Erstellen Sie eine PHP-Umgebung. Um eine PHP-Laufumgebung zu erstellen, können Sie WAMP, XAMPP, MAMP und andere Software verwenden oder die Laufumgebung von Apache+Nginx+MySQL+PHP konfigurieren .

2. Entwerfen Sie eine Datenbank

Entwerfen Sie eine Benutzertabelle, um Benutzerkonto, Passwort, Geste und andere Informationen zu speichern. Die Tabellenstruktur kann wie folgt aussehen:

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='用户信息表';

Nach dem Login kopieren

3. Front-End-Implementierung des Gestenzeichnens

Verwenden Sie HTML, CSS und JavaScript, um die Front-End-Seite zu implementieren, die zum Anzeigen von Gestenmustern, zum Verarbeiten von Benutzerzeichnungsgesten und anderem verwendet wird Operationen.

1) Erstellen Sie eine Leinwand zum Zeichnen von Gesten.

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

Nach dem Login kopieren

2) Implementieren Sie das Zeichnen von Gesten über 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);

Nach dem Login kopieren

4. Das Backend implementiert die Gestenerkennung

Das Backend empfängt die Gestendaten vom Frontend und erkennt sie, um festzustellen, ob die Geste korrekt ist.

// 读取用户的手势锁
$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 {
  // 登录失败
}

Nach dem Login kopieren

5. Vollständiger Implementierungscode

HTML-Code:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

3. Zusammenfassung

In diesem Artikel werden die spezifischen Schritte zur Verwendung von PHP zur Implementierung der Gestenanmeldung vorgestellt. Durch die Zusammenarbeit von Front- und Back-End können Benutzer mithilfe von Gesten die mühsame Eingabe von Kontopasswörtern beim Anmelden am System auf mobilen Geräten ersetzen, was das Benutzererlebnis und die Sicherheit verbessert. Obwohl die Gesten-Anmeldung relativ einfach zu implementieren ist, gibt es bei der tatsächlichen Anwendung der Technologie noch viele Aspekte, die berücksichtigt werden müssen, wie z. B. Sicherheit, Benutzerfreundlichkeit, Leistung usw., die in der Praxis kontinuierlich optimiert und verbessert werden müssen Anwendungen.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Gesten-Anmeldung in PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!