こんにちは！増田拓海です。
今回は、reCAPTCHA v3を導入する方法を紹介していきたいと思います。
結構前にreCAPTCHA v2の導入方法は紹介したのですが、v3ではフロントエンドの実装方法が結構変わっているのでv3の方も紹介していきます。
reCAPTCHAをPythonに導入してみる(v2)
こんにちは！増田拓海です。今回はreCAPTCHAをバックエンドがPythonのサイトに導入する方法を紹介したいと思...
masublog.net
2018.11.07
フロントエンド
フロントエンドの実装ですが、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('');
});;
});
});このコードを先程作成したフォームの下に書き加えて完了です。
バックエンド
バックエンドはv2と変わっていないので下記記事を参考にしてみてください。
reCAPTCHAをPythonに導入してみる(v2)
こんにちは！増田拓海です。今回はreCAPTCHAをバックエンドがPythonのサイトに導入する方法を紹介したいと思...
masublog.net
2018.11.07
最後まで読んでいただきありがとうございました！！！
コメント