为Djangoadmin增加登录验证码功能,只需三步就可以

原创
08/08 09:01
阅读数 35

首先,需要安装一个验证码的第三方库-django-simple-captcha,这是一个极其简单但可高度定制的 Django 第三方应用程序,用于将验证码图像添加到任何 Django 表单。

安装

1、通过pip安装django-simple-captcha

pip install django-simple-captcha

2、添加captchasettings.pyINSTALLED_APPS

INSTALLED_APPS = [
...
'captcha'
]

3、生成数据,命令行运行python manage.py migrate 4、添加url到项目的urls.py文件中

urlpatterns = [
path('captcha/', include('captcha.urls')),
]

创建一个dadmin的APP

1、创建一个dadmin的APP,并将其添加到settings.pyINSTALLED_APPS

python manage.py startapp dadmin

2、在dadmin中创建一个forms.py的文件,我们继承django自带的登录表单AuthenticationForm,并对其进行扩展!

# dadmin/forms.py

from django.contrib.auth.forms import AuthenticationForm
from captcha.fields import CaptchaField

class DadminAuthenticationForm(AuthenticationForm):
captcha = CaptchaField()

3、在dadmin的同级创建一个templates的文件夹,并在其内部创建一个dadmin的文件夹,将django默认的登录模板中的代码全部拷贝过来,并在密码框下添加验证码的输入框!

<div class="form-row">
{{ form.captcha.errors }}
{{ form.captcha.label_tag }} {{ form.captcha }}
<input type="hidden" name="next" value="{{ next }}">
</div>

4、在dadmin中的admin.py中添加如下代码,这里我们子类化了AdminSite类,这样我们就可以随意修改和覆盖django 默认admin的任何模板,并且不会影响默认admin的任何东西,还可以继承admin的所有功能及模板!

from django.contrib import admin

# Register your models here.
from .forms import DadminAuthenticationForm


class DadminSite(admin.AdminSite):
login_form = DadminAuthenticationForm
login_template = "dadmin/login.html"

admin_site = DadminSite(name='dadmin')

5、在项目的urls.py中注册刚才子类化的站点地址

from dadmin.admin import admin_site

urlpatterns = [
path('admin/', admin.site.urls),
path('myadmin/', admin_site.urls),
path('captcha/', include('captcha.urls')),
]

6、终端启动站点

python3 manage.py runserver

浏览器打开站点可以看到验证码已经添加成功了,但似乎样式不美观,这个就留给大家自己去研究吧,给个思路可以拷贝captcha默认的验证码模板,样式重写即可!

7、实现点击更换验证码功能

将如下代码加入到login.html模板的底部即可,别忘了引入Jquery.js哦!

<script>    $('img.captcha').attr("title", "点击更换验证码");    $('img.captcha').click(function() {        $.getJSON('/captcha/refresh/',function(json) {            // This should update your captcha image src and captcha hidden input            console.log(json);            $("img.captcha").attr("src",json.image_url);            $("#id_captcha_0").val(json.key);        });        return false;    });</script>

到此大功告成,很简单的验证码功能就完成了!

如果你也在自学Python或Django,那就请关注我吧,会不断输送关于django及python的技术干货,以及小案例!

下篇预告:django实现前后端分离登录功能,并加入验证码功能!

本文分享自微信公众号 - 轻编程(Qbiancheng)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部