LoginSignup
1
0

More than 3 years have passed since last update.

Google reCAPTCHAをフォームに設置する

Last updated at Posted at 2021-01-13

スクリーンショット 2021-01-13 23.33.45.jpg

これを実装したくて、調べて、テストしてました。
忘れそうなので、備忘録も兼ねて記事にします。

reCAPTCHAのAPIキーを取得する

1) reCAPTCHAにログイン

reCAPTCHAのサイトにアクセスして、Googleアカウントでログイン。

2) サイトの登録

各種設定を行い、[作成]をクリックします。
reCAPTCHA-register.jpg

項目 設定内容
ラベル 覚えやすい名前を入力してください
reCAPTCHAタイプ 使いたいものを選択してください
ドメイン 設置するサイトのドメインを入力してください
オーナー メールアドレスが正しいか確認してください
reCAPTCHAに同意する チェックをONにします
アラートをオーナーに送信する ONにします

3) APIキーを取得する

APIキー画面が表示されたら、それぞれコピーしておきましょう。
また、シークレットキーは絶対に流出しないようにしましょう。

スクリーンショット 2021-01-13 22.21.35.jpg

管理画面>[設定]アイコン>[reCAPTCHAのキー]で後から確認することも可能です。

HTMLに設置する

設置したい箇所に<div class="g-recaptcha" data-sitekey="site key"></div>を入力します。
site keyにはAPIキーのサイトキーに上書きしてください。

contact.html
<form action="sample.php" method="post">
    <!-- 省略 -->
    <div class="g-recaptcha" data-sitekey="site key"></div>
    <input name="submit_buton" type="submit" id="submit_button" value="送信" class="fas">
</form>

設置はこれで完了です。

PHPで動作を記述する

サーバー側で、reCAPTCHAのチェックがONになっているか判定するコードを書く必要があります。

今回は、formを実行したときに呼び出すphpファイルの中に、以下のコードを追記してみました。
secret=secretKeysecretKey部分を、取得したシークレットキーに上書きしてください。

sample.php
<?php
$captcha;
if (isset($_POST['g-recaptcha-response'])) {
   $captcha = $_POST['g-recaptcha-response'];
}
if (!$captcha) {
   $alert = "<script type='text/javascript'>alert('reCAPTCHA にチェックを入れて下さい。');</script>";
   echo $alert;
   echo "<script type='text/javascript'>history.go(-1);</script>";
   exit;
}
$response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=secretKey&response=" . $captcha . "&remoteip=" . $_SERVER['REMOTE_ADDR']);

// reCAPTCHAが成功した場合の処理を以降に記述
// (例: お問い合わせ送信処理、投稿処理 等)

?>

チェックがONになっていない場合、
alert('reCAPTCHA にチェックを入れて下さい。');";でブラウザの通知を使ってチェックを促し、history.go(-1);で自動で前のページに戻す。という処理にしています。

また、JavaScriptを使うため、$alert = "<script type='text/javascript'>~~~</script>";と記述して、タグの中にJavaScriptコードを記述しています。

実行

チェックがOFFのままフォームを送信すると、通知ウィンドウが正しく表示されました。
スクリーンショット 2021-01-13 23.23.59.jpg

また、チェックがONのときは正常に送信されることを確認しました。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0