如何将验证码添加到Django登录页面并接收该验证码？

我有一个应用程序Django，我想将此验证码添加到登录页面（我不想使用Google Capture）。Django登录表单为我添加captcha非常混乱（我读过，但这个问题非常复杂）

我添加了如下所示的代码，但我不知道如何发送和接收验证码值：

login.html：

 {% block content %}
        <form  class="fadeIn second"  method="post">{% csrf_token %}

    {{ form.as_p }}
    <p><label>Please enter the letters displayed:</label>
        <input type="text" id="defaultReal" name="defaultReal"></p>
    <button   type="submit" class="btn btn-primary"> Login </button>

[![login page][2]][2]
    </form>
{% endblock %}

这是Django中的默认用户身份验证

forms.py：

class AuthenticationForm(forms.Form):
    """
    Base class for authenticating users. Extend this to get a form that accepts
    username/password logins.
    """
    username = UsernameField(widget=forms.TextInput(attrs={'autofocus': True}))
    password = forms.CharField(
        label=_("Password"),
        strip=False,
        widget=forms.PasswordInput,
    )
    print(username)

    error_messages = {
        'invalid_login': _(
            "Please enter a correct %(username)s and password. Note that both "
            "fields may be case-sensitive."
        ),
        'inactive': _("This account is inactive."),
    }

    def __init__(self, request=None, *args, **kwargs):
        """
        The 'request' parameter is set for custom auth use by subclasses.
        The form data comes in via the standard 'data' kwarg.
        """
        self.request = request
        self.user_cache = None
        super().__init__(*args, **kwargs)

        # Set the max length and label for the "username" field.
        self.username_field = UserModel._meta.get_field(UserModel.USERNAME_FIELD)
        self.fields['username'].max_length = self.username_field.max_length or 254
        if self.fields['username'].label is None:
            self.fields['username'].label = capfirst(self.username_field.verbose_name)

    def clean(self):
        username = self.cleaned_data.get('username')
        password = self.cleaned_data.get('password')

        if username is not None and password:
            self.user_cache = authenticate(self.request, username=username, password=password)
            if self.user_cache is None:
                raise self.get_invalid_login_error()
            else:
                self.confirm_login_allowed(self.user_cache)

        return self.cleaned_data

    def confirm_login_allowed(self, user):
        if not user.is_active:
            raise forms.ValidationError(
                self.error_messages['inactive'],
                code='inactive',
            )

    def get_user(self):
        return self.user_cache

    def get_invalid_login_error(self):
        return forms.ValidationError(
            self.error_messages['invalid_login'],
            code='invalid_login',
            params={'username': self.username_field.verbose_name},
        )

我现在使用并解决我的问题

var a、b、c、，
提交内容，
验证码，
锁定，
validSubmit=false，
超时处理；
//生成一个简单的求和（a+b）并生成一个结果（c）
函数generateCaptcha（）{
a=Math.ceil（Math.random（）*10）；
b=Math.ceil（Math.random（）*10）；
c=a+b；
submitContent=''+a++'+b++''+
' = ';
$（'.submit\uuu generated'）.html（submitContent）；
init（）；
}
//检查值“c”和输入值。
函数checkCaptcha（）{
如果（验证码===c）{
//弹出绿色的有效图标
$（'.submit__生成'）
.removeClass（'unvalid'）
.addClass（“有效”）；
$（'.submit'）.removeClass（'overlay'）；
$（'.submit_uuoverlay'）.fadeOut（'fast'）；
$（'.submit__error'）.addClass（'hide'）；
$（'.submit\u error--empty'）.addClass（'hide'）；
validSubmit=true；
}
否则{
如果（验证码==''）{
$（'.submit__error'）.addClass（'hide'）；
$（'.submit\u error--empty'）.removeClass（'hide'）；
}
否则{
$（'.submit\u error'）.removeClass（'hide'）；
$（'.submit\u error--empty'）.addClass（'hide'）；
}
//弹出红色未验证图标
$（'.submit__生成'）
.removeClass（'有效'）
.addClass（“未验证”）；
$（'.submit'）.addClass（'overlay'）；
$（'.submit_uuoverlay'）.fadeIn（'fast'）；
validSubmit=false；
}
返回有效提交；
}
函数unlock（）{locked=false；}
//刷新按钮单击-重置验证码
$（'.submit\u control i.fa-refresh'）。在（'click'，function（）上{
如果（！已锁定）{
锁定=真；
设置超时（解锁，500）；
generateCaptcha（）；
设置超时（检查验证码，0）；
}
});
//初始化操作处理程序-在刷新“c”时最有用
函数init（）{
$（'form'）。关于（'submit'，函数（e）{
e、 预防默认值（）；
if（$（'.submit\uuu-generated'）.hasClass（'valid'））{
//var formValues=[]；
验证码=$（'.submit__input'）.val（）；
如果（验证码！=''）{
验证码=编号（验证码）；
}
checkCaptcha（）；
如果（validSubmit==真）{
validSubmit=false；
//临时直接“成功”模拟
提交（）；
}
}
否则{
返回false；
}
});
//验证码输入结果处理程序
$（'.submit_uuinput'）。在（'propertychange change keyup input paste'，function（）上{
//如果字符串的第一个数字是“多个数字字符串”，则阻止对其执行
//（即：在'12'中的'1'上执行）
clearTimeout（timeoutHandle）；
timeoutHandle=window.setTimeout（函数（）{
验证码=$（'.submit__input'）.val（）；
如果（验证码！=''）{
验证码=编号（验证码）；
}
checkCaptcha（）；
},150);
});
//按下“回车”键时添加“：active”状态CSS
$（“正文”）
.on（'keydown'，功能（e）{
如果（e.which==13）{
如果（$（'.submit form'）.hasClass（'overlay'））{
checkCaptcha（）；
}否则{
$（'.submit form'）.addClass（'enter-press'）；
}
}
})
.on（'keyup'，功能（e）{
如果（e.which==13）{
$（'.submit form'）.removeClass（'enter-press'）；
}
});
//刷新按钮单击-重置验证码
$（'.submit control i.fa-refresh'）。在（'click'，function（）上{
如果（！已锁定）{
锁定=真；
设置超时（解锁，500）；
generateCaptcha（）；
设置超时（检查验证码，0）；
}
});
//提交白色覆盖，点击
$（'submit form overlay'）。在（'click'，function（）上{
checkCaptcha（）；
});
}
generateCaptcha（）
@导入url(https://fonts.googleapis.com/css?family=Open+Sans:400600）；
正文{字体系列：'开放式Sans'，无衬线；}
形式{
位置：相对位置；
保证金：20px自动；
宽度：300px；
}
h3{
字体大小：16px；
字号：600；
颜色：rgba（0,0,0,0.8）
}
.提交生成的{
显示：内联块；
跨度{
显示：内联块；
宽度：35px；
高度：35px；
垂直对齐：居中；
线高：35px；
字体大小：粗体；
字体大小：16px；
颜色：rgba（0,0,0,0.9）；
文本对齐：居中；
字母间距：1px；
文本转换：大写；
边框：1px实心rgba（0,0,0,0.1）；
边界半径：4px；
}
&.有效期：在，
&.unvalid:之后{
字体系列：Fontsome；
字号：18px；
左边距：10px；
}
&.有效{
&：之后{
内容：“\f00c”；
颜色：#2ecc71；
}
.提交输入{
边框：1px实心#2ec71；
颜色：#2ecc71！重要；
}
}
&.未验证{
&：之后{
内容：“\f00d”；
颜色：#e74c3c；
}
.提交输入{
边框：1px实心#e74c3c；
颜色：#e74c3c；
}
}
.提交输入{
位置：相对位置；
大纲：0；
高度：35px；
宽度：35px；
边界半径：4px；
边框：1px实心#42A0DD；
颜色：#42A0DD；
文本对齐：居中；
字体大小：粗体；
字体大小：16px；
顶部：-2px；
}
}
i、 fa刷新{
利润率：4px0px5px；
填充物：5px；
字号：18px；
颜色：rgba（0,0,0,0.2）；
光标：指针；
变换原点：中心；
过渡：变换0.2s缓变，颜色0.2s缓变；
&：悬停{
颜色：rgba（0,0,0,0.4）；
变换：旋转（180度）；
}
}
span.submit\u错误，
span.submit\u错误--empty{
颜色：#e74c3c；
位置：绝对位置；
边际上限：0px；
左边距：100px；
}
.提交{
显示：块；
利润率：50px0；
填充：7px 15px；
字体大小：粗体；
字体大小：16px；
颜色：#fff；
字母间距：1px；
文本转换：大写；
大纲：无；
边界：0；
背景色：#42A0DD；
背景
class AuthenticationForm(forms.Form):
    """
    Base class for authenticating users. Extend this to get a form that accepts
    username/password logins.
    """
    username = UsernameField(widget=forms.TextInput(attrs={'autofocus': True}))
    password = forms.CharField(
        label=_("Password"),
        strip=False,
        widget=forms.PasswordInput,
    )
    print(username)

    error_messages = {
        'invalid_login': _(
            "Please enter a correct %(username)s and password. Note that both "
            "fields may be case-sensitive."
        ),
        'inactive': _("This account is inactive."),
    }

    def __init__(self, request=None, *args, **kwargs):
        """
        The 'request' parameter is set for custom auth use by subclasses.
        The form data comes in via the standard 'data' kwarg.
        """
        self.request = request
        self.user_cache = None
        super().__init__(*args, **kwargs)

        # Set the max length and label for the "username" field.
        self.username_field = UserModel._meta.get_field(UserModel.USERNAME_FIELD)
        self.fields['username'].max_length = self.username_field.max_length or 254
        if self.fields['username'].label is None:
            self.fields['username'].label = capfirst(self.username_field.verbose_name)

    def clean(self):
        username = self.cleaned_data.get('username')
        password = self.cleaned_data.get('password')

        if username is not None and password:
            self.user_cache = authenticate(self.request, username=username, password=password)
            if self.user_cache is None:
                raise self.get_invalid_login_error()
            else:
                self.confirm_login_allowed(self.user_cache)

        return self.cleaned_data

    def confirm_login_allowed(self, user):
        if not user.is_active:
            raise forms.ValidationError(
                self.error_messages['inactive'],
                code='inactive',
            )

    def get_user(self):
        return self.user_cache

    def get_invalid_login_error(self):
        return forms.ValidationError(
            self.error_messages['invalid_login'],
            code='invalid_login',
            params={'username': self.username_field.verbose_name},
        )