求助：如何在Strapi 5.2.0后台登录表单添加验证码字段？

Strapi 5的后台登录表单确实没有预留自定义组件注入点，旧版本的全量替换方法也不适用，但可以通过官方提供的Admin UI扩展机制来实现，完全不需要补丁方案，步骤如下：

1. 替换默认登录页面组件 #

Strapi 5允许通过src/admin/app.tsx扩展Admin UI，直接替换登录页面组件来添加验证码字段：

首先在项目根目录创建src/admin/app.tsx（如果不存在），写入以下代码：

import React from 'react';
import { LoginPage as BaseLoginPage } from '@strapi/admin/admin/src/pages/LoginPage';
import { Input } from '@strapi/design-system/Input';
import { Label } from '@strapi/design-system/Label';
import { Button } from '@strapi/design-system/Button';

const LoginPage = (props) => {
  const [captcha, setCaptcha] = React.useState('');
  const [captchaImg, setCaptchaImg] = React.useState('');

  // 加载/刷新验证码
  const refreshCaptcha = async () => {
    const res = await fetch('/api/captcha/generate', { method: 'GET' });
    const blob = await res.blob();
    setCaptchaImg(URL.createObjectURL(blob));
  };

  React.useEffect(() => {
    refreshCaptcha();
  }, []);

  const handleSubmit = async (event) => {
    event.preventDefault();
    // 先验证验证码
    const verifyRes = await fetch('/api/captcha/verify', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ captcha })
    });
    const { isValid } = await verifyRes.json();

    if (!isValid) {
      alert('验证码错误');
      refreshCaptcha();
      return;
    }

    // 验证码通过，执行原登录逻辑
    await props.handleSubmit(event);
  };

  return (
    <BaseLoginPage
      {...props}
      handleSubmit={handleSubmit}
    >
      {/* 自定义验证码字段区域 */}
      <div style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <div style={{ flex: 1 }}>
            <Label htmlFor="captcha">验证码</Label>
            <Input
              type="text"
              name="captcha"
              id="captcha"
              value={captcha}
              onChange={(e) => setCaptcha(e.target.value)}
              required
              placeholder="请输入验证码"
            />
          </div>
          <Button
            variant="secondary"
            onClick={refreshCaptcha}
            style={{ height: 48 }}
          >
            <img src={captchaImg} alt="验证码" style={{ height: '100%' }} />
          </Button>
        </div>
      </div>
    </BaseLoginPage>
  );
};

export default {
  bootstrap(app) {
    app.injectComponent('LoginPage', 'replace', LoginPage);
  },
};

2. 后端实现验证码生成与验证逻辑 #

2.1 安装验证码依赖（可选，自生成验证码用） #

如果不需要第三方验证码服务，用自生成的SVG验证码，先安装依赖：

npm install svg-captcha

2.2 创建验证码服务与路由 #

在src/api/captcha目录下创建以下文件：

控制器文件 src/api/captcha/controllers/captcha.js

'use strict';
const svgCaptcha = require('svg-captcha');

module.exports = {
  // 生成验证码
  generate: async (ctx) => {
    const captcha = svgCaptcha.create({
      size: 4,
      noise: 3,
      width: 120,
      height: 48
    });
    // 把验证码文本存在session里，用于后续验证
    ctx.session.captcha = captcha.text.toLowerCase();
    ctx.type = 'image/svg+xml';
    ctx.send(captcha.data);
  },

  // 验证验证码
  verify: async (ctx) => {
    const { captcha } = ctx.request.body;
    const isValid = captcha?.toLowerCase() === ctx.session.captcha;
    
    // 验证后清空session里的验证码，防止重复使用
    if (isValid) {
      delete ctx.session.captcha;
    }

    ctx.send({ isValid });
  },
};

路由文件 src/api/captcha/routes/captcha.js

'use strict';

module.exports = {
  routes: [
    {
      method: 'GET',
      path: '/captcha/generate',
      handler: 'captcha.generate',
      config: {
        auth: false, // 无需登录即可访问
      },
    },
    {
      method: 'POST',
      path: '/captcha/verify',
      handler: 'captcha.verify',
      config: {
        auth: false,
      },
    },
  ],
};

2.3 启用Session #

确保config/middlewares.js里包含session中间件：

module.exports = [
  'strapi::errors',
  'strapi::security',
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::session', // 确保这个存在
  'strapi::favicon',
  'strapi::public',
];

3. 测试效果 #

启动Strapi服务后，访问后台登录页面，就能看到新增的验证码字段，输入正确验证码后才能完成登录。

这种方式完全基于Strapi官方的扩展机制，不属于补丁方案，符合规范，也能完美适配Strapi 5.2.0版本。

内容的提问来源于stack exchange，提问作者RadioZahra