Django登录页面优化--动态验证码

本章节添加修改动态验证码功能，基于前一章使用的前端环境进行代码修改。

安装依赖库

pip install Pillow
pip install django-simple-captcha

添加captcha应用

在myproject/settings.py文件的INSTALLED_APPS列表中添加captcha应用

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'captcha',
    'myapp',
]

配置视图

from django.contrib.auth import authenticate, login
from django.http import HttpResponse
from django.contrib import messages
from captcha.models import CaptchaStore
from captcha.helpers import captcha_image_url
from django.shortcuts import redirect

def login_view(request):
  if request.method == 'POST':
    username = request.POST.get('username')
    password = request.POST.get('password')
    captcha_solution = request.POST.get('captcha_solution')
    captcha_key = request.POST.get('captcha_key')

    # 验证码校验
    if captcha_key and captcha_solution:
      if not CaptchaStore.objects.filter(response=captcha_solution, hashkey=captcha_key).exists():
        messages.error(request, '验证码错误')
        return redirect('login')

    # 身份验证
    user = authenticate(request, username=username, password=password)
    if user:
      login(request, user)
      return HttpResponse('登录成功！')
    else:
      messages.error(request, '用户名或密码错误')
      return redirect('login')

  new_key = CaptchaStore.generate_key()
  image_url = captcha_image_url(new_key)

  return render(request, 'login.html', {'key': new_key, 'image_url': image_url})

修改登录模板

在myapp/templates/login.html文件中，替换原先的验证码部分为动态生成的验证码代码

<label for="captcha_solution">验证码：</label>
<input type="text" id="captcha_solution" name="captcha_solution" required>
<img src="{{ image_url }}" alt="验证码">
<input type="hidden" name="captcha_key" value="{{ key }}">

完整配置如下

<!--添加动态验证码-->
  {% if messages %}
    {% for message in messages %}
      <p>{{ message }}</p>
    {% endfor %}
  {% endif %}

  <form method="POST">
    {% csrf_token %}
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" required>

    <label for="password">密码：</label>
    <input type="password" id="password" name="password" required>

    <label for="captcha_solution">验证码：</label>
    <input type="text" id="captcha_solution" name="captcha_solution" required>
    <img src="{{ image_url }}" alt="验证码">
    <input type="hidden" name="captcha_key" value="{{ key }}">

    <button type="submit">登录</button>
  </form>
</body>
</html>

配置添加路由

在myproject/urls.py文件中，修改URL配置如下

from django.contrib import admin
from django.urls import path, include
from myapp.views import login_view

urlpatterns = [
    path('admin/', admin.site.urls),
    path('login/', login_view, name='login'),
    path('captcha/', include('captcha.urls')),
]

运行代码

优化登录页面的背景功能

修改模版文件

将框居于页面右侧存放，并使框中的表单和验证码大小适中，您可以使用 CSS 的 margin 属性和一些调整。

要优化表单内容不超出框外，您可以使用 CSS 的 overflow 属性来控制框的溢出行为。

对 .login-form 的样式进行了修改。通过设置 overflow: hidden，我们隐藏了框外的内容，以确保表单内容不会溢出框外。

对 body 的样式进行了修改。通过设置 justify-content: flex-end，我们将框居于页面的右侧。

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 100vh;
      background-image: url("https://img1.baidu.com/it/u=3663508195,2907650417&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1692378000&t=9f11a3e494efccd0dad4d4ce8fd1d627");
      background-size: cover;
    }

    .login-form {
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      width: 50%;
      max-width: 300px;
      overflow: hidden; /* 隐藏框外的内容 */
    }

    .login-form label {
      display: block;
      margin-bottom: 10px;
    }

    .login-form input {
      width: 96%;
      padding: 10px;
      margin-bottom: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    .login-form img {
      display: block;
      margin-bottom: 10px;
      width: 100%;
      max-width: 200px;
    }

    .login-form button {
      padding: 10px 20px;
      background-color: #4CAF50;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      align-self: flex-end;
    }
  </style>
</head>
<body>
  <div class="login-form">
    {% if messages %}
      {% for message in messages %}
        <p>{{ message }}</p>
      {% endfor %}
    {% endif %}

    <form method="POST">
      {% csrf_token %}
      <label for="username">用户名：</label>
      <input type="text" id="username" name="username" required>

      <label for="password">密码：</label>
      <input type="password" id="password" name="password" required>

      <label for="captcha_solution">验证码：</label>
      <input type="text" id="captcha_solution" name="captcha_solution" required>
      <img src="{{ image_url }}" alt="验证码">
      <input type="hidden" name="captcha_key" value="{{ key }}">

      <button type="submit">登录</button>
    </form>
  </div>
</body>
</html>