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

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

PHPz

リリース： 2023-03-23 14:02:01

オリジナル

2911 人が閲覧しました

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

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

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

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

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

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

(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経由で送信します。

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

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

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 サイトの他の関連記事を参照してください。