登录页面的验证码通常用于防止机器人或恶意用户自动登录系统。验证码可以通过多种方式生成和显示，包括图片验证码、音频验证码、短信验证码等。下面是一个简单的图片验证码的示例代码，使用Python语言和Flask框架来创建后端服务，前端使用HTML和JavaScript来生成和显示验证码。请注意，这只是一个基本示例，实际应用中可能需要更复杂的实现和安全性措施。
后端（Python Flask）：
from flask import Flask, render_template, request, redirect, url_for
import random
import string
import os
from PIL import Image, ImageDraw, ImageFont
import io
import base64
import captcha
from io import BytesIO
from flask_cors import CORS
import numpy as np
import cv2
import random
import uuid
import datetime
import hashlib
import hmac
import requests
from functools import wraps
from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user
from werkzeug.security import generate_password_hash, check_password_hash
from flask_sqlalchemy import SQLAlchemy
db = SQLAlchemy() # 创建数据库对象实例，用于操作数据库表结构创建和数据操作等任务，具体配置参考flask官方文档，此处省略数据库配置细节。
app = Flask(__name__) # 创建 Flask 应用实例对象，具体配置参考flask官方文档，此处省略配置细节。
login_manager = LoginManager() # 创建登录管理器实例对象，用于处理用户登录状态管理相关功能，具体配置参考flask官方文档，此处省略配置细节。
app.config[’SECRET_KEY’] = ’your secret key’ # 设置密钥用于加密数据等安全操作，具体配置参考flask官方文档，此处省略配置细节。 省略数据库模型定义等代码... 省略登录注册逻辑代码... 在这里添加验证码生成逻辑代码： 生成验证码函数： def generate_captcha(session): captcha_text = ’’.join(random.choices(string.ascii_uppercase + string.digits, k=random.randint(4, 6))) session[’captcha’] = captcha_text return captcha_text 生成验证码图片函数： def generate_captcha_image(captcha_text): image = Image.new(’RGB’, (100, 50), color=(random.randint(256), random.randint(256), random.randint(256))) font = ImageFont.truetype(’arial.ttf’, 30) draw = ImageDraw.Draw(image) draw.text((5, 5), captcha_text, font=font) output = io.BytesIO() image.save(output, format=’PNG’) return base64.b64encode(output.getvalue()).decode(’utf-8’) 登录路由中添加验证码处理逻辑代码： @app.route(’/login’, methods=[’GET’, ’POST’]) def login(): if request.method == ’POST’: username = request.form[’username’] password = request.form[’password’] captcha = session[’captcha’] # 这里添加验证码验证逻辑代码，比如检查用户输入的验证码是否和session中的一致 if not validate_captcha(request.form[’captcha’], captcha): return render_template(’login.html’, error=’Invalid captcha’) # 其他登录逻辑代码... return render_template(’login.html’) 前端（HTML + JavaScript）： 在HTML中添加一个用于显示验证码的图片和一个输入框用于用户输入验证码： <img id="captcha-img" src=https://www.271shop.com/static/image/nopic320.png url_for(’generate_captcha’) }}" alt="captcha"> <input type="text" id="captcha-input" name="captcha"> 在JavaScript中添加一个用于刷新验证码的功能： function refreshCaptcha() { fetch(’/generate-captcha’) .then(response => response.blob()) .then(blob => { const img = document.getElementById(’captcha-img’); img.src = URL.createObjectURL(blob); }) } 注意：以上代码只是一个简单的示例，实际应用中还需要考虑安全性、用户体验等多方面因素，比如使用更安全的验证码生成方式、添加验证码过期时间等，同时还需要根据实际需求进行数据库配置、用户模型定义等代码的编写。
