naritoブログ

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

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

プログラミング関連 Django Python 約546日前
2016年5月25日0:21
コメントやお問い合わせフォームにスパム投稿が増えてきたなぁと思ったら、何かしらの認証を考えます
今回はgoogleが提供しているreCAPTCHAを導入してみます
googleアカウントが必要なので、ない人は取得しましょう
ローカル環境(127.0.0.1やlocalhost)でも使えるので、Webサイトがなくても試せます。


https://developers.google.com/recaptcha/docs/start
こちらに行き、Create an API Keyをクリック


Labelには説明を入れます。私はblog等と入力していますが、見分けがつけば何でもいいと思います
Domainsには、ドメインを入力します。このサイトなら「torina.top」と入れます
Ownersの入力を求められたら、メールアドレスを入れましょう
完了すれば、Registerを押します



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


さっそく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



次はサーバサイドです
PythonのDjangoで、requestsモジュールを使って認証する例です

views.py
def comment(request):
    """コメントの追加処理"""
 
    captcha = request.POST.get("g-recaptcha-response", "")
 
    #  認証をチェックしてる場合
    if captcha:
        import requests
        origin_url = "https://www.google.com/recaptcha/api/siteverify?secret={}&response={}"
        url = origin_url.format("Secret Keyを入れる", captcha)
        res = requests.get(url)
 
        #  認証成功ならTrue、失敗ならFalse
        if res.json().get("success", ""):            
            #  以下、通常の処理...
            
 
    # 認証してない(チェックを無視した場合等)
    else:



これをもう少しスマートにするならば、以下のようにヘルパー関数を作っちゃいましょう。
views.py
import requests
...
...
...
def auth_captcha(request):

    # 開発環境などではFalseにしておく
    if not settings.CAPTCHA:
        return True

    captcha = request.POST.get("g-recaptcha-response", "")
    if captcha:
        origin_url = "https://www.google.com/recaptcha/api/siteverify?secret={}&response={}"
        url = origin_url.format(
            settings.CAPTCHA_SECRETKEY, captcha)
        res = requests.get(url)

        #  認証成功ならTrue、失敗ならFalse
        if res.json().get("success", ""):
            return True

    return False

def comment(request):
    """コメントの追加処理"""
 
    #  認証をチェックしてる場合
    if auth_captcha(request):      
        #  以下、通常の処理...
            
 
    # 認証してない(チェックを無視した場合等)
    else:


settings.py
# Falseにすると、チェックしなくてもオッケーになる。開発環境等で
CAPTCHA = True
CAPTCHA_SECRETKEY = "Secret Keyを入れる"


例えばサイドバーなんかにフォームがあり、reCAPTCHAがはみ出す時があります
<div class="g-recaptcha" data-sitekey="Site keyを入れる"></div>の中に、以下のhtmlが生成されるためです
<div>
  <div style="width: 304px; height: 78px;">
    <iframe .....</iframe>
  </div>
</div>

widthとheightが指定されることに注意しましょう
これを小さくしたい、というときは以下の指定をするとよいです
transform:scale();の値をいじることで、小さくしたり巨大にできます
.g-recaptcha {
    transform:scale(0.77);
    transform-origin:0 0;
}


参考
http://stackoverflow.com/questions/28594842/no-captcha-recaptcha-resizing