PHPで認証コードの位置を変更する方法

Web サイトの発展に伴い、多くの Web サイトでの登録またはログインに必要なセキュリティ対策として検証コードが使用されるようになりました。ただし、検証コードの場所が設計要件を満たしていない場合があるため、今日は PHP で検証コードの場所を変更する方法について説明します。

まず、検証コードの生成原理を理解する必要があります。通常、検証コードは GD ライブラリを使用して PHP スクリプトで生成されます。GD ライブラリには、imagecreate()、imagecolorallocate()、imagestring() などの検証コードを生成するための関数が用意されています。

次に、これらの機能について説明します。別の検証コード生成方法を使用している場合は、その生成原理に従って変更できます。

1. 指定された場所に検証コードを配置します

検証コードは imagestring() 関数を通じてキャンバスに出力でき、それを使用して確認コードの場所。

以下は基本的な検証コード生成スクリプトです:

<?php
session_start();
header("Content-type: image/png");

$code_len = 4;
$width = 80;
$height = 25;

$charset = &#39;abcdefghkmnprstuvwxyABCDEFGHKMNPRSTUVWXY3456789&#39;;
$code = &#39;&#39;;
for ($i = 0; $i < $code_len; $i++) {
    $code .= $charset[mt_rand(0, strlen($charset) - 1)];
}
$_SESSION[&#39;verify_code&#39;] = strtoupper($code);

$img = imagecreate($width, $height);
imagecolorallocate($img, 255, 255, 255);  //设置背景颜色

$font_color = imagecolorallocate($img, mt_rand(0, 100), mt_rand(0, 100), mt_rand(0, 100));
for ($i = 0; $i < $code_len; $i++) {
    $font_size = mt_rand(12, 16);
    $angle = mt_rand(-10, 10);
    $f_x = ($width / $code_len) * $i + mt_rand(0, 5);
    $f_y = $height / 2 + mt_rand(-5, 6);

    imagestring($img, $font_size, $f_x, $f_y, $code[$i], $font_color);  //输出验证码
}

imagepng($img);
imagedestroy($img);

上記のコードでは、キャンバス上のランダムな位置に検証コードが出力されます。指定した場所の検証コードを修正したい場合は、設計要件に従って $f_x と $f_y の値を変更するだけです。

たとえば、キャンバスの中央にある検証コードを修正する場合、$f_x と $f_y の値を次のように変更するだけです。次のとおりです:

$f_x = ($width / 2 - (($font_size + 3) * $code_len) / 2) + ($font_size + 3) * $i;  // 控制水平方向位置
$f_y = $height / 2 + mt_rand(-5, 6);  // 控制竖直方向位置

実行後、キャンバスの中央に確認コードが表示されます。

2. 指定された HTML 要素内に検証コードを配置します

指定された HTML 要素内に検証コードを配置する場合は、次のようにしてキャンバスの位置を制御できます。 CSS および配置キャンバスは HTML 要素に埋め込まれます。

たとえば、検証コードを <div id="verify"> 要素内に配置する場合は、CSS に次のコードを追加できます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">#verify {     position: relative;     background-color: #fff;  /* 图片背景色 */     width: 100px;     height: 32px;     text-align: center; } #verify img {     position: absolute;  /* 设置验证码图片位置 */     top: 0;     left: 0; }</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>次に、HTML に次のコードを追加します。 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div id=&quot;verify&quot;&gt;     &lt;img src=&quot;verify.php&quot; alt=&quot;验证码&quot;&gt; &lt;/div&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><p> 上記のコードにより、生成された検証コードを指定された要素に埋め込むことができ、その位置は CSS によって制御されます。 </p><ol start="3"><li>検証コードを背景に配置します</li></ol><p>場合によっては、背景に検証コードを配置する必要がある場合があります。たとえば、背景が大きな画像である場合などです。 , 私たち 確認コードは画面の隅に配置する必要があります。 </p><p>この関数を実装するには、まず検証コードなしで背景画像を生成し、次に検証コードを背景に描画します。 </p><p>以下は基本的な実装です: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;?php session_start(); header(&quot;Content-type: image/png&quot;); $width = 300; $height = 200; $img = imagecreate($width, $height); imagecolorallocate($img, 255, 255, 255);  //设置背景颜色 // 生成不带验证码的背景图 $bg_img = imagecreatefromjpeg('bg.jpg'); imagecopy($img, $bg_img, 0, 0, 0, 0, $width, $height); $code_len = 4; $charset = 'abcdefghkmnprstuvwxyABCDEFGHKMNPRSTUVWXY3456789'; $code = ''; for ($i = 0; $i &lt; $code_len; $i++) {     $code .= $charset[mt_rand(0, strlen($charset) - 1)]; } $_SESSION['verify_code'] = strtoupper($code); // 将验证码写入背景图中 $font_color = imagecolorallocate($img, mt_rand(0, 100), mt_rand(0, 100), mt_rand(0, 100)); for ($i = 0; $i &lt; $code_len; $i++) {     $font_size = mt_rand(12, 16);     $angle = mt_rand(-10, 10);     $f_x = mt_rand(0, $width - ($font_size + 3));     $f_y = mt_rand(0, $height - $font_size);     imagestring($img, $font_size, $f_x, $f_y, $code[$i], $font_color);  //输出验证码 } imagepng($img); imagedestroy($img);</pre><div class="contentsignin">ログイン後にコピー</div></div><p>上記のコードでは、最初に元の背景画像 <code>bg.jpg をロードし、それから新しいキャンバスにコピーします。 、次に検証コードを生成し、キャンバスに挿入します。 (この例で生成された検証コードはランダムな位置にあることに注意してください。目的を達成するには、いくつかの変更を行う必要があります。)

4. 概要

この記事のはじめに 検証コードの位置を変更するには、PHPで生成した検証コードを元に出力位置を変更して実装する方法と、HTML要素に検証コードキャンバスを埋め込む方法の3通りがあります。 3 つ目は、検証コードキャンバスを HTML 要素に埋め込み、CSS で位置を制御する方法 1 つ目は、検証コードの位置が一致するように背景に検証コードを追加する方法背景。さまざまな実装方法がさまざまなシナリオに適しており、実際のニーズに応じて最適なソリューションを選択できます。

以上がPHPで認証コードの位置を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。