reCAPTCHAをDjangoサイトで使用する方法
2020年8月17日
Google reCAPTCHAをDjangoサイトに導入する方法を紹介
どうも、テック備忘LOGのYuki（@tech_bibo_log）です！！
今回はDjangoサイトにCAPTCHA（キャプチャ）認証システムを導入したので、導入手順を残したいと思います。
それでは、始めましょう！
[ 目次 (開く) ]
reCAPTCHAとは？
reCAPTCHAはGoogleが提供するCAPTCHA（キャプチャ）認証システムです。 サイトのお問合せフォームやコメント欄、ログインフォームなどをボットから防御するために利用されています。
最近いろんなサイトのログインやアカウント登録時によく見かけるやつですね!!スパム対策にとても効果がある様です。
下の画像のような見た目のやつです。
Yuki
基本的には無料で利用できますが、1秒間に1000回（1ヶ月に100万回）以上のアクセスがある場合は、高機能で有料の『reCAPTCHA Enterprise』を使用する必要があるようです。
今回は『reCAPTCHA v2』と『reCAPTCHA v3』から「私はロボットではありません」のチェックボックスにユーザがチェックを入れて認証する『Checkboxタイプ』のv2を導入していきます。
reCAPTCHAにサイトを登録
v2、v3のどちらを使用する場合も、reCAPTCHAを使用するサイトを登録してAPIキーを取得する必要があります。また、Googleのサービスなので利用登録にはGoogleのユーザーアカウントが必要です。
Googleにログインし、下記のURLにアクセスすると次の画像の画面が開きますので、ここでreCAPTCHAを利用するサイトを登録していきます。
サイトの登録は recaptcha/admin/create から行えます。
Yuki
登録に必要なものは次の２点です。
- Googleアカウント
- サイトのドメイン
※ローカル環境も可能（127.0.0.1やlocalhostなど）
Yuki
登録の必要事項を入力しましょう。
- ラベル： 管理しやすい好きな名前（例：ドメイン名）
- reCAPTCHAタイプ： 利用するタイプを選択します。
- ドメイン： reCAPTCHAを使用するサイトのドメイン
- オーナー： Googleアカウントのメールアドレス
最後に「reCAPTCHA 利用条件に同意する」にチェックを入れて『送信』をクリックして登録します。
入力内容に問題がなければ、APIキー [サイトキーとシークレットキー] が付与されるのでコピーしておきます。
このAPIキーは後から確認することができます。
サイトキー ： reCAPTCHAを表示する際に使用する公開用のキー
シークレットキー： チェック検証で使用する秘密のキー
※誰にも公開しないでください。
以上でreCAPTCHAにサイトを登録することができました。
次はDjangoサイトにreCAPTCHAを搭載していきます。
Djangoサイトで使用する方法（django-recaptcha2）
ここではdjango-recaptcha2を使用する方法を紹介します。
難しい処理すべてこのモジュールが行ってくれます。
モジュールの詳細はこちらから確認出来ます。
今回の環境：
1. ConoHaのVPS（CentOS8）
2. python 3.6.8
3. pip 20.1.1 (from /usr/local/lib/python3.6/site-packages/pip (python 3.6))
1.django-recaptcha2をインストールしよう!
次のpipコマンドでdjango-recaptcha2をインストールします。
# pip install django-recaptcha2
2.django-recaptcha2をアプリケーションに追加しよう!
settings.pyのINSTALLED_APPSに「django-recaptcha2」を追加します。
INSTALLED_APPS = (
...
'snowpenguin.django.recaptcha2',
...
)
3.シークレットキーとサイトキーを追加しよう!
settings.pyにreCAPTCHAのサイト登録で取得したシークレットキーとサイトキーを記載します。
「setting.pyに記載するのはセキュリティー的に心配だ!」という方は、上記のキーを環境変数にセットしenvironで取得することも可能です。
※詳細は省略します。
RECAPTCHA_PRIVATE_KEY = 'シークレットキー'
RECAPTCHA_PUBLIC_KEY = 'サイトキー'
4.ウィジェットを表示しよう!(その1)
「私はロボットではありません」というあのウィジェットを表示していきます。
ReCaptchaFieldとReCaptchaWidgetをインポートし、ウィジェットを表示させたいフォームクラスに次の1行を追加します。
from snowpenguin.django.recaptcha2.fields import ReCaptchaField
from snowpenguin.django.recaptcha2.widgets import ReCaptchaWidget
class ExampleForm(forms.Form):
[...]
captcha = ReCaptchaField(widget=ReCaptchaWidget())
[...]
4.ウィジェットを表示しよう!(その2)
htmlの</header>の直前に次の1行を追加します。
※ファイルは自身の環境によって異なります。
<header>
...
<script src="https://www.google.com/recaptcha/api.js" async defer></script> ## これ
</header>
<body>
...
</body>
以上です。最後にAppサーバーを再起動して変更を反映させましょう。
私の場合はuWSGIを使用しているので以下の様に再起動します。
# # killall -9 uwsgi ← uwsgiのプロセスを終了
# uwsgi --ini uwsgi.ini & ← uwsgiを起動 ※最後尾に'&(アンド)'をつけることで、ctrl+cで抜けた後もプロセスを実行し続けることができます。
▽▽▽ Djangoでブログを構築した時のお話し ▽▽▽
まとめ
とても少ない手順で導入できましたね！
今回は認証部分の難しい処理を省くためにdjango-recaptcha2モジュールをインストールして、すべて内部処理を任せる方法を選択しました。
またdjango-recaptcha2には公式ページで紹介されている様に本来の使用方法があり、そちらの使用方法に沿うことでもう少し複雑な設定を行うことも可能になります。
それでは最後に今回の手順を簡単にまとめるとこんな感じです。
Yuki
reCAPTCHAの導入手順まとめ
- reCAPTCHAにサイトを登録する
- django-recaptcha2をインストール
- django-recaptcha2をアプリに登録する
- setting.pyにAPIキーを記載する
- フォームにreCAPTCHAフィールドを追加
- recaptcha2のスクリプトタグを配置
以上です！最後までありがとうございました。
