Google Cloud Platformを使ってreCAPTCHAを実装する方法

自分の動画投稿サイトを作って公開して1ヶ月半経過しましたが意外だったのが、スパムメールがやたら届くことです。放置しても問題ないと思いますが流石に何回も送られてはいい加減鬱陶しいので、ブロックする手段としてreCAPTCHAを使ってスパムを弾きたいと思います。このreCAPTHAGCPの実装方法が書かれたブログは多々ありますが、GCP(Google Cloud Plartform)の仕様が変わったのか、それらのやり方ではできないので、GCPのやり方を参考に実装していきたいと思います。

reCAPTHAとは?

まずいろんなサイトで目にするreCAPTCHAとはGoogleが提供しているサービスの一つで、主にロボットが自動的に行うものです。まぁ要は自動で送られてくるものかどうかを判断できるようにするということです。スコアボード型であり、よく目にするようなパズル式はV2と呼ばれるものです。パズル式との違いは、一回一回確認する必要がなく、「なんかこいつ怪しくね?」とGoogle側が判断したらチェックを行っていきます。V3があることを知ったとき、V2の更新がなくなるんじゃないかと思いましたが、今後も継続してやっていくようです。パズルするのはちょっと楽しいですし

省略事項

今回はあくまでreCAPTHAの登録の仕方を記すもので、GCP自体には深く関わりません。アクセスキーはコマンドでも作成が可能ですが、紹介したいのはダッシュボードで作成していきます。コマンドで作成したい場合は、GCP公式のサイトに書いてありますので確認してみてください。

キーの作成


reCAPTCHA Enterpriseを開き、キーの作成を押すと画像のようなページが開きます。

他のブログサイトで書かれているreCAPTHAの紹介とは違う点は、初めにV2とV3どちらかを選ぶかの選択はなく、さらにシークレットキーを用意する必要がなくなりました。代わりに画像のような項目が追加されました。

今回は実際にサイトに接続するので、全部オフにします。鍵を作成しましたら、IDをコピーしてください。

これでサイトキーの作成は完了しました!次にお問い合わせページにアクセスし、追加していきます。

<script src="https://www.google.com/recaptcha/api.js?render=Sitekey"></script>
    <script>
        $(document).ready(function () {
            grecaptcha.ready(function () {
                grecaptcha.execute(`Sitekey`, {action: 'submit'}).then(function (token) {
                    document.getElementById('recaptchaResponse').value = token;
                });
            });
        });
    </script>

script 部分はスコアベースのサイトキーを使用してgrecaptcha.enterprise.execute() を呼び出し、サイトキーから二分間一回限りの有効なトークンを作成します。

Script 部分が完成したら次にhtmlで作ったform内に次のように書き込みます

<input type="hidden" name="recaptcha_response" id="recaptchaResponse">

これで一通り完成です。これを実際に反映させたのがこちら

まだまだ研究し足りない部分でもありますのでが違和感があれば教えてください。こちらも気付き次第修正していきます。

宣伝

このほかにもDjangoで作ったものを公開したり、その過程で得た経験をブログにして公開しています。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA