ラック
Home > ブログ > 記事 > 2018年11月 > reCAPTCHA v2をフォームに埋め込む

reCAPTCHA v2をフォームに埋め込む

カテゴリ: ホームページ,プログラム,メール

1ヶ月ほど前にreCAPTCHA v3がリリースされ、話題になりました。お問い合わせフォームのスパム対策は導入してみたいので、手を付けてみるか、と重い腰を上げた次第。

ただし、v3の挙動がイマイチ分かっていないのと、導入のコードをどう書けば良いのか分かっていないので、まず巷に情報が豊富にあるv2を試してみることにしました。

1. reCAPTCHAの設定

何はともあれgoogleアカウントでサインインし、reCAPTCHAのサイト(https://www.google.com/recaptcha/intro/)にアクセスします。

reCAPTCHAのページで必要な項目を埋める

v2にチェックを入れて、必要な項目を埋めていきます。

最後に「Register」ボタンをクリックして、登録完了です。

ドメインごとのページで情報を収集

ドメインごとのページで情報を収集2

登録を完了すると、そのドメイン用のページに移動します。ここでSite KeySecret Keyを控えます。

これで最初の準備は完了です。

2. サイトにコードを埋め込む

準備が完了したら、実際のフォームにコードと上記のサイトキー、シークレットキーを埋め込んでいきます。

まずフォームの入力部分でjsを読み込みます。

入力フォーム(例: index.php)

<script src="https://www.google.com/recaptcha/api.js"></script>

また、reCAPTCHAを表示させたい部分にタグを埋め込みます。このコードで、「私はロボットではありません」のあのチェックボックスが表示されるようになります。

<div class="g-recaptcha" data-callback="clearcall" data-sitekey="上記で控えたサイトキーをここに記述"></div>

js

入力フォームでクリックした際にreCAPTCHAが動作する(data-callback="clearcall"で呼び出される関数)ように、index.phpに読み込まれるjsに下記のコードを追記します。

function clearcall(code) {
    if(code !== ""){
        $(':submit[name=button]').removeAttr("disabled");
    }
}

今回はjQueryとして記述。ここまでが、入力画面でのコードです。

フォームの入力を受け付け、実際に送信するプログラム(例: finish.php)

最後に入力を受け付けて実際に送信を行うサーバサイドのプログラムで、reCAPTCHAの認証と判定を行います。

//チェック関数
function checkRecaptcha($val) {
    //認証
    $SECRET = "上記で控えたシークレットキーをここに記述";
    $resp = @file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$SECRET}&response={$val}");
    $respResult = json_decode($resp, true);
    if(intval($respResult["success"]) !== 1) {
        return false;
    }
    return true;
}

//処理
if(isset($_POST[RECAPTCHA])) {
    $captcha = htmlspecialchars($_POST[RECAPTCHA], ENT_QUOTES, 'UTF-8'));
}
else {
    $captcha = "";
    echo "reCAPTCHA が入力されていません。"
    exit;
}
$flag = checkRecaptcha($captcha);
if($flag === false) {
   echo "reCAPTCHA での認証が失敗しました。";
   exit;
}
//ここから先にメール送信処理

こんな感じで。

動作確認

動作確認

上記のコード(実際はもっと色々書いていますが)でreCAPTCHA v2が動作することを確認しました。

参考

タグ: javascript,php,手順

 



関連する記事一覧