CakePHP5入門【CakePHP5実用編⑲】お試しユーザ登録でCAPTCHA
Ａ子
あれって、いたずら（もしくは迷惑行為等）を行うBot対策だよね？
Ｃ菜
ほんと困ったものですよ～
Ａ子
（手作業での登録を強制するって意味で…）
Ｂ美
んー、以前は私が主導したけど、今回はあなたたちでやってみなさい
過去の記事を参照しても良いから…
（【CakePHP5応用編⑥】を参照）
Ａ子
んじゃ、やってみるかー
まずはcomposerでライブラリを組み込むよ
|
cd html/authapp[Enter]
composer require dereuromark/cakephp-captcha[Enter] |
Ｃ菜
|
bin/cake plugin load Captcha[Enter]
bin/cake migrations migrate -p Captcha[Enter] bin/cake cache clear_all[Enter] |
これで「authapp/config」の中に「plugins.php」が生成されて、データベーステーブルも追加されましたよ～
Ａ子
|
'Captcha' => [
'engine' => 'Default', ], |
Ｃ菜
|
parent::initialize();
$this->loadHelper('Captcha.Captcha'); |
Ａ子
（具体的には「templates/Applicants/index.php」だね）
|
<tr class="wide">
<td style="text-align: left;vertical-align: middle;">計算結果は？</td> <td> <?= $this->Captcha->render() ?> </td> </tr> |
と
|
<tr class="narrow"><td style="padding: 0;font-size: x-small;"> </td></tr>
<tr class="narrow"> <td style="text-align: left;vertical-align: middle;">計算結果は？</td> </tr> <tr class="narrow"> <td> <?= $this->Captcha->render() ?> </td> </tr> |
の二ヶ所だね
（「wide」と「narrow」があるから面倒くさい…）
あ、JavaScriptについても必要なコードを追加したよ
（でないと、「wide」のときに値を取得できないからね）
Ｃ菜
まずはuse文を記述して～
| use Cake\ORM\TableRegistry; |
次に「initialize」メソッド自体を追加しましょう～
（存在しなかったので、丸ごとコピーです～）
|
public function initialize(): void
{ parent::initialize(); $this->loadComponent('Captcha.Captcha'); } |
Ａ子
|
public function confirm()
{ ・・・ if ($this->request->is('post')) { $email = $this->request->getData('email'); $password = $this->request->getData('password'); $handle_name = $this->request->getData('handle_name'); ・・・ |
の箇所を
|
public function confirm()
{ ・・・ if ($this->request->is('post')) { $captcha_result = $this->request->getData('captcha_result'); $captcha_id = $this->request->getData('captcha_id'); $captchasTable = TableRegistry::getTableLocator()->get('Captcha.Captchas'); $captcha = $captchasTable->find()->where(['id' => $captcha_id])->first(); if ($captcha_result != $captcha->result) { //認証NG $this->Flash->error('CAPTCHA認証に失敗しました。'); return $this->redirect(['action' => 'index']); } else { //認証OK $email = $this->request->getData('email'); $password = $this->request->getData('password'); $handle_name = $this->request->getData('handle_name'); ・・・ } ・・・ |
…って感じに変更するよ
（赤字部分が追加箇所ね）
てか、「画像投稿掲示板」のコードをコピペしただけだけど…（苦笑）
（【CakePHP5応用編⑥】を参照）
Ｂ美
ライブラリのバージョンが上がったのが原因だと思うけど、前のコードのままでは動かないわよ
Ａ子
どういうことよ
Ｂ美
|
public function confirm()
{ ・・・ if ($this->request->is('post')) { $captcha_result = $this->request->getData('captcha_result'); $captcha_id = $this->request->getData('captcha_uuid'); $captchasTable = TableRegistry::getTableLocator()->get('Captcha.Captchas'); $captcha = $captchasTable->find()->where(['uuid' => $captcha_id])->first(); if ($captcha_result != $captcha->result) { //認証NG $this->Flash->error('CAPTCHA認証に失敗しました。'); return $this->redirect(['action' => 'index']); } else { //認証OK $email = $this->request->getData('email'); $password = $this->request->getData('password'); $handle_name = $this->request->getData('handle_name'); ・・・ } ・・・ |
要するに、以前は主キー項目である「id」が隠しパラメータとして送られてきたんだけど、現在は「uuid」というフィールド値が送られてくるの
（だからデータベース検索でも「uuid」を検索するってわけ）
Ｃ菜
「captcha_result」はJavaScriptで不要な部分を削りましたけど、「captcha_uuid」のほうって同様の処理を施さなくても良いんでしょうか～？
Ｂ美
「wide」と「narrow」の両方で、問題なく「captcha_uuid」の値が送られてくることは確認できてるからね
（JavaScriptのコードを追記しなくても…）
Ａ子
それじゃ、実行確認してみよう
Ｃ菜
計算結果に「正しい値」「間違った値」「空白（何も入力しない）」等のテストを「wide」と「narrow」の両方でやってみました～
（全て完璧です～）
Ａ子
動作としては完璧でも、見栄えが…（苦笑）
入力欄のデザインに統一感が無いよ
Ｃ菜
CAPTCHA入力欄に「class」や「style」の指定をすれば良いんですよね～？
Ｂ美
ビューファイル（templates/Applicants/index.php）内に「render」メソッドを記述する際、引数として連想配列を渡せば良いの
| <?= $this->Captcha->render() ?> |
を
| <?= $this->Captcha->render(['class' => 'input is-info is-normal', 'style' => 'width: 100px;']) ?> |
…って感じね
Ａ子
あー、もう一つ要望を言うならば
「計算式の右側にイコールが欲しい」
Ｂ美
もしも将来、このライブラリをバージョンアップした場合、元に戻っちゃうかも…
Ａ子
Ｂ美
変更箇所は「vendor/dereuromark/cakephp-captcha/src/View/Helper/CaptchaHelper.php」の中の「control」メソッドよ
|
public function control(array $options = []) {
$options += [ 'label' => ['escape' => false, 'text' => $this->image()], 'escapeLabel' => false, 'autocomplete' => 'off', 'value' => '', ]; return $this->Form->control('captcha_result', $options); } |
の箇所を
|
public function control(array $options = []) {
$options += [ 'label' => ['escape' => false, 'text' => $this->image().' = '], 'escapeLabel' => false, 'autocomplete' => 'off', 'value' => '', ]; return $this->Form->control('captcha_result', $options); } |
って感じで、赤字部分を追記してね
（「 」は空白文字って意味だから、実質「=」をくっつけてるだけなんだけどね）
↓
Ａ子
良いじゃん
Ｃ菜
Ｂ美
|
１．composerでライブラリをインストール
２．プラグインのロード ３．データベーステーブルのマイグレート ４．キャッシュクリア |
ここまではSSH接続してからコマンド実行すること
Ａ子
んで、そのあとはSCPを使って更新したファイルをアップロードするだけだね
Ｃ菜
|
１．config/plugins.php
２．src/View/AppView.php ３．templates/Applicants/index.php ４．templates/Users/login.php ５．src/Controller/ApplicantsController.php ６．vendor/dereuromark/cakephp-captcha/src/View/Helper/CaptchaHelper.php |
ですね～
あ、４番については、一時的に「お試しユーザ登録」へのリンクをはずしてたのを元に戻しただけです～
Ａ子
Ｃ菜
（Ver.1.4.0です～）
Ｂ美
Ａ子
割と有用な情報もあった（uuidの話やrenderメソッドの引数等）と思うんだけど、読者の皆さんはどうだったかな？
Ｂ美
Ｃ菜
