# 前端字符验证码API
是一个免费直接可用的随机字符验证码API,可以用于人机行为验证的一些场景(比如登录场景),且提供了一些参数配置如下
| 序号 | 参数 | 值 | 说明 |
|---|---|---|---|
| 1 | CaptchaSize | number | 字体大小(px) |
| 2 | CaptchaNoise | number | 噪声线条数 |
| 3 | CaptchaW | number | svg宽度(px) |
| 4 | CaptchaH | number | svg高度(px) |
| 5 | CaptchaNum | number | 验证字符数量 |
| 6 | ColaKey | string | 必填参数,唯一的随机Colakey,官网获取 |
注意!!!!: 如果您还没有Colakey,请先请前往官网获取 官网地址:http://luckycola.com.cn/ (opens new window)
# 一、使用步骤
# 1.如何获取验证码
重要提示:建议使用https协议,当https协议无法使用时再尝试使用http协议 请求下面接口即可
请求方式: GET
http(s)://luckycola.com.cn/captcha/getCaptcha?CaptchaSize=44&CaptchaNoise=9&CaptchaW=100&CaptchaH=80$CaptchaNum=5
1
# 2.如何验证验证码
请求下面接口即可 请求方式: POST
参数:
| 序号 | 参数 | 值 | 说明 |
|---|---|---|---|
| 1 | captcha | string | 用户输入的验证码 |
| 2 | ColaKey | string | 必填参数,唯一的随机Colakey,官网获取 |
http(s)://luckycola.com.cn/captcha/validateCaptcha
1
请求响应值code=0为验证成功,否则验证失败
注意!!!!: 如果您还没有Colakey,请先请前往官网获取 官网地址:http://luckycola.com.cn/ (opens new window)
# 二、在线demo
在线demo:点击查看>> (opens new window)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>captcha</title>
</head>
<body>
<div id="app">
<img :src="captchaUrl" alt="captcha"
@click="getCaptcha" ref="captcha">
<input
type="text"
style="display: block;margin: 10px 0 10px 0;"
placeholder="请输入验证码"
v-model="message">
<div v-if="errmsg" style="color: red; font-size: 12px; margin-bottom: 10px;">{{errmsg}}</div>
<button @click="submitFn">提交验证</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.global.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
const { createApp } = Vue
let app = createApp({
data() {
return {
message: '',
errmsg: '',
captchaUrl: 'http://luckycola.com.cn/captcha/getCaptcha?CaptchaSize=44&CaptchaNoise=4&CaptchaW=100&CaptchaH=80&CaptchaNum=4&ColaKey=NaTu16773439832446NZkH6'
// captchaUrl: 'http://localhost/captcha/getCaptcha?CaptchaSize=44&CaptchaNoise=4&CaptchaW=100&CaptchaH=80&CaptchaNum=4&ColaKey=NaTu16773439832446NZkH6'
}
},
methods: {
// 获取一个新的图片验证码
getCaptcha () {
// 每次指定的src要不一样，img才会重新请求，可以使用Date.now()小技巧
this.$refs.captcha.src = this.captchaUrl + '&time=' + Date.now()
},
submitFn () {
let me = this;
if (!this.message) {
return this.errmsg = '请输入验证码'
};
axios.d
axios({
url: 'http://luckycola.com.cn/captcha/validateCaptcha',
method: 'post',
withCredentials: true,
data: {
captcha: this.message,
ColaKey: 'NaTu16773439832446NZkH6'
}
})
.then(function (res) {
// 请求成功返回
let resData = res.data;
if (resData.code === 0) {
alert('验证成功');
} else if (resData.code === -99) {
alert(resData.msg);
} else {
alert('验证码错误,验证失败');
}
console.log(res);
me.getCaptcha();
})
.catch(function (err) {
// 请求失败返回
console.log(err);
alert('请求失败');
})
}
},
}).mount('#app');
app.$watch('message', function(val) {
console.log('message change=>', val);
})
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
注意: 请求时需要允许携带cookie!!!