PHPスライディング検証コードの実装原理について話しましょう

インターネットの急速な発展に伴い、検証コードはインターネット セキュリティの重要な手段となっています。中でもスライディング認証コードは、そのシンプルさ、操作の容易さ、安全性の高さから広く実用化されています。この記事では、PHP のスライディング検証コードの実装原理を紹介します。

1. スライディング検証コードの定義と適用

スライディング検証コードは、人間とコンピュータの相互作用を検証するコードの一種であり、その基本原理は、それを画面上に表示することです。インターフェイス 特定の写真やグラフィックを含むスライダー ユーザーは、スライダーを押したまま、検証コードのグラフィックの対応する位置にスライダーが接続されるまでドラッグする必要があります。このタイプの確認コードは、広告、ログイン、登録、コメントなど、ユーザーの識別が必要なシナリオで主に使用されます。

2. PHP スライディング検証コードの実装原理

PHP スライディング検証コードの実装は、主にフロントエンド表示とバックエンドの 2 つの部分に分かれています。検証。フロントエンド表示は主に HTML、CSS、JavaScript などのフロントエンド テクノロジによって実装され、バックエンド検証は PHP 言語に基づいてセッション メカニズムを使用して実装されます。

1. フロントエンド コードの実装

(1) HTML コード

まず、検証の基本構造を実装する HTML コードを記述する必要があります。コード。簡単な例を次に示します。

<div class="slide-verify">
    <div class="verify-img-box">
        <img src="verify.php" class="verify-img" id="verify-img">
        <div class="verify-btn-box">
            <span class="verify-btn" id="verify-btn"></span>
        </div>
    </div>
    <div class="verify-text">拖动滑块完成验证</div>
</div>

上記の HTML コードでは、div.slide-verify は検証コードの外側のコンテナであり、div.verify-img-box は検証コード イメージ img のコンテナです。 verify-img は検証コード イメージ、div.verify-btn-box はスライダーのコンテナ、span.verify-btn はスライダーです。 div.verify-text はプロンプト テキストです。

次のファイルを HTML に導入する必要があります:

<script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="jquery.ui.touch-punch.js"></script>
<script src="verify.js"></script>
<link rel="stylesheet" href="verify.css">

(2) CSS コード

CSS コードは主に検証コードのスタイルとレイアウトを実装するために使用されます。 . コードの一部のみをここに示します。 :

.slide-verify {
    position: relative;
    width: 300px;
    height: 100px;
}
.verify-img-box {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;
    width: 300px;
    height: 60px;
    border: 1px solid #ddd;
    background-color: #fafafa;
    overflow: hidden;
}
.verify-img {
    display: inline-block;
    width: 300px;
    height: 60px;
}
.verify-btn-box {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;
    width: 38px;
    height: 38px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    box-shadow: 0 0 3px #ddd;
    cursor: pointer;
}
.verify-btn {
    display: block;
    width: 36px;
    height: 36px;
    background-color: #34B5E5;
    border-radius: 50%;
}
.verify-text {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 5px;
    font-size: 12px;
}

上記の CSS コードは、主に検証コードの基本スタイル、スライダーのスタイル、背景色、影などを実装しています。

(3) JavaScript コード

JavaScript はユーザー インタラクションとデータ送信を実装します。主なコードは次のとおりです:

$(function() {
    var startX = 0, 
        distanceX = 0, 
        sliderLeft = 0, 
        sliderWidth = $('#verify-btn').width(),
        complete = false;
    $('#verify-btn').draggable({
        containment: '.verify-img-box',//滑块的移动范围
        axis: 'x',//只能在x轴方向上滑动
        drag: function(event, ui) {//滑块拖动过程
            distanceX = ui.position.left - startX;
            ui.position.left = sliderLeft + distanceX;
            //防止滑块越界
            if (ui.position.left <= 0) {
                ui.position.left = 0;
            } else if (ui.position.left >= sliderWidth) {
                ui.position.left = sliderWidth;
            }
        },
        stop: function(event, ui) {//滑块停止拖动
            startX = ui.position.left - 0;
            sliderLeft = ui.position.left - 0;
            //完成验证
            if (sliderLeft >= (sliderWidth - 2)) {//根据自己的需求设定，这里是滑动距离要大于等于（滑块宽度-2）
                complete = true;
                //提交验证
                $.ajax({
                    type: 'POST',
                    url: 'verify.php',
                    data: {
                        verify: 'true'
                    },
                    success: function(msg) {
                        alert(msg);//验证通过，执行相应操作
                    }
                });
            } else {//重置滑块位置
                complete = false;
                $('#verify-btn').animate({left: 0}, 200);
            }
        }
    });
});

上記の JavaScript コードは主にドラッグ アンド ドロップ機能を使用します。 jQuery UIライブラリのドラッグ機能はスライダーのドラッグ操作を実現し、検証結果をajax経由で送信します。

2. バックエンド コードの実装

バックエンドのメイン コードは次のとおりです:

session_start();
define('V_CODE', '1');//验证码标识符
if (isset($_POST['verify']) && $_POST['verify'] === 'true') {//验证操作
    //判断验证码是否正确
    if ($_SESSION[V_CODE] && intval($_SESSION[V_CODE]) === 1) {
        echo '验证通过';
    } else {
        echo '验证失败';
    }
    //验证完毕，清楚验证码
    unset($_SESSION[V_CODE]);
    exit;//结束
}
header('Content-type: image/jpeg');
$im = imagecreate(58, 30);
$bg_color = imagecolorallocate($im, mt_rand(200, 255), mt_rand(200, 255), mt_rand(200, 255));//背景色
$fc_color = imagecolorallocate($im, mt_rand(50, 200), mt_rand(50, 200), mt_rand(50, 200));//字体色
imagefill($im, 0, 0, $bg_color);
$confash_code = rand(1, 9);//验证码字符
$_SESSION[V_CODE] = $confash_code;
imagestring($im, 5, 12, 6, $confash_code, $fc_color);
for ($i = 0; $i < 150; $i++) {//干扰像素
    imagesetpixel($im, mt_rand(0, 58), mt_rand(0, 30), $fc_color);
}
for ($i = 0; $i < 3; $i++) {//干扰线
    imageline($im, mt_rand(0, 58), mt_rand(0, 30), mt_rand(0, 58), mt_rand(0, 30), $fc_color);
}
imagejpeg($im);
imagedestroy($im);

上記のコードでは、検証コードの識別は次のとおりです。最初にセッション メカニズム文字を通じて記録され、次に検証コード code 内でランダムな検証コード文字が生成され、$_SESSION 配列に格納されます。スライダー検証コードでは、検証結果が ajax を介して検証のためにバックグラウンドに送信されます。検証に合格した場合は、対応する操作を実行します。そうでない場合は、検証が失敗したことを示すメッセージが表示されます。

3. 概要

この記事では、主にフロントエンド表示とバックエンドの 2 つの部分に分かれている、PHP スライディング検証コードの実装原理を簡単に紹介します。検証。フロントエンド表示ではスライダー検証コードの基本機能をHTML、CSS、JavaScriptで実装し、バックエンド検証では検証コードの検証操作をPHPとセッションで実装します。実際のアプリケーションでは、より良いユーザー エクスペリエンスを提供するために、セキュリティと人間味のあるデザインをさらに強化する必要があることに注意してください。

以上がPHPスライディング検証コードの実装原理について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。