Wagtailのお問合せページにスパム対策用reCaptchaを追加する

こんにちは。

Wagtailでお問合せページを作りましたが、スパム対策用にGoogleが無料（1秒当たり1000件あるいは1カ月当たり100万件以上アクセスがある場合は有料となる）で提供しているreCaptchaV2を追加したいと思います。

こんなやつです↓

ユーザによる入力が不要になるV3やV2でもチェックボックス以外もあるので詳細はGoogleのページよりご確認ください。

Wagtailにはお問合せページに簡単にreCaptchaを追加出来るライブラリwagtail-django-recaptcha がありまして、これを使えば５分くらいで終わるはずなんです。

でも、、

動かないなぁ・・・

そうなんですよね。使えなかったのです。設定は何度も見直しましたが諦めました。というわけで、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 %}

これで完成です。