naritoブログ

このブログはPython/DjangoとBootstrap4で作成されました
Githubのソースコード

ウェブサイトにreCAPTCHAを導入する

約761日前 2016年5月25日0:21
プログラミング関連
Django Python

概要


コメントやお問い合わせフォームにスパム投稿が増えてきたなぁと思ったら、何かしらの認証を考えます。
今回はgoogleが提供しているreCAPTCHAを導入してみます。下の画像のようなやつですね。
ウェブサイトでよくみる認証のやつ

googleアカウントが必要なので、ない人は取得しましょう
ローカル環境(127.0.0.1やlocalhost)でも使えるので、Webサイトがなくても試せます。

こちらに行き、Get reCAPTCAをクリック
reCAPTCA公式サイト

Labelには説明を入れます。私はblog等と入力していますが、見分けがつけば何でもいいと思います
reCAPTCA v2 にチェックを入れ、Domainsにはドメインを入力します。ローカル環境で試すならば、「127.0.0.1」等と入れましょう。
完了すれば、Registerを押します
ラベルなどを入力する

するとこのような画面に。
Site keyと、Secret keyをメモしときましょう。
トークンをメモする

HTMLへ記述する


さっそくHTMLに書いてみましょう
必要なのは下記の2つです

ライブラリ読み込み
 <script src="https://www.google.com/recaptcha/api.js"></script>


認証部分。<form>の中に書きましょう
 <div class="g-recaptcha" data-sitekey="Site keyを入れる"></div>


認証を英語にしたいときなどは、下記のようにするとよいそうです
https://www.google.com/recaptcha/api.js?hl=en


認証方法を音声にしたり、いくつかの属性を定義できます。
こちらのサイト様に、詳しく載っています。


Djangoのログイン処理で使う例


Djangoのログイン処理に、これを使ってみます。
pip install requests で、requestsモジュールをインストールしておきましょう。

from django.contrib.auth.views import LoginView
import requests
...
...
class Login(LoginView):
    """ログインページ"""
    template_name = 'register/login.html'

    def form_valid(self, form):
        captcha = self.request.POST.get("g-recaptcha-response")
        if captcha:
            auth_url = 'https://www.google.com/recaptcha/api/siteverify?secret={}&response={}'
            auth_url = auth_url.format('Secret keyを入れる', captcha)
            response = requests.get(auth_url)
            if response.json().get('success'):
                return super().form_valid(form)

        # ビューからフォームにエラーを追加できます。第一引数がNoneの場合は、{{ form.non_field_errors }}で表示される
        form.add_error(None, 'ロボットではないチェックを入れてください')  # キーが間違っている場合もあるが、一緒のエラー内容にしちゃってます。
        return self.form_invalid(form)