社区首页 >专栏 >在Django中实现使用userid和密码的自定义用户认证

在Django中实现使用userid和密码的自定义用户认证

原创

IT蜗壳-Tango

发布于 2024-07-03 09:38:01

65502

代码可运行

运行总次数：2

代码可运行

在本教程中，我们将详细介绍如何在Django中实现自定义用户认证，使用包含userid字段的CustomUser模型以及标准的密码认证。本教程假设您已经对Django有基本的了解并且已经设置好了项目。

概述

设置和配置
定义包含userid字段的CustomUser模型。
创建自定义认证后端，用于使用userid认证用户。
配置Django设置以使用自定义认证后端。
创建登录视图和API
开发登录表单和处理userid和密码认证的API端点。
确保API响应中包含CSRF保护和错误处理。
前后端集成
使用AJAX请求在前端页面中与后端进行通信，处理用户认证的成功和失败情况。

逐步教程

1. 定义`CustomUser`模型

首先，在usermanagement/models.py中定义一个CustomUser模型，包含userid字段以及其他可选字段如reading和signature。

# usermanagement/models.py
from django.db import models
from django.contrib.auth.models import AbstractUser

class CustomUser(AbstractUser):
    userid = models.CharField(max_length=20, unique=True)
    reading = models.CharField(max_length=100, blank=True, null=True, verbose_name="名前の読み方")
    signature = models.TextField(blank=True, null=True, verbose_name="メール署名")

    def __str__(self):
        return self.userid

2. 创建自定义认证后端

接下来，创建一个自定义认证后端(usermanagement/auth_backends.py)，用于使用userid字段进行用户认证。

# usermanagement/auth_backends.py
from django.contrib.auth import get_user_model
from django.contrib.auth.backends import ModelBackend

User = get_user_model()

class CustomUserBackend(ModelBackend):
    def authenticate(self, request, userid=None, password=None, **kwargs):
        try:
            user = User.objects.get(userid=userid)
        except User.DoesNotExist:
            return None

        if user.check_password(password):
            return user
        return None

3. 配置Django设置

在settings.py中配置Django设置，以使用自定义认证后端。

# settings.py
AUTHENTICATION_BACKENDS = [
    'usermanagement.auth_backends.CustomUserBackend',
    'django.contrib.auth.backends.ModelBackend',  # 默认的 ModelBackend
]

4. 创建登录API视图

开发一个登录API视图(usermanagement/views.py)，处理userid和密码认证的POST请求。

# usermanagement/views.py
from django.contrib.auth import authenticate, login
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def login_api(request):
    if request.method == 'POST':
        userid = request.POST.get('userid')
        password = request.POST.get('password')

        user = authenticate(request, userid=userid, password=password)
        if user is not None:
            login(request, user)
            return JsonResponse({'success': True})
        else:
            return JsonResponse({'success': False, 'error': '无效的凭据'}, status=401)
    else:
        return JsonResponse({'error': '方法不允许'}, status=405)

5. 实现登录表单和前后端集成

开发一个登录表单(templates/login.html)，并使用AJAX请求在前端与后端进行集成，处理用户认证的成功和失败情况。

<!-- templates/login.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#login-form').submit(function(event) {
                event.preventDefault();

                var userid = $('#userid').val();
                var password = $('#password').val();

                $.ajax({
                    type: 'POST',
                    url: '/api/login/',
                    data: {
                        'userid': userid,
                        'password': password,
                        'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
                    },
                    success: function(response) {
                        if (response.success) {
                            window.location.href = '/';  // 登录成功后重定向到首页
                        } else {
                            alert('登录失败：' + response.error);
                        }
                    },
                    error: function(xhr, errmsg, err) {
                        console.log(xhr.status + ": " + xhr.responseText);
                        alert('登录失败，请稍后再试。');
                    }
                });
            });
        });
    </script>
</head>
<body>
    <h2>用户登录</h2>
    <form id="login-form" method="post">
        {% csrf_token %}
        <label for="userid">用户ID：</label>
        <input type="text" id="userid" name="userid" required><br><br>
        
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required><br><br>
        
        <button type="submit">登录</button>
    </form>
</body>
</html>