CakePHPでreCAPTCHAによる画像認証を実装するまで

labocho — Tue, 12 May 2009 19:05:57 +0000

GWからCakePHPでつくりはじめたWebサービスで、画像認証を実装したいと思って、以前から気になっていたreCAPTCHAを導入した。びっくりするくらい簡単だったけど、意外とreCAPTCHA実装の記事が少ないので、丁寧に解説します。

reCAPTCHAってなんだって人はこちらをどうぞ。

秋元@サイボウズラボ・プログラマー・ブログ: reCAPTCHA – キャプチャを利用した人力高性能OCR

なお、CakePHPは1.2を使ってます。

1. まずは登録

reCAPTCHAを使うにはWebサイトでアカウントを作る必要があります。

まずはhttp://recaptcha.net/へアクセスし、「USE reCAPTCHA ON YOUR SITE」へ。

「Sign up Now!」へ。

「Sign up」へ。

ユーザー名、パスワード、パスワード再入力、連絡先メールアドレス、そしてもちろんreCAPTCHAによる画像認証を入力して「Sign up Now!」へ。

次に、どのドメインでreCAPTCHAを使うかを聞いてきます。たぶんここで入れたドメイン以外からの検証リクエストは受け付けないんでしょう(少なくともlocalhostからは受付けてましたが)。

親ドメインを入れとけばサブドメインでも使えるし、一つのアカウントで複数のドメインを登録できるし、大量のドメインから使うんだったら「Enable this key on all domains (global keys)」にチェックを入れとけば、ドメインの制限は受けないようです。

入力したら「Create Key」へ。

これで登録完了です！

「Public Key」(公開鍵)と「Private Key」(秘密鍵)は実装のさいに使用します。「Public Key」(公開鍵)は別に誰に知られてもまったく問題ないですが、「Private Key」(秘密鍵)は絶対に知られないようにしましょう(でないと認証の意味ないです)。

なお、ここで表示される情報はメニューの「MY ACCOUNT」からいつでも確認できます。

2. PHP用のライブラリを用意する

メニューの「RESOURCES」に「PHP」の項目があるので、そこへ。

「Download」へ。

Google Codeに飛ぶのでこのzipをダウンロードします。

zipを展開するといくつかファイルが出てきます。

この中の「recaptchalib.php」をCakePHPの/app/vendors下に置いておきます。

3. View側の実装

View側では

の中に入るように、以下のコードを書きます。

App::import('Vendor', 'recaptchalib'); $publickey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; echo recaptcha_get_html($publickey);

1行目はさきほどコピーしたライブラリの読み込み。

2行目はreCAPTCHAのPublic Key (公開鍵)を書きます。

3行目はreCAPTCHAのウィジェットを表示します。

たったこれだけでOK!

4. Controller側の実装

Controller側では先ほどのViewのformから呼ばれるアクション内に以下のコードを書きます。

App::import('Vendor', 'recaptchalib'); $privatekey = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; $resp = recaptcha_check_answer( $privatekey, $_SERVER["REMOTE_ADDR"], $this->params['form']['recaptcha_challenge_field'], $this->params['form']['recaptcha_response_field']);

1行目はやはりライブラリの読み込み。

2行目はreCAPTCHAのPrivate Key (秘密鍵)を書きます。

3行目はユーザーが入力した文字列を検証します。

これで$resp->is_validに検証結果が入るので、あとはお好きなように。

CakePHPで jQuery Star Rating Plugin を使う。

labocho — Tue, 17 Feb 2009 15:02:48 +0000

今回の記事は、CakePHPで jQuery Star Rating Plugin を使いたい人にしか役に立たない情報です。ニッチです。

いまCakePHPでWebアプリケーションを作ってて(趣味です)、スターレイティングを導入しようと思い、いくらか調べて、「jQuery Star Rating Plugin」が良さそうという結論に達した。

で、さっそく実装して試してみてたら、inputのnamｅがサンプルのままの「star」だと問題なく動作するんだけど、CakePHPのdata[モデル名][カラム名]の形式のnameにすると、表示もPOSTもうまくいかない。

調べてみると、jquery.rating.js は、inputのnameをもとにクラスやなんかを作るんだけど、そのさいに[ ]をエスケープしてる。

//99行目 var n = (this.name || 'unnamed-rating').replace(/\[|\]/, "_");

まずこのエスケープがまずくて、最初の一個めしか置換してくれないので、直す。

//gオプションを追加 var n = (this.name || 'unnamed-rating').replace(/\[|\]/g, "_");

で、値をPOSTするためにhiddenのinputを作ってる。

//111行目 $.rating.groups[n].valueElem = $('');

ここはエスケープしちゃうとCakePHPで$this->dataでアクセスできないので、エスケープする前の名前にする。

//さっきのnの宣言部からエスケープ前の名前をもってくる $.rating.groups[n].valueElem = $('');

これでテストしたら、表示・挙動・POSTデータいづれも問題なさそうだった。コードを熟読してないので問題あるかもだけど。