こんにちは。
Wagtailでお問合せページを作りましたが、スパム対策用にGoogleが無料(1秒当たり1000件あるいは1カ月当たり100万件以上アクセスがある場合は有料となる)で提供しているreCaptchaV2を追加したいと思います。
こんなやつです↓
ユーザによる入力が不要になるV3やV2でもチェックボックス以外もあるので詳細はGoogleのページよりご確認ください。
Wagtailにはお問合せページに簡単にreCaptchaを追加出来るライブラリwagtail-django-recaptcha がありまして、これを使えば5分くらいで終わるはずなんです。
でも、、
そうなんですよね。使えなかったのです。設定は何度も見直しましたが諦めました。というわけで、django用のrecaptchaライブラリを使って、入れましたので、そのあたりをご紹介したいと思います。
reCaptchaのA公開鍵と秘密鍵取得
https://www.google.com/recaptcha/about/にアクセスします。
右上の「Admin Console」を選択します。
「+」を選択します。
以下を入力します。
ローカルで確認する場合は、localhost,127.0.0.1を入れましょう。本番環境に移行したら忘れず削除しましょう。
これで登録すると公開鍵と秘密鍵を教えてくれます。それは後で使います。
django-recaptcha2インストールと設定
django-recaptcha2のページのReadMe記載の通り、インストールします。
pip install django-recaptcha2
base.pyのINSTALLED_APPSに以下を追加します。
INSTALLED_APPS = ( ... 'snowpenguin.django.recaptcha2', ... )
base.pyに以下を追加します。(先ほど取得したreCaptchaの秘密鍵と公開鍵を入れます)
RECAPTCHA_PRIVATE_KEY = 'your private key' RECAPTCHA_PUBLIC_KEY = 'your public key'
django-recaptcha2の使い方
こちらを参考にしました。
https://github.com/eviltnan/freeturn
お問合せページで使っている、「AbstractEmailForm」クラスを継承して、「RecaptchaForm」クラスを作成します。
forms.pyというファイルを新規作成して、以下を入力します。
from snowpenguin.django.recaptcha2.fields import ReCaptchaField from snowpenguin.django.recaptcha2.widgets import ReCaptchaWidget from wagtail.contrib.forms.forms import FormBuilder from wagtail.contrib.forms.models import AbstractEmailForm from django.conf import settings CAPTCHA_FIELD_NAME = 'wagtailcaptcha' class RecaptchaFormBuilder(FormBuilder): @property def formfields(self): fields = super().formfields if settings.RECAPTCHA_PUBLIC_KEY: fields[CAPTCHA_FIELD_NAME] = ReCaptchaField(widget=ReCaptchaWidget(), label='Captcha') return fields class RecaptchaForm(AbstractEmailForm): form_builder = RecaptchaFormBuilder def process_form_submission(self, form): remove_captcha_field(form) return super().process_form_submission(form) class Meta: abstract = True def remove_captcha_field(form): form.fields.pop(CAPTCHA_FIELD_NAME, None) form.cleaned_data.pop(CAPTCHA_FIELD_NAME, None)
お問合せページのmodels.pyを「AbstractEmailForm」→「RecaptchaForm」に変更します。
ますは以下を追加します。(homeディレクトリの下にforms.pyを作成した場合)
from home.forms import RecaptchaForm
models.pyにあるクラスを変更します。
class ContactPage(AbstractEmailForm): ↓ class ContactPage(RecaptchaForm):
最後にhtmlでgoogleAPIのjsを呼び出し処理を追加します。
{% block extra_js %} {% endblock %}
これで完成です。
コメント