refirio.org

Memo

メモ > 技術 > サービス: Google > Google reCAPTCHA
■Google reCAPTCHA

※ロボットによるアクセスを弾くことができる
※今新規に導入するならV3で良さそう
  ただし1ヶ月間に100万回を超えたり、1秒間に1000回を超えるようなキーのリクエストがある場合、有料のEnterprise版にする必要がある

reCAPTCHA
https://www.google.com/recaptcha/about/

reCAPTCHAとは？どんなツールで何ができるのかをご紹介します！ | MarkeTRUNK
https://www.profuture.co.jp/mk/column/33599

「reCAPTCHA」って？スパム対策に効果的なreCAPTCHAをフォームに入れてみた | BLOG | シナジーマーケティング株式会社
https://www.synergy-marketing.co.jp/blog/using_recaptcha_on_form

フォームの迷惑メール対策で有効なGoogle「reCAPTCHA」の導入方法とEnterpriseの違い【2021年版】 | ビギブ
https://www.beginnerweb.net/recaptcha-form.html

(新) Google reCAPTCHA V3 リキャプチャ設置、設定方法 - Blog | Samurai Web Works サムライウェブワークス -ロサンゼルスのウェブデザイン会社-
https://samurai-web-works.com/info/usefultools/how-to-set-up-google-recaptcha-v3/

(新) Google reCAPTCHA V2 リキャプチャ設置、設定方法 - Blog | Samurai Web Works サムライウェブワークス -ロサンゼルスのウェブデザイン会社-
https://samurai-web-works.com/info/usefultools/how-to-set-up-google-recaptcha-v2/■reCAPTCHA導入用のフォームメールを作成

以下のフォームメールを作成し、これにreCAPTCHAを導入するものとする

index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>フォームメール</title>
</head>
<body>
<h1>フォームメール</h1>
<form action="send.php" method="post">
    <dl>
        <dt>件名</dt>
        <dd><input type="text" name="subject" size="30" value=""></dd>
        <dt>送信者名</dt>
        <dd><input type="text" name="name" size="30" value=""></dd>
        <dt>メールアドレス</dt>
        <dd><input type="text" name="mail" size="30" value=""></dd>
        <dt>本文</dt>
        <dd><textarea name="message" cols="30" rows="5"></textarea></dd>
    </dl>
    <p><input type="submit" value="送信する"></p>
</form>
</body>
</html>


send.php
<?php

mb_language('Japanese');
mb_internal_encoding('UTF-8');

$body = '件名：' . $_POST['subject'] . "\n"
      . '送信者名：' . $_POST['name'] . "\n"
      . 'メールアドレス：' . $_POST['name'] . "\n"
      . '本文：' . $_POST['message'];

if (mb_send_mail(
    'refirio@gmail.com',
    'フォームからメールが送信されました',
    $body,
    'From: info@refirio.org'
)) {
    exit('Complete!');
} else {
    exit('Error!');
}
■reCAPTCHA v3を導入

以下にアクセスする

reCAPTCHA
https://www.google.com/recaptcha/admin/create

ラベル: refirio.org v3検証
reCAPTCHA タイプ: reCAPTCHA v3
ドメイン: refirio.org
オーナー: （自身のGmailアドレスが、はじめから設定済みになっていた）

「reCAPTCHA 利用条件に同意する」と「アラートをオーナーに送信する」にチェックを入れ、「送信」ボタンを押す
以下が表示される。シークレットキーは外部に漏らさないように注意

「refirio.org v3検証」が登録されました。

このサイトキーは、ユーザーに表示するサイトの HTML コードで使用します。
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

このシークレットキーは、サイトと reCAPTCHA 間の通信で使用します。
YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY


これで完了
この後「v3 Admin Console」にアクセスすると、合計リクエスト数や不審なリクエストのパーセンテージが表示されるようになった

フォームメールを以下のように調整
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX と YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY の部分は、
それぞれ自身のサイトキーとシークレットキーにする

index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>フォームメール</title>

<!-- headタグの最後に追加ここから -->
<script src="https://www.google.com/recaptcha/api.js?render=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></script> 
<script>
grecaptcha.ready(function() {
    grecaptcha.execute('XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', {action: 'homepage'}).then(function(token) {
        var recaptchaResponse = document.getElementById('g-recaptcha-response');
        recaptchaResponse.value = token;
    });
});
</script>
<!-- headタグの最後に追加ここまで -->

</head>
<body>
<h1>フォームメール</h1>
<form action="send.php" method="post">
    <dl>
        <dt>件名</dt>
        <dd><input type="text" name="subject" size="30" value=""></dd>
        <dt>送信者名</dt>
        <dd><input type="text" name="name" size="30" value=""></dd>
        <dt>メールアドレス</dt>
        <dd><input type="text" name="mail" size="30" value=""></dd>
        <dt>本文</dt>
        <dd><textarea name="message" cols="30" rows="5"></textarea></dd>
    </dl>

    <!-- 確認ボタンや送信ボタンの上に追加ここから -->
    <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
    <!-- 確認ボタンや送信ボタンの上に追加ここまで -->

    <p><input type="submit" value="送信する"></p>
</form>
</body>
</html>


send.php
<?php

mb_language('Japanese');
mb_internal_encoding('UTF-8');

/* メール送信の前に追加ここから */
$recaptcha = isset($_POST['g-recaptcha-response']) ? $_POST['g-recaptcha-response'] : null;

if (!$recaptcha){
    exit('reCAPTCHAにチェックを入れてください。');
}
$response = json_decode(file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY&response=' . $recaptcha), true);

if (intval($response['success']) === 1 && $response['score'] >= 0.5) {
    echo 'reCAPTCHAでの認証に成功しました。';
} else {
    exit('reCAPTCHAでの認証に失敗しました。');
}
/* メール送信の前に追加ここまで */

$body = '件名：' . $_POST['subject'] . "\n"
      . '送信者名：' . $_POST['name'] . "\n"
      . 'メールアドレス：' . $_POST['name'] . "\n"
      . '本文：' . $_POST['message'];

if (mb_send_mail(
    'refirio@gmail.com',
    'フォームからメールが送信されました',
    $body,
    'From: info@refirio.org'
)) {
    exit('Complete!');
} else {
    exit('Error!');
}


「success」の他に「score」の値も返され、これを使うことでより精度の高いロボット判定ができるとされている
ひとまず「スコアが0.5以上なら人間とみなす（0.5より小さければロボットとみなす）」の指定をしておくと良さそう

手動でGoogle reCAPTCHAを設定する
https://ichikawa-webdesign.com/archives/6531

reCAPTCHA v3 に対して Autify でテスト自動化してみた - Qiita
https://qiita.com/hiroxyy/items/fd5f3d5738f0fc770fc9■reCAPTCHA v2を導入

以下にアクセスする

reCAPTCHA
https://www.google.com/recaptcha/admin/create

ラベル: refirio.org v2検証
reCAPTCHA タイプ: reCAPTCHA v2
                  「私はロボットではありません」チェックボックス
ドメイン: refirio.org
オーナー: （自身のGmailアドレスが、はじめから設定済みになっていた）

「reCAPTCHA 利用条件に同意する」と「アラートをオーナーに送信する」にチェックを入れ、「送信」ボタンを押す
以下が表示される。シークレットキーは外部に漏らさないように注意

「refirio.org v2検証」が登録されました。

このサイトキーは、ユーザーに表示するサイトの HTML コードで使用します。
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

このシークレットキーは、サイトと reCAPTCHA 間の通信で使用します。
YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY


これで完了
この後「v3 Admin Console」にアクセスすると、合計リクエスト数や不審なリクエストのパーセンテージが表示されるようになった
（実装したのはv2だが表示された）

フォームメールを以下のように調整
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX と YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY の部分は、
それぞれ自身のサイトキーとシークレットキーにする

index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>フォームメール</title>

<!-- headタグの最後に追加ここから -->
<script src='https://www.google.com/recaptcha/api.js'></script>
<!-- headタグの最後に追加ここまで -->

</head>
<body>
<h1>フォームメール</h1>
<form action="send.php" method="post">
    <dl>
        <dt>件名</dt>
        <dd><input type="text" name="subject" size="30" value=""></dd>
        <dt>送信者名</dt>
        <dd><input type="text" name="name" size="30" value=""></dd>
        <dt>メールアドレス</dt>
        <dd><input type="text" name="mail" size="30" value=""></dd>
        <dt>本文</dt>
        <dd><textarea name="message" cols="30" rows="5"></textarea></dd>
    </dl>

    <!-- 確認ボタンや送信ボタンの上に追加ここから -->
    <div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"></div>
    <!-- 確認ボタンや送信ボタンの上に追加ここまで -->

    <p><input type="submit" value="送信する"></p>
</form>
</body>
</html>


send.php
※v3と同じ実装を行う
Memo

Advertisement
