問い合わせフォームを設置したのですが、謎のPRメールが多く届くので、Recaptchaフィールドを追加してみました。
実施したことを記載します。

Django の Recaptcha プラグイン

captcha カテゴリーでまとまっています。
Django Packages : captcha

Star数だと、mbi/django-simple-captcha: Django Simple Captcha is an extremely simple, yet highly customizable Django application to add captcha images to any Django form. が多いのですが画像生成も行う形式でした。
今回は、Google の reCAPTCHA を使いたかったので、praekelt/django-recaptcha: Django reCAPTCHA form field/widget integration app. を使用します。

インストール

reCAPTCHA の設定

reCAPTCHAのサイトへの登録方法は以下記事に記載があり、参考にして登録しました。
Google reCAPTCHA の使い方（v2/v3） / Web Design Leaves

django-recaptcha のインストール、設定

  • インストール 

    pip install django-recaptcha

  • settings.py の編集
    captcha をインストールアプリケーションとして追加します。 

    INSTALLED_APPS = [
    ...,
    'captcha',
    ...
]
    Google の reCAPTCHAで発行したキー値を設定します。 
    RECAPTCHA_PUBLIC_KEY = 'MyRecaptchaKey123'
RECAPTCHA_PRIVATE_KEY = 'MyRecaptchaPrivateKey456'

以下は、Mezzanine の フォームに出力するための設定です。
FORMS_EXTRA_FIELDS に、captcha.fields.ReCaptchaField を追加します。 

FORMS_EXTRA_FIELDS = (
    (100, "captcha.fields.ReCaptchaField", "ReCaptcha checkbox"),
)

Mezzanine のサイトに設置

フォームのフィールドとして、ReCaptcha checkbox が選択できるようになります。
Image from Gyazo

問い合わせフォーム側には、以下のように表示されるようになりました。
Image from Gyazo

  • 必須属性をつけたい
    動作確認したところ、ReCpatcha フィールドは JavaScript側の必須チェックが掛からず、サーバー側に到達してから必須チェックがかかりました。
    HTML5のrequired属性による必須チェックくらいは、クライアント側でかかるようにしたいです。

参考

以下、参考にした記事になります。

Mezzanie デフォルト機能と、Django の プラグインで reCAPTCHA の設置は問題なく行えました。
UIとして、改善の余地がありますが、スパムメールが多すぎだったので、その辺りが改善できるのは嬉しいです。
以上です。

コメント

カテゴリー

最近の投稿