ASP.NET Core 7+React项目Dev/QA环境OTP生成验证方案咨询

一、低环境部署可行性 #

完全可行。Dev/QA等测试环境无需对接真实短信网关，通过模拟OTP生成、发送、验证逻辑即可覆盖开发测试需求：

• 避免产生真实短信费用，也不会对真实用户造成干扰；
• 可灵活控制OTP的有效期、生成规则，方便调试边界场景（比如过期验证、错误OTP重试等）；
• 能和生产环境的核心逻辑保持一致，确保测试有效性。

二、后端（C#/ASP.NET Core 7）模拟方案 #

1. 自定义模拟实现（推荐） #

通过抽象接口隔离真实短信服务和模拟服务，在测试环境注入模拟实现即可。示例代码：

// 定义统一接口
public interface ISmsOtpService
{
    Task<string> GenerateAndSendOtpAsync(string phoneNumber);
    Task<bool> ValidateOtpAsync(string phoneNumber, string otp);
}

// 测试环境模拟实现
public class MockSmsOtpService : ISmsOtpService
{
    private readonly IMemoryCache _cache;
    private readonly Random _random = new Random();
    private const int OtpLength = 6;
    private readonly TimeSpan _otpExpiry = TimeSpan.FromMinutes(5);

    public MockSmsOtpService(IMemoryCache cache)
    {
        _cache = cache;
    }

    public Task<string> GenerateAndSendOtpAsync(string phoneNumber)
    {
        // 生成6位数字OTP
        var otp = new string(Enumerable.Range(0, OtpLength)
            .Select(_ => _random.Next(0, 10).ToString()[0])
            .ToArray());
        
        // 存储OTP到缓存
        _cache.Set($"OTP_{phoneNumber}", otp, _otpExpiry);
        
        // 控制台输出OTP，方便开发人员查看
        Console.WriteLine($"[模拟短信] 发送OTP到{phoneNumber}：{otp}");
        
        return Task.FromResult(otp);
    }

    public Task<bool> ValidateOtpAsync(string phoneNumber, string otp)
    {
        var isValid = _cache.TryGetValue($"OTP_{phoneNumber}", out string storedOtp) && storedOtp == otp;
        // 验证后可清除缓存，避免重复使用
        if (isValid) _cache.Remove($"OTP_{phoneNumber}");
        return Task.FromResult(isValid);
    }
}

在Program.cs中根据环境注入：

var env = builder.Environment;
if (env.IsDevelopment() || env.IsEnvironment("QA"))
{
    builder.Services.AddScoped<ISmsOtpService, MockSmsOtpService>();
}
else
{
    // 生产环境注入真实短信服务实现
    builder.Services.AddScoped<ISmsOtpService, RealSmsOtpService>();
}

2. 可选类库辅助 #

• AspNetCore.Identity：自带TotpSecurityStampBasedTokenProvider，可用于生成符合TOTP标准的OTP，配合自定义模拟发送逻辑即可；
• FluentValidation：可用于验证OTP的格式（比如必须是6位数字），确保输入合法性。

三、前端（React）模拟方案 #

1. 自定义模拟接收组件（推荐） #

在测试环境添加一个模拟短信接收面板，实时获取后端生成的OTP，方便测试人员快速验证。示例代码：

import { useState, useEffect } from 'react';

// 模拟短信接收组件，仅在Dev/QA环境显示
const MockOtpReceiver = ({ phoneNumber }) => {
    const [currentOtp, setCurrentOtp] = useState('');

    useEffect(() => {
        if (!phoneNumber) return;
        
        // 轮询后端接口获取当前手机号的OTP
        const interval = setInterval(async () => {
            try {
                const res = await fetch(`/api/otp/mock/${phoneNumber}`);
                if (res.ok) {
                    const data = await res.json();
                    setCurrentOtp(data.otp || '');
                }
            } catch (err) {
                console.error('获取模拟OTP失败:', err);
            }
        }, 1000);

        return () => clearInterval(interval);
    }, [phoneNumber]);

    return (
        <div className="mock-otp-receiver" style={{ padding: '1rem', background: '#f5f5f5', marginTop: '1rem', borderRadius: '4px' }}>
            <h4>🔍 Dev/QA环境模拟短信</h4>
            <p>当前手机号：{phoneNumber}</p>
            <p>收到的OTP：<strong style={{ fontSize: '1.2rem', color: '#2563eb' }}>{currentOtp || '暂无'}</strong></p>
            {currentOtp && (
                <button onClick={() => navigator.clipboard.writeText(currentOtp)} style={{ marginTop: '0.5rem', padding: '0.3rem 0.8rem' }}>
                    复制OTP
                </button>
            )}
        </div>
    );
};

export default MockOtpReceiver;

使用时，根据环境变量控制显示：

import MockOtpReceiver from './MockOtpReceiver';

const OtpVerification = () => {
    const [phoneNumber, setPhoneNumber] = useState('');
    // 判断是否为测试环境
    const isTestEnv = process.env.REACT_APP_ENV === 'development' || process.env.REACT_APP_ENV === 'qa';

    return (
        <div>
            <input type="text" placeholder="输入手机号" onChange={(e) => setPhoneNumber(e.target.value)} />
            <button>发送OTP</button>
            <input type="text" placeholder="输入OTP" />
            <button>验证</button>
            {/* 测试环境显示模拟接收面板 */}
            {isTestEnv && phoneNumber && <MockOtpReceiver phoneNumber={phoneNumber} />}
        </div>
    );
};

2. 可选类库 #

• react-otp-input：用于构建美观的OTP输入框，支持自动聚焦、格式验证等功能，配合模拟接收组件使用；
• 无需专门的模拟类库，自定义组件足够灵活，能适配不同的测试场景。

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