PHPでジェスチャーログインを実装する方法

ジェスチャー ログインは、モバイル デバイスではすでに非常に一般的になっており、ユーザーは、面倒なアカウント パスワードを入力することなく、画面上で指定されたジェスチャーをスライドするだけでシステムにログインできます。この記事では、PHPを使用してジェスチャーログインを実装する方法を紹介します。

1. 準備

まず、いくつかの基礎知識が必要です。 PHP は、幅広いアプリケーションと大規模な開発者コミュニティを備えた、世界で最も人気のあるサーバーサイド スクリプト言語の 1 つとなっています。 PHP についてまだあまり知らない場合は、まず PHP の基本的な知識を学ぶことをお勧めします。

第二に、フロントエンドの知識が必要です。ジェスチャー ログインは、HTML、CSS、JavaScript などのテクノロジを含むフロントエンド テクノロジに基づいて実装されるため、フロントエンドについてのある程度の理解が必要です。

最後に、アルゴリズムの知識が必要です。ジェスチャーログインには、ユーザーが描いたパターンを認識する方法が含まれるため、ある程度のアルゴリズムの知識が必要です。推奨される関連アルゴリズムは次のとおりです: $1.Leap Motion$、$2.Golden Section Search$、$3.Longest Common Subsequence(LCS)$。

2. 実装手順

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>

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 コード:

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 コード:

<?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. 概要

この記事では、次の内容を紹介します。 PHP を使用してジェスチャー ログインを実装するための具体的な手順。フロントエンドとバックエンドの連携により、ユーザーはモバイルデバイスでシステムにログインする際に、面倒なアカウントパスワードを入力する代わりにジェスチャーを使用できるため、ユーザーエクスペリエンスとセキュリティが向上します。ジェスチャーログインは実装が比較的簡単ですが、セキュリティ、使いやすさ、パフォーマンスなど、テクノロジーの実際の適用においては考慮すべき課題がまだ多く、実際には継続的に最適化および改善する必要があります。アプリケーション。

以上がPHPでジェスチャーログインを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。