簡単に素敵なキャプチャーを設置できるphpライブラリSecurimageの設置方法 | aoringo works

(1)

a o r i n g o w o r k s

簡単に素敵なキャプチャーを設置できるphpライブラリSecurimageの設置⽅法

⾃作フォームを作る必要があったのですが、wordpressプラグインで利⽤するにはちょっと痒いところに⼿が届かないところが多く・・・⼿ごろなものを探していました。

Securimage PHP Captcha?|?Free Captcha Script

Securimage is an open-source free PHP CAPTCHA script for generating complex images and CAPTCHA codes …

⼿軽に導⼊・カスタマイズできるキャプチャです。 Securimage PHP Captcha | Download

ダウンロードはこちらから。とりあえず、素直に最新バージョンを導⼊してみました。

内容物はこんな感じ。audioやbackgroundsなんてディレクトリは設定によって利⽤しないのでお好みでどうぞ。全てぶっこみます。

(2)

とりあえずこういう風な構成にしました。利⽤⽅法は簡単。と記述するだけです。securimage̲show.phpにキャプチャに必要な設定を記述し、それを画像として表⽰する形となります。簡単！さて、では早速これを良い感じにカスタマイズしていきましょう。securimageディレクトリの中にある securimage̲show.phpを開きます。コメントアウトされている部分、これが設定となります。コメントアウトを解除してそれぞれでよろしくやってくれよ、ということなんですね。粋です。最⼩限のコードを抜き出すとでＯＫっぽいです。

設定

メモついでに設定をまとめます。フォント指定。

1 <img src="./securimage/securimage_show.php" alt="CAPTCHA Image" />

1 require_once dirname(__FILE__) . '/securimage.php'; 2 $img = new Securimage();

(3)

↓ 表⽰モード変更この場合は計算式。答えを出すタイプですかね。⼤⽂字⼩⽂字区別しない回答率が上がるのでtrueにしないほうがよいとコメントされてますね。キャプチャ画像の⾼さと幅幅の指定に使われているのは⾼さと「M̲E」の掛け算だそうです。M̲Eは⾃然数ってやつらしいです。よく

1 $img->ttf_file = './Quiff.ttf';

1 $img->captcha_type = Securimage::SI_CAPTCHA_MATHEMATIC;

1 $img->case_sensitive = true;

1 $img->image_height = 90;

(4)

わかんないです。 PHP: 定義済み定数 – Manual M̲E = 2.7182818284590452354 = e（⾃然対数の底）揺らぎ度数字が⾼くなるほどはちゃめちゃな感じになるそう。試しに１で設定してみました。ぐんにゃりしてらっしゃいます。背景⾊⽂字⾊ 1 $img->perturbation = .75;

1 $img->image_bg_color = new Securimage_Color("#0099CC");

(5)

⽑の数三⼗本にしてみました。⽑の⾊⾚にしたつもりだけれどちゃんと処理できませんでした。英単語での指定はだめっぽいですね。画像タイプ jpegとして処理します。署名署名カラー 1 $img->num_lines = 8;

1 $img->line_color = new Securimage_Color("red");

1 $img->image_type = SI_IMAGE_JPEG;

1 $img->image_signature ="testtesttesttesttest";

(6)

⽂字の透過透過度辞書利⽤ランダムな⽂字ではなく英単語を出⼒します。個⼈的には英単語になじみはないので利⽤しないかなと思います。出⼒⽂字指定⽇本語は指定できませんでした・・・。

1 $img->use_transparent_text = true;

1 $img->text_transparency_percentage = 30;

1 $img->use_wordlist = true;

(7)

⽂字数 randを利⽤すれば毎回ランダムな⽂字数のコードを出⼒できますね。ノイズノイズの⾊機械読み取りの難易度を上昇させる効果がありそうです。また、ノイズの⾊を⽂字と同じ⾊にするとさらに効果的でしょう。背景画像の利⽤

フォーム設置

クイックガイドを参考にコードを記述。とりあえずそのままコピペ。

1 $img->code_length = rand(5,6);

1 $img->noise_level = 5;

1 $img->noise_color = $img->text_color;

1 $img->show('backgrounds/bg3.jpg');

1 <a onclick="document.getElementById('captcha').src = './securimage/securimage_show.php?' + Math.random(); return false" href="#">[ Different Image ]</a>

(8)

[ Different Image ]をクリックする事で画像を⼊れ替えることができます。便利すなあ。フォームのテストコードをとりあえずこういう形にしてみました。さらに、クイックガイドを読むと画像を出⼒する前にを加えよ、とのこと。あとは$̲POSTと$̲SESSIONをvar̲dumpで表⽰させます。ちゃんと表⽰されてますね。 $̲SESSION["securimage̲code̲disp"]が実際ディスプレイに表⽰されているコードだということがわかります。これ、⼀個前のコードが出てるようですね。これでコードを記⼊し送信すると、

1 <form action="" method="POST">

2 <img id="captcha" src="./securimage/securimage_show.php" alt="CAPTCHA Image" /> 3 <input type="text" name="captcha_code" size="10" maxlength="10" />

4 <a href="#" onclick="document.getElementById('captcha').src = './securimage /securimage_show.php?' + Math.random(); return false">[ Different Image ]</a> 5 <br>

6 <input type="submit" value="enter"> 7 </form>

1 <?PHP session_start(); ?>

1 <?PHP session_start(); ?> 2 <form action="" method="POST">

3 <img id="captcha" src="./securimage/securimage_show.php" alt="CAPTCHA Image" /> 4 <input type="text" name="captcha_code" size="10" maxlength="10" />

5 <a href="#" onclick="document.getElementById('captcha').src = './securimage /securimage_show.php?' + Math.random(); return false">[ Different Image ]</a> 6 <br>

7 <input type="submit" value="enter"> 8 </form> 9 <br /> 10 post<br> 11 <?php var_dump($_POST); ?><br> 12 session <br> 13 <?php var_dump($_SESSION) ?><br>

(9)

合いました。これを組み合わせて認証処理を記述します。・・・・・ちなみにこれ、だめな例です。こういう風にコードを変えて、空欄のままポストすると、通っちゃうんです。string型の場合、「未記⼊」という形でデータがあることになるようですね。めんどいです。というわけでこうしましょう。ここまで⽤⼼する必要があるのか？というのもありましょうが、これくらいやれば安⼼です。ワーニングも回避できますしおすし。さらに、securimage⾃⾝のエラーチェックコードがありますのでこれも追加します。最終的な全体のコードはこちら↓ 1 <?php

2 if (isset($_POST['captcha_code'])) {

3 if ($_POST['captcha_code'] == $_SESSION["securimage_code_disp"]["default"]) { 4 echo "okok";

5 } 6 } 7 ?>

1 <?php

2 if (isset($_POST['captcha_code'])) { 3 echo "okok";

4 if ($_POST['captcha_code'] == $_SESSION["securimage_code_disp"]["default"]) { 5

6 } 7 } 8 ?>

1 <?php if ($_POST['captcha_code'] !== "" && !isset($_POST['captcha_code'])) { if

($_POST['captcha_code'] == $_SESSION["securimage_code_disp"]["default"]) { echo "okok"; } } ?>

1 <?php include_once $_SERVER['DOCUMENT_ROOT'] . '/test/securimage/securimage.php'; $securimage =

new Securimage(); if ($securimage--->check($_POST['captcha_code']) == true) { 2 }

3 ?>

1 <?PHP session_start(); ?>

(10)

update: 2013/03/29 タグ: php, wordpress, まとめ, カスタマイズ, キャプチャ, プラグイリ | php

前のページ次ページ

Copyright aoringo works. WordPress CMS Theme WSC Project. 私の環境で記述されているので⼿直ししてください。

これらを通してようやく認証完了、となります。

・・・・しかしこれセッションスタート必要なのか・・・？どうも機械翻訳だとここらへんの理解が難しいですね。

参考

PHPでCAPTCHA(画像認証) Securimageの使い⽅ – hrendohの⽇記 Securimage PHP Captcha | Quickstart Guide

Securimage PHP Captcha | Customizing Securimage

4 <a onclick="document.getElementById('captcha').src = './securimage/securimage_show.php?' + Math.random(); return false" href="#">[ Different Image ]</a>

5

6 <input type="submit" value="enter" /></form> 7 <pre> 8 post 9 10 <?php var_dump($_POST); ?> 11 12 session 13 14 <?php var_dump($_SESSION) ?> 15

16 <?php if ($_POST['captcha_code'] != "" && isset($_POST['captcha_code'])) { if

($_POST['captcha_code'] == $_SESSION["securimage_code_disp"]["default"]) { include_once

$_SERVER['DOCUMENT_ROOT'] . '/test/securimage/securimage.php'; $securimage = new

Securimage(); if ($securimage--->check($_POST['captcha_code']) == true) { 17 echo "okok";

18 } 19 } 20 } 21 ?>