django-recaptcha-tutorial 📝

今天要教大家使用 Django 結合 Google's reCAPTCHA 😄

Youtube Tutorial

建議對 Django 不熟悉的朋友，可以先觀看我之前寫的文章（進入 Django 的世界）

前言

相信大家一定有常常輸入驗證碼的經驗，為什麼要用驗證碼呢:question:這樣做不是對使用者而言非常麻煩 :confused:

，使用者登入一次就要輸入一次驗證碼，回覆一篇文章也要驗證碼，使用者一定覺得麻煩死了 😠

不過，我們換個角度思考，其實這是在保護網站避免表單被惡意攻擊，或是被爬蟲機器人瘋狂撈資料等等......

目前最常用的，就是 google 的驗證碼，所以，今天我要教大家如何透過 Django 使用 Google's reCAPTCHA 😀

教學

透過 django-recaptcha 完成 Google's reCAPTCHA，

安裝，請在 cmd ( 命令提示字元 ) 輸入以下指令，

pip install django-recaptcha

也可以直接安裝 requirements.txt，因為我有用到其他的 Package

pip install -r requirements.txt

接著請將 captcha 加入 settings.py 裡的 INSTALLED_APPS

INSTALLED_APPS = [
    ......
    'captcha',
]

到這邊我們先停下來，先去 reCAPTCHA admin https://www.google.com/recaptcha/admin 註冊

(這邊可以選 v3)

如果要和我一樣在本地端測試，Domains 打 127.0.0.1 即可，

接下來，請將你的 key 設定到 settings.py 裡面

RECAPTCHA_PUBLIC_KEY = 'Your Captcha_Public_Key'
RECAPTCHA_PRIVATE_KEY = 'Your Captcha_Private_Key'

使用的方法也很簡單，直接在 forms.py 裡面加上 ReCaptchaField field 即可

......

class CommentForm(forms.ModelForm):
    name = forms.CharField(required=True, max_length=20)
    text = forms.CharField(required=True, max_length=200)

    # captcha = ReCaptchaField()

    # captcha = ReCaptchaField(
    #     widget=ReCaptchaV2Checkbox(
    #         attrs={
    #             # 'data-theme': 'dark',
    #             "data-size": "compact",
    #         }
    #     )
    # )
    # captcha = ReCaptchaField(widget=ReCaptchaV2Invisible)

    captcha = ReCaptchaField(
        widget=ReCaptchaV3(
            attrs={
                "required_score": 0.85,
            }
        )
    )

......

(這邊我把各種 reCAPTCHA 類型的都註解起來, 大家可以自行嘗試, 要注意版本)

前端 render 的部份也很簡單，底下有加上 bootstrap

<form action="/comments/" method="post">
        {% csrf_token %}
        {% bootstrap_form form %}
        {% buttons %}
            <button type="submit" class="btn btn-success btn-product">
                <i class="fa fa-check" aria-hidden="true"></i> POST
            </button>
        {% endbuttons %}
</form>