こんにちは!増田拓海です。
今回は、reCAPTCHA v3を導入する方法を紹介していきたいと思います。
結構前にreCAPTCHA v2の導入方法は紹介したのですが、v3ではフロントエンドの実装方法が結構変わっているのでv3の方も紹介していきます。

reCAPTCHAをPythonに導入してみる(v2)
こんにちは!増田拓海です。今回はreCAPTCHAをバックエンドがPythonのサイトに導入する方法を紹介したいと思います。reCAPTCHAとは?reCAPTCHAとはBotからのアクセスを防げるツール(?)です。よく会員...
フロントエンド
フロントエンドの実装ですが、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)
こんにちは!増田拓海です。今回はreCAPTCHAをバックエンドがPythonのサイトに導入する方法を紹介したいと思います。reCAPTCHAとは?reCAPTCHAとはBotからのアクセスを防げるツール(?)です。よく会員...
バックエンドでg-recaptcha-tokenの値を受け取りシークレットトークンを使って確認することで実装できます。
最後まで読んでいただきありがとうございました!!!
コメント