画像認証とは

ロボットによる迷惑投稿を防止する仕組みで画像に表示された文字を入力欄に正しく記載し送信しない限り投稿が完了しません。今回は以下のようなよく見かけるタイプの画像認証をPHPライブラリのSecurimageで実装してみました。キャプチャ2.png

Securimageをインストールしてみる

公式サイトにアクセスしてSecurimageをダウンロードします。落ちてきたzipファイルを展開したらsecurimageというフォルダがあるので、それを丸ごと任意の場所へ設置するだけです。（今回はサンプルなのでドキュメントルートの直下に置きました）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>画像認証サンプル</title>
</head>
<body>
<?php require_once('./sample.php'); ?>
<form method="post">
<p><img id="captcha" src="./securimage/securimage_show.php"></p>
<p><input type="text" name="captcha_code" placeholder="表示されている文字を入力してください"></p>
<p><button type="button" id="button">画像再生成</button></p>
<p><input type="submit" value="認証"></p>
</form>
<script src="./sample.js"></script>
</body>
</html>

生成される画像によっては認識が困難なものもあるので、再生成できるようにJavaScriptを設置します。

const button = document.getElementById('button');
button.addEventListener('click', function() {
    const captcha = document.getElementById('captcha');
    captcha.src = './securimage/securimage_show.php?' + Math.random();
}, false);

画像認証の判定プログラムです。 $securimage->check($_POST['captcha_code'])の返り値が真偽値となっており、その値によって認証を判定しています。

require_once './securimage/securimage.php';
$securimage = new Securimage();

if(isset($_POST['captcha_code'])) {
  if($securimage->check($_POST['captcha_code']) === true) {
    echo '画像認証OK';
  } else {
    echo '画像認証エラー';
  }  
}

オプションについて

Securimageにはいろいろなオプションが標準で用意されています。使い方はsecurimage_show.phpの$img->show();より前に、適用したいオプションを記載するだけです。securimage_show.php内には既にサンプルとしてオプションが記載されています。

// 高さで大きさを指定する
$img->image_height    = 90;
$img->image_width     = $img->image_height * M_E;

// 文字のゆがみの比率
$img->perturbation  = .75;
// ラインの数
$img->num_lines     = 8;

// ラインの色
$img->line_color      = new Securimage_Color("#ff8888");
// テキストの色
$img->text_color      = new Securimage_Color("#ff6666");
// 背景の色
$img->image_bg_color  = new Securimage_Color("#ffffff");

まとめ

ライブラリを使うことで、非常に簡単に画像認証を実装する事ができました。生成される画像についてはフォントやサイズ、色等を調整することが可能なので、サイトのイメージも損なうことなく実装する事ができそうです。画像認証を管理画面のログインフォーム等に実装する事でセキュリティレベルの向上が期待できます。(ランディングページなどのフォームに実装する際はCVRが低下しないか検証する必要がありそうです。) ちなみに、個人的にはgoogleのreCAPTCHAより導入のハードルは低いように感じました。

画像認証の忘備録でした！