{"id":20619755,"url":"https://github.com/twtrubiks/django_recaptcha_tutorial","last_synced_at":"2025-04-15T12:12:28.493Z","repository":{"id":84518935,"uuid":"105660022","full_name":"twtrubiks/django_recaptcha_tutorial","owner":"twtrubiks","description":"django recaptcha tutorial","archived":false,"fork":false,"pushed_at":"2022-06-28T07:30:45.000Z","size":21,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-15T12:12:08.046Z","etag":null,"topics":["django","python","recaptcha","tutorial"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/twtrubiks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-03T14:14:31.000Z","updated_at":"2022-06-28T07:09:28.000Z","dependencies_parsed_at":"2023-03-02T04:30:27.289Z","dependency_job_id":null,"html_url":"https://github.com/twtrubiks/django_recaptcha_tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2Fdjango_recaptcha_tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2Fdjango_recaptcha_tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2Fdjango_recaptcha_tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/twtrubiks%2Fdjango_recaptcha_tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/twtrubiks","download_url":"https://codeload.github.com/twtrubiks/django_recaptcha_tutorial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249067779,"owners_count":21207396,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["django","python","recaptcha","tutorial"],"created_at":"2024-11-16T12:12:27.062Z","updated_at":"2025-04-15T12:12:28.487Z","avatar_url":"https://github.com/twtrubiks.png","language":"Python","readme":"# django-recaptcha-tutorial 📝\n\n今天要教大家使用 [Django](https://github.com/django/django) 結合 [Google's reCAPTCHA](https://developers.google.com/recaptcha/) :smile:\n\n* [Youtube Tutorial](https://youtu.be/nxPY0F59sjM)\n\n建議對 [Django](https://github.com/django/django) 不熟悉的朋友，可以先觀看我之前寫的文章（ 進入 [Django](https://github.com/django/django)  的世界）\n\n* [Django 基本教學 - 從無到有 Django-Beginners-Guide](https://github.com/twtrubiks/django-tutorial)\n\n* [使用 Django 實現一個可以使用社交平台登入並且註冊的網站](https://github.com/twtrubiks/django_social_login_tutorial)\n\n* [使用 Django 建立一個簡易版購物網站](https://github.com/twtrubiks/django-shop-tutorial)\n\n## 前言\n\n相信大家一定有常常輸入驗證碼的經驗，為什麼要用驗證碼呢:question:這樣做不是對使用者而言非常麻煩 :confused:\n\n，使用者登入一次就要輸入一次驗證碼，回覆一篇文章也要驗證碼，使用者一定覺得麻煩死了 :angry:\n\n 不過，我們換個角度思考，其實這是在保護網站避免表單被惡意攻擊，或是被爬蟲機器人瘋狂撈資料等等......\n\n目前最常用的，就是 google 的驗證碼，所以，今天我要教大家如何透過 [Django](https://github.com/django/django) 使用 Google's reCAPTCHA :grinning:\n\n## 教學\n\n透過 [django-recaptcha](https://github.com/praekelt/django-recaptcha) 完成 Google's reCAPTCHA，\n\n安裝，請在 cmd ( 命令提示字元 ) 輸入以下指令，\n\n```python\npip install django-recaptcha\n```\n\n也可以直接安裝 requirements.txt，因為我有用到其他的 Package\n\n```python\npip install -r requirements.txt\n```\n\n接著請將 captcha 加入 [settings.py](https://github.com/twtrubiks/django_recaptcha_tutorial/blob/master/django_recaptcha_tutorial/settings.py) 裡的 INSTALLED_APPS\n\n```python\nINSTALLED_APPS = [\n    ......\n    'captcha',\n]\n```\n\n到這邊我們先停下來，先去 reCAPTCHA admin [https://www.google.com/recaptcha/admin](https://www.google.com/recaptcha/admin) 註冊\n\n(這邊可以選 v3)\n\n![](https://i.imgur.com/10ykpjB.png)\n\n如果要和我一樣在本地端測試，Domains 打 127.0.0.1 即可，\n\n接下來，請將你的 key 設定到 [settings.py](https://github.com/twtrubiks/django_recaptcha_tutorial/blob/master/django_recaptcha_tutorial/settings.py) 裡面\n\n![](https://i.imgur.com/B9M4h31.png)\n\n```python\nRECAPTCHA_PUBLIC_KEY = 'Your Captcha_Public_Key'\nRECAPTCHA_PRIVATE_KEY = 'Your Captcha_Private_Key'\n```\n\n使用的方法也很簡單，直接在 [forms.py](https://github.com/twtrubiks/django_recaptcha_tutorial/blob/master/comments/forms.py) 裡面加上 `ReCaptchaField` field  即可\n\n```python\n......\n\nclass CommentForm(forms.ModelForm):\n    name = forms.CharField(required=True, max_length=20)\n    text = forms.CharField(required=True, max_length=200)\n\n    # captcha = ReCaptchaField()\n\n    # captcha = ReCaptchaField(\n    #     widget=ReCaptchaV2Checkbox(\n    #         attrs={\n    #             # 'data-theme': 'dark',\n    #             \"data-size\": \"compact\",\n    #         }\n    #     )\n    # )\n    # captcha = ReCaptchaField(widget=ReCaptchaV2Invisible)\n\n    captcha = ReCaptchaField(\n        widget=ReCaptchaV3(\n            attrs={\n                \"required_score\": 0.85,\n            }\n        )\n    )\n\n......\n```\n\n(這邊我把各種 reCAPTCHA 類型 的都註解起來, 大家可以自行嘗試, 要注意版本)\n\n前端 render 的部份也很簡單，底下有加上 bootstrap\n\n```python\n\u003cform action=\"/comments/\" method=\"post\"\u003e\n        {% csrf_token %}\n        {% bootstrap_form form %}\n        {% buttons %}\n            \u003cbutton type=\"submit\" class=\"btn btn-success btn-product\"\u003e\n                \u003ci class=\"fa fa-check\" aria-hidden=\"true\"\u003e\u003c/i\u003e POST\n            \u003c/button\u003e\n        {% endbuttons %}\n\u003c/form\u003e\n```\n\n假如你想要使用  new No CAPTCHA reCAPTCHA，請在  [settings.py](https://github.com/twtrubiks/django_recaptcha_tutorial/blob/master/django_recaptcha_tutorial/settings.py) 裡增加\n\n```python\nNOCAPTCHA = True\n```\n\n有些人可能不懂這是什麼，先試著回想以前我們在輸入驗證碼的時候，是不是都曾經看過\n\n連我看了都怕的驗證碼:fearful:，像是這樣\n\n`NOCAPTCHA = False`\n\n![](https://i.imgur.com/0l1xPGC.png)\n\n現在 google 提供更方便的方法，我們直接點一下即可，是不是方便很多:blush:\n\n`NOCAPTCHA = True`\n\n![](https://i.imgur.com/6oy7HCn.png)\n\n## 執行畫面\n\n直接瀏覽 [http://127.0.0.1:8000/comments/](http://127.0.0.1:8000/comments/)\n\n![](https://i.imgur.com/7v0lCnr.png)\n\n相信大部分的使用者都很懶，甚至連點都不想點一下，\n\n所以 google 又增加了 Invisible reCAPTCHA\n\n[https://developers.google.com/recaptcha/docs/invisible](https://developers.google.com/recaptcha/docs/invisible)\n\n可以讓點擊一下的這個動作被原本的 submit 送出，\n\n簡單講，就是在背景幫你處理，\n\n對使用者來說，也不用點擊額外的按鈕(操作),\n\n是不是超級貼心:laughing:\n\n但如果你仔細看, 它其實有把資訊放在 console log 中,\n\n![](https://i.imgur.com/WIkYRLQ.png)\n\n## 後記\n\n整體操作完，相信大家應該覺得不難，蠻好上手的，透過 Google's reCAPTCHA 我們可以解決像\n\n是前面所說的各種攻擊，也可以用來減輕表單頁面上的暴力攻擊，剩下的 Invisible reCAPTCHA 就\n\n留給大家研究 :stuck_out_tongue_closed_eyes:\n\n## 執行環境\n\n* Python 3.8\n\n## Reference\n\n* [Django](https://www.djangoproject.com/)\n* [django-recaptcha](https://github.com/praekelt/django-recaptcha)\n* [google-recaptcha](https://www.google.com/recaptcha/intro/android.html)\n\n## License\n\nMIT licens\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwtrubiks%2Fdjango_recaptcha_tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftwtrubiks%2Fdjango_recaptcha_tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftwtrubiks%2Fdjango_recaptcha_tutorial/lists"}