reCAPTCHA v3を導入する方法

Python

2020.03.09 2019.03.26

こんにちは！増田拓海です。

今回は、reCAPTCHA v3を導入する方法を紹介していきたいと思います。

結構前にreCAPTCHA v2の導入方法は紹介したのですが、v3ではフロントエンドの実装方法が結構変わっているのでv3の方も紹介していきます。

reCAPTCHAをPythonに導入してみる(v2)

こんにちは！増田拓海です。今回はreCAPTCHAをバックエンドがPythonのサイトに導入する方法を紹介したいと思います。reCAPTCHAとは？reCAPTCHAとはBotからのアクセスを防げるツール(?)です。よく会員...

フロントエンド
1. スクリプト
バックエンド

フロントエンド

フロントエンドの実装ですが、jqueryとGoogleのreCAPTCHAライブラリが必要です。読み込んでいない場合は下記コードで読み込んでおいてください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
<script src="https://www.google.com/recaptcha/api.js?render=サイトキー">

次にフォームを準備します。今回は簡単に下のようなコードを使います。

<form action="cgi-bin/check.py" method="POST">
<input type="text" name="name">
<input type="submit" >
</form>

スクリプト

次にメインのスクリプト部を組んでいきます。

$(function() {
    grecaptcha.ready(function() {
        grecaptcha.execute('サイトキー', {action: 'homepage'}).then(function(token) {
            $('form').prepend('<input name="g-recaptcha-token" type="hidden" value="' + token + '">');
        });;
    });
});

このコードを先程作成したフォームの下に書き加えて完了です。

バックエンド

バックエンドはv2と変わっていないので下記記事を参考にしてみてください。

reCAPTCHAをPythonに導入してみる(v2)

バックエンドでg-recaptcha-tokenの値を受け取りシークレットトークンを使って確認することで実装できます。

最後まで読んでいただきありがとうございました！！！