-
以下验证码使用 appsettings.json 配置,与上方展示的验证码不同,但可以正常校验
-
![点击刷新 测试验证码]()
-
验证码ID: {{captchaId}}
+
+
⚠️ 架构说明:
+
上方展示的验证码使用 /captcha/dynamic
接口,通过 CaptchaServiceBuilder
创建独立实例(支持自定义配置),因此无法直接校验。
+
下方提供使用注入实例的验证码用于校验测试(使用 appsettings.json 配置)。
+
💡 这是 LazyCaptcha 的架构设计:Builder方式适合灵活展示,注入方式适合业务校验。
+
+
+
+
校验功能测试(使用注入实例)
+
+
![点击刷新验证码 测试验证码]()
+
验证码ID: {{testCaptchaId}}
+
使用 appsettings.json 配置(CodeLength=2, CaptchaType=10)
+
+
diff --git a/Sample.NetCore/wwwroot/index.js b/Sample.NetCore/wwwroot/index.js
index 50d8537..3b26e3a 100644
--- a/Sample.NetCore/wwwroot/index.js
+++ b/Sample.NetCore/wwwroot/index.js
@@ -55,6 +55,7 @@ new Vue({
captchaImageUrl: '',
testCaptchaUrl: '',
captchaId: '',
+ testCaptchaId: '',
validateCode: '',
validateResult: null
}
@@ -137,18 +138,14 @@ new Vue({
async generateCaptcha(captcha) {
// 生成新的验证码URL(添加时间戳确保每次都是新图片)
const timestamp = new Date().getTime()
-
- // 展示区域:使用dynamic接口显示用户选择的类型和字体(仅供视觉展示)
- const displayId = `display_${timestamp}`
- this.captchaImageUrl = `captcha/dynamic?id=${encodeURIComponent(displayId)}&type=${captcha.type}&font=${captcha.font}&textBold=${this.textBold}&_t=${timestamp}`
-
- // 校验区域:使用demo接口生成可校验的验证码
this.captchaId = `demo_${timestamp}`
- this.testCaptchaUrl = `captcha/demo?id=${encodeURIComponent(this.captchaId)}&_t=${timestamp}`
+
+ // 使用dynamic接口,显示用户选择的类型和字体,同时这个ID也用于校验
+ this.captchaImageUrl = `captcha/dynamic?id=${encodeURIComponent(this.captchaId)}&type=${captcha.type}&font=${captcha.font}&textBold=${this.textBold}&_t=${timestamp}`
// 生成请求示例(基于dynamic接口)
const baseUrl = window.location.origin
- const apiUrl = `${baseUrl}/captcha/dynamic?id=${encodeURIComponent(displayId)}&type=${captcha.type}&font=${captcha.font}&textBold=${this.textBold}`
+ const apiUrl = `${baseUrl}/captcha/dynamic?id=${encodeURIComponent(this.captchaId)}&type=${captcha.type}&font=${captcha.font}&textBold=${this.textBold}`
// cURL命令
this.curlCommand = `curl -X GET "${apiUrl}" \\
@@ -156,11 +153,21 @@ new Vue({
--output captcha.gif`
// HTTP请求原文
- this.httpRequest = `GET /captcha/dynamic?id=${displayId}&type=${captcha.type}&font=${captcha.font}&textBold=${this.textBold} HTTP/1.1
+ this.httpRequest = `GET /captcha/dynamic?id=${this.captchaId}&type=${captcha.type}&font=${captcha.font}&textBold=${this.textBold} HTTP/1.1
Host: ${window.location.host}
Accept: image/gif
User-Agent: Mozilla/5.0
-Connection: keep-alive`
+Connection: keep-alive
+
+注意:
+- 此接口使用 CaptchaServiceBuilder 创建独立实例
+- 配置参数: type=${captcha.type}, font=${captcha.font}, textBold=${this.textBold}
+- 由于使用独立缓存,此验证码无法通过 /captcha/validate 接口校验
+- 如需测试校验功能,请使用注入实例的接口(见下方说明)`
+
+ // 自动生成测试验证码(使用注入实例,可以校验)
+ this.testCaptchaId = `test_${timestamp}`
+ this.testCaptchaUrl = `captcha/demo?id=${encodeURIComponent(this.testCaptchaId)}&_t=${timestamp}`
// 重置验证结果
this.validateCode = ''
@@ -194,6 +201,14 @@ Connection: keep-alive`
this.captchaImageUrl = ''
this.testCaptchaUrl = ''
this.captchaId = ''
+ this.testCaptchaId = ''
+ this.validateCode = ''
+ this.validateResult = null
+ },
+ generateTestCaptcha() {
+ const timestamp = new Date().getTime()
+ this.testCaptchaId = `test_${timestamp}`
+ this.testCaptchaUrl = `captcha/demo?id=${encodeURIComponent(this.testCaptchaId)}&_t=${timestamp}`
this.validateCode = ''
this.validateResult = null
},
@@ -207,14 +222,14 @@ Connection: keep-alive`
let apiUrl
if (isReusable) {
// 可重复校验 - 使用 validate2 接口(不删除验证码)
- apiUrl = `captcha/validate2?id=${encodeURIComponent(this.captchaId)}&code=${encodeURIComponent(this.validateCode)}`
+ apiUrl = `captcha/validate2?id=${encodeURIComponent(this.testCaptchaId)}&code=${encodeURIComponent(this.validateCode)}`
} else {
// 一次性校验 - 使用 validate 接口(验证后删除)
- apiUrl = `captcha/validate?id=${encodeURIComponent(this.captchaId)}&code=${encodeURIComponent(this.validateCode)}`
+ apiUrl = `captcha/validate?id=${encodeURIComponent(this.testCaptchaId)}&code=${encodeURIComponent(this.validateCode)}`
}
console.log('校验请求:', {
- id: this.captchaId,
+ id: this.testCaptchaId,
code: this.validateCode,
url: apiUrl,
isReusable: isReusable
@@ -231,7 +246,7 @@ Connection: keep-alive`
url: window.location.origin + '/' + apiUrl,
response: JSON.stringify(result),
timestamp: new Date().toLocaleTimeString(),
- requestId: this.captchaId,
+ requestId: this.testCaptchaId,
requestCode: this.validateCode
}
@@ -243,7 +258,7 @@ Connection: keep-alive`
url: `captcha/validate${isReusable ? '2' : ''}`,
response: `Error: ${error.message}`,
timestamp: new Date().toLocaleTimeString(),
- requestId: this.captchaId,
+ requestId: this.testCaptchaId,
requestCode: this.validateCode
}
}
--
Gitee