Google reCAPTCHAでログイン認証の強化。

#reCAPTCHAとは
ランダムの質問とその質問に当てはまるイメージを人に選択させる方法でロボットによる大量の投稿など本当に人によるアクションかを判断するためのシステムです。

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/108475/f15dc16a-0a11-1cec-2435-8b501942dc67.png)

![recaptcha.PNG](https://qiita-image-store.s3.amazonaws.com/0/108475/42609478-89c6-ea98-5c12-081eddfa2a18.png)

詳細内容はこちらを参考にしてください。
https://www.google.com/recaptcha/intro/index.html

##今回のテスト環境
VirtualBox　CentOS6.5 CakePHP2.8

##まずはアカウントを作りましょう。Googleのメールアカウントを持っている方はそのアカウントで大丈夫です。以下のURLにアクセスしてください。
https://www.google.com/recaptcha/admin/create

##サイトキー、セキュリティーを作成します。
左のメニューから「Create an API Key」をクリックします
APIキーは何個も作られるので、ST環境用、本番用などでキーを分けたほうがいいと思います。
![menu.PNG](https://qiita-image-store.s3.amazonaws.com/0/108475/32fb9f05-a7e2-1dfb-6851-eb6d5e037d8b.png)

##ドメイン登録
Labelには適当に他のAPIキーと区別できる名前で大丈夫です。
DomainsにはreCAPTCHAを表示するサイトのドメイン名を入力します。今回はローカルでやってるのでローカルIPを入力しました。
![setting.PNG](https://qiita-image-store.s3.amazonaws.com/0/108475/f3cbe5f0-adf1-eeb9-3e49-9b809f7f1809.png)

##保存すると以下の画面が表示されます
サイトキーとセキュリティーキー、Step1にscriptとhtmlまで生成されるのでこれをそのままコピーするだけでreCAPTCHAのクライアント側の処理は終わります。もちろんdivタグにoptionを追加してもいいです。詳細optionの使い方は今度整理しようと思います。

![register1.PNG](https://qiita-image-store.s3.amazonaws.com/0/108475/f6f2ea84-c06a-9359-9e3d-762bbe13c078.png)

```recaptcha.html
<html>
<head>
<title></title>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<div class="g-recaptcha" data-sitekey="こちらに自分のサイトキーを入力"></div>
</body>
</html>
```
これだけで簡単にreCAPTCHAが表示されます。

##次はログイン画面を作りましょう。
基本的なログイン画面などのコードは以下の参考にしてください。
今回は簡単にログイン画面にID・パスワードとreCAPTCHAを入れで認証が成功したか失敗したかのメッセージだけ表示するようにします。

http://book.cakephp.org/2.0/ja/tutorials-and-examples/blog-auth-example/auth.html

```UsersController.php
    public function login() {
        if ($this->request->is('post')) {
            //RECAPTCHAからのResponseデータを受け取る
            $recaptchaResponse = $_POST['g-recaptcha-response'];
            $secretKey = "こちらに自分のセキュリティーキーを入力";

　　　　　　　　//RECAPTCHA認証確認
            $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secretKey}&response={$recaptchaResponse}");

            $responseKeys = json_decode($response,true);
            //認証に成功した場合successにtrueが入力される 
            if(intval($responseKeys["success"]) !== 1) {
                $this->Session->setFlash('「私はロボットではありません」をチェックしてください。');
            } else {
                //reCAPTCHA認証に成功したらID・パスワードをチェック
                if ($this->Auth->login()) {
                    $this->Session->setFlash('ログインに成功しました。');
                } else {
                    $this->Session->setFlash('ユーザー名かパスワードが間違っています。');
                }
            }

        }
    }
```


> file_get_contentsでエラーが出た場合は以下の設定がOnになっているか確認
php.ini
allow_url_fopen = On


```html+php:login.ctp
<?php
//reCAPTCHAのscript追加
echo $this->Html->script( 'https://www.google.com/recaptcha/api.js', array( 'inline' => false));
?>
<div class="users form">
<?php echo $this->Form->create('User'); ?>
    <fieldset>
        <?php echo $this->Form->input('username');
        echo $this->Form->input('password');
    ?>
    <div class="g-recaptcha" data-sitekey="自分のサイトキー"></div>
    </fieldset>
    <?php echo $this->Session->flash(); ?>
<?php echo $this->Form->end(__('Submit')); ?>
</div>
```


###これだけで完成です。

![screen.PNG](https://qiita-image-store.s3.amazonaws.com/0/108475/dbdfff19-768f-1a5a-0168-60eb36212c0d.png)

![screen2.PNG](https://qiita-image-store.s3.amazonaws.com/0/108475/14b69372-9637-38b8-d349-b9e2dd4d4286.png)

![screen3.PNG](https://qiita-image-store.s3.amazonaws.com/0/108475/b90473c2-bda9-ef7c-9dbc-ac56060987b3.png)

![screen4.PNG](https://qiita-image-store.s3.amazonaws.com/0/108475/31971871-c294-b6ae-d17f-f74251146bea.png)

###参考サイト
https://syncer.jp/how-to-introduction-recaptcha