この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:3
ページ更新者:atom
更新日時:2018-11-09 17:35:17

タイトル: reCAPTCHA v2 使い方（サンプル付き）

本稿はreCAPTCHA v2の導入方法に関して説明します。

 

前提

Googleアカウントを所有していて、ログインしている。

 

サイト情報の登録

公式サイトにアクセスして「My reCAPTHA」を選択します。

 

続いて、ラベル（適当な名前）を入力、「reCAPTHA v2」を選択、「Send alerts to owners」を選択します。

「reCAPTHA v2」を選択すると更にreCAPTHAを導入するドメインの登録と利用規約の同意を促されます。

「Send alerts to owners」にチェックを入れることで何らかの異常があった場合メールが送信されます。

サイトにreCAPTHAを導入

登録が完了したら導入先のサイトの<head>タグに以下のコードを実装します。

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

 

以下、実装例となります。

reCAPTAHAの導入箇所である<form>タグ内に以下のコードを実装します。

※「data-sitekey」はご自分のSite Keyを入力してください。

<form ...>

        <div class="g-recaptcha" data-sitekey="*******************" data-callback="enableBtn"></div>

        <input name="btn" 
               type="submit" 
               value="button"
               disabled/>

</form>

<script type="text/javascript">
function enableBtn(code) {
        if(code !== ""){
                $(':submit[name=comment_btn]').removeAttr("disabled");
        }
}
</script>

reCAPTAHAを押したらsubmitボタンを押せるようにします。

 

以下、サーバーサイドの実装例です。（PHP）

$reCaptchaSecretKeyにはご自分のSecret Keyを指定してください。

<?php
$gRecaptchaResponse = $_POST["g-recaptcha-response"];
$reCaptchaSecretKey = "..."; 
$reCaptchaUrl = "https://www.google.com/recaptcha/api/siteverify?secret=".$reCaptchaSecretKey."&response=" . $gRecaptchaResponse;
$response = @file_get_contents($reCaptchaUrl);
$response = json_decode($response,true);

//var_dump($response);

if ($response['success'] == true){
    print "成功";
} else {
    print "失敗";
}
 
?>