Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
554c503a
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3341
Star
107
Fork
853
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
103
列表
看板
标记
里程碑
合并请求
85
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
103
Issue
103
列表
看板
标记
里程碑
合并请求
85
合并请求
85
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
未验证
提交
554c503a
编写于
5月 18, 2022
作者:
DCloud_JSON
提交者:
Gitee
5月 18, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update docs/uniCloud/uni-captcha.md.
上级
12f922c8
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
114 addition
and
25 deletion
+114
-25
docs/uniCloud/uni-captcha.md
docs/uniCloud/uni-captcha.md
+114
-25
未找到文件。
docs/uniCloud/uni-captcha.md
浏览文件 @
554c503a
下载地址:
[
https://ext.dcloud.net.cn/plugin?id=4048
](
https://ext.dcloud.net.cn/plugin?id=4048
)
GitCode 仓库:
[
https://gitee.com/dcloud/uni-captcha
](
https://gitee.com/dcloud/uni-captcha
)
...
...
@@ -14,17 +13,17 @@ GitCode 仓库:[https://gitee.com/dcloud/uni-captcha](https://gitee.com/dcloud
-
注册环节:防止无效垃圾注册,从源头进行管理
-
登录环节:防止撞库攻击、暴力破解,保障用户数据
-
短信防刷:减少短信接口被刷情况,减少企业不必要成本
-
互动环节:防止批量垃圾互动信息破坏用户UGC内容生态
-
互动环节:防止批量垃圾互动信息
,
破坏用户UGC内容生态
-
激励领取:防止被批量褥羊毛
## 组成部分
1.
数据表:
[
opendb-verify-codes
](
https://gitee.com/dcloud/opendb/blob/master/collection/opendb-verify-codes/collection.json
)
,用于存储验证码相关数据
2.
公共模块:
`uni-captcha`
,集成获取
验证码、刷新验证码
、校验验证码
2.
公共模块:
`uni-captcha`
,集成获取
、刷新
、校验验证码
3.
云对象:
`uni-captcha-co`
,集成获取验证码的api
4.
云端一体组件:
`uni-captcha`
和
`uni-popup-captcha`
,集成创建、刷新、显示验证码
## 目录结构@catalogue
```
<pre>
├─uni_modules 存放
[
uni_module
](
/uni_modules
)
规范的插件。
│ └─uni-captcha
│ ├─uniCloud
...
...
@@ -40,26 +39,57 @@ GitCode 仓库:[https://gitee.com/dcloud/uni-captcha](https://gitee.com/dcloud
│ │ └─uni-captcha.vue 普通验证码组件
│ └─uni-popup-captcha
│ └─uni-popup-captcha.vue 弹出式验证码组件
```
</pre>
## 原理时序
1.
客户端,向服务端请求某一应用场景
值的验证码。提示:这里的场景值
`scene`
用于防止不同功能的验证码混用,如:
`login`
、
`pay`
2.
服务端,创建验证码,即:向数据表
`opendb-verify-codes`
中创建状态为待验证的验证码记录(作废
旧的同一个设备id和场景值的
验证码记录),并返回格式为base64的图形验证码资源数据。提示:这里的数据表,状态字段名:
`state`
用
`0`
表示待验证,用
`2`
表示已作废。
1.
客户端,向服务端请求某一应用场景
的验证码。提示:这里用场景值
`scene`
,表示应用场景,
用于防止不同功能的验证码混用,如:
`login`
、
`pay`
2.
服务端,创建验证码,即:向数据表
`opendb-verify-codes`
中创建状态为待验证的验证码记录(作废
同一个设备id和场景值的旧
验证码记录),并返回格式为base64的图形验证码资源数据。提示:这里的数据表,状态字段名:
`state`
用
`0`
表示待验证,用
`2`
表示已作废。
3.
客户端,得到验证码图片,用户识别后输入验证码的值与表单数据一起提交至服务端
4.
服务端,云函数或clientDB action中校验验证码,决定是否执行业务逻辑。如果验证码错误则返回错误信息,客户端再重复步骤1-3。提示:验证验证码,可以使用封装好的公共模块的
`verify`
方法
[
详情
](
#校验验证码@verify
)
,也可以直接查库校验。
以上即完整的流程。
如果在前端表单页面中,使用本插件封装好的云端一体组件,并配置组件的属性场景值
`scene`
,即等价于如上步骤1-3;
[
本插件
](
https://ext.dcloud.net.cn/plugin?name=uni-captcha
)
已集成使用示例,另外你也可以参考云端一体验证码插件在
[
uni-starter
](
https://ext.dcloud.net.cn/plugin?id=5057
)
中的应用。
本插件已集成使用示例,使用HBuilderX导入示例项目体验;另外你也可以参考插件在
[
uni-starter
](
https://ext.dcloud.net.cn/plugin?id=5057
)
中的应用。
## 云端一体组件介绍
内置调用
`uni-captcha-co`
云对象集成创建/刷新验证码,组件支持双向数据绑定。
参数说明:
| 字段 | 类型 | 默认值 | 说明 |
| ------------ | ------- | ------- | ------------------------------------------------------------ |
| width | Number | 150 | 图片宽度 |
| height | Number | 40 | 图片高度 |
| background | String | #FFFAE8 | 验证码背景色,设置空字符
`''`
不使用背景颜色 |
| size | Number | 4 | 验证码长度,最多 6 个字符 |
| noise | Number | 4 | 验证码干扰线条数 |
| color | Boolean | false | 字体是否使用随机颜色,当设置
`background`
后恒为
`true`
|
| fontSize | Number | 40 | 字体大小 |
| ignoreChars | String | '' | 忽略哪些字符 |
| mathExpr | Boolean | false | 是否使用数学表达式 |
| mathMin | Number | 1 | 表达式所使用的最小数字 |
| mathMax | Number | 9 | 表达式所使用的最大数字 |
| mathOperator | String | '' | 表达式所使用的运算符,支持
`+`
、
`-`
。不传则随机使用 |
| expiresDate | Number | 180 | 验证码过期时间(s) |
配置方式(可选):
1.
全局配置路径:
[
unicloud配置中心
](
https://ext.dcloud.net.cn/plugin?id=4425
)
,
`uni-config-center`
->
`uni-captcha`
->
`config.json`
2.
在云对象
`uni-captcha-co`
中配置,路径:
`/uni_modules/uni-captcha/uniCloud/cloudfunctions/uni-captcha-co/config.js`
->
`image-captcha`
tip:云对象
`uni-captcha-co`
中的配置,优先级大于在
`unicloud配置中心`
的配置
**替换字体:**
路径:
`/uni_modules/uni-captcha/uniCloud/cloudfunctions/common/uni-captcha/fonts/font.ttf`
。
请保证字体格式为
`.ttf`
且包含
`ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-`
字符
## 组件介绍
### 普通验证码组件
**组件名:uni-captcha**
云端一体组件,内置调用
`uni-captcha-co`
云对象创建/刷新验证码,支持双向数据绑定。
仅需传入属性
`scene`
:场景值即可。
组件遵从
[
easycom组件规范
](
https://uniapp.dcloud.io/component/#easycom%E7%BB%84%E4%BB%B6%E8%A7%84%E8%8C%83
)
组件遵从
[
easycom组件规范
](
https://uniapp.dcloud.io/component/#easycom%E7%BB%84%E4%BB%B6%E8%A7%84%E8%8C%83
)
,
使用示例:
使用示例:
```
html
<template>
<uni-captcha
scene=
"场景值"
v-model=
"验证码的值"
></uni-captcha>
...
...
@@ -75,6 +105,8 @@ GitCode 仓库:[https://gitee.com/dcloud/uni-captcha](https://gitee.com/dcloud
### 弹出式验证码组件
**组件名:uni-popup-captcha**
组件遵从
[
easycom组件规范
](
https://uniapp.dcloud.io/component/#easycom%E7%BB%84%E4%BB%B6%E8%A7%84%E8%8C%83
)
验证码实现人机校验等作用的同时,降低了用户体验。为了提升用户体验:绝大部分情况下,验证码应当是非常态的,当接口被高频调用的情况下才需要。
另外验证码会使得我们的前端界面设计变得复杂。所以弹出式验证码组件,应需而生。
...
...
@@ -124,8 +156,26 @@ GitCode 仓库:[https://gitee.com/dcloud/uni-captcha](https://gitee.com/dcloud
## 公共模块
-
云端一体组件
`uni-captcha`
和
`uni-popup-captcha`
,已经集成公共模块的获取验证码
`create`
和刷新验证码
`refresh`
接口。
-
引入公共模块请参考
[
云函数公用模块
](
https://uniapp.dcloud.net.cn/uniCloud/cf-common
)
### 获取验证码@create
用法:
`uniCaptcha.create(Object params);`
用于新的验证码记录(使用云端一体组件的用户可以忽略)
示例:
```
js
//引入公共模块
const
uniCaptcha
=
require
(
'
uni-captcha
'
)
module
.
exports
=
{
async
createCaptcha
({
scene
})
{
return
await
uniCaptcha
.
create
({
scene
,
width
:
100
,
height
:
44
});
}
}
```
**参数说明**
...
...
@@ -133,21 +183,26 @@ GitCode 仓库:[https://gitee.com/dcloud/uni-captcha](https://gitee.com/dcloud
| ------------ | ------- | ---- | ------- | ------------------------------------------------------------ |
| scene | String | 是 | - | 使用场景值,用于防止不同功能的验证码混用,如:
`login`
、
`pay`
|
| deviceId | String | - | - | 设备 id,如果不传,将自动从 uniCloud 上下文获取 |
| uniPlatform | String | - | - | uni-app 运行平台 |
| width | Number | - | 150 | 图片宽度 |
| uniPlatform | String | - | - | uni-app 运行平台 |
| height | Number | - | 40 | 图片高度 |
| background | String | - | #FFFAE8 | 验证码背景色,设置空字符
`''`
不使用背景颜色 |
| size | Number | - | 4 | 验证码长度,最多 6 个字符 |
| noise | Number | - | 4 | 验证码干扰线条数 |
| color | Boolean | - | false | 字体是否使用随机颜色,当设置
`background`
后恒为
`true`
|
| fontSize | Number | - | 40 | 字体大小 |
| ignoreChars | String | - | '' | 忽略
那
些字符 |
| ignoreChars | String | - | '' | 忽略
哪
些字符 |
| mathExpr | Boolean | - | false | 是否使用数学表达式 |
| mathMin | Number | - | 1 | 表达式所使用的最小数字 |
| mathMax | Number | - | 9 | 表达式所使用的最大数字 |
| mathOperator | String | - | '' | 表达式所使用的运算符,支持
`+`
、
`-`
。不传随机使用 |
| mathOperator | String | - | '' | 表达式所使用的运算符,支持
`+`
、
`-`
。不传
则
随机使用 |
| expiresDate | Number | - | 180 | 验证码过期时间(s) |
**注意:**
-
**自`uni-captcha 0.3.0`起,支持在[unicloud配置中心](https://ext.dcloud.net.cn/plugin?id=4425)`uni-config-center`->`uni-captcha`->`config.json`中配置参数默认值**
-
如果想替换字体,请保证字体格式为
`.ttf`
且包含
`ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-`
字符
**响应参数**
| 字段 | 类型 | 说明 |
...
...
@@ -156,15 +211,34 @@ GitCode 仓库:[https://gitee.com/dcloud/uni-captcha](https://gitee.com/dcloud
| errMsg | String | 详细信息 |
| captchaBase64 | String | 验证码:base64 格式 |
`注意:`
-
重新生成后,上条验证码不作废
-
刷新验证码,上条验证码作废
-
如果想替换字体,请保证字体格式为
`.ttf`
且包含
`ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-`
字符
### 刷新验证码@refresh
用法:
`uniCaptcha.refresh(Object params);`
作废相同设备id和场景值的验证码记录,并创建新的验证码记录(使用云端一体组件的用户可以忽略)
示例:
```
js
//引入公共模块
const
uniCaptcha
=
require
(
'
uni-captcha
'
)
const
db
=
uniCloud
.
database
();
const
verifyCodes
=
db
.
collection
(
'
opendb-verify-codes
'
)
module
.
exports
=
{
async
refreshCaptcha
({
scene
})
{
let
res
=
await
verifyCodes
.
where
({
scene
,
deviceId
,
state
:
0
}).
limit
(
1
).
get
()
if
(
res
.
data
.
length
){
return
await
uniCaptcha
.
refresh
({
scene
,
width
:
100
,
height
:
44
});
}
else
{
return
{
errCode
:
"
uni-captcha-refresh-fail
"
,
errMsg
:
'
未找到相同设备id和场景值的有效验证码记录
'
}
}
}
}
```
**参数说明**
...
...
@@ -187,8 +261,21 @@ GitCode 仓库:[https://gitee.com/dcloud/uni-captcha](https://gitee.com/dcloud
### 校验验证码@verify
用法:
`uniCaptcha.verify(Object params);`
用于验证用户输入的验证码是否正确
```
js
const
uniCaptcha
=
require
(
'
uni-captcha
'
)
module
.
exports
=
{
async
verify
({
scene
,
captcha
})
{
let
res
=
await
uniCaptcha
.
verify
({
scene
,
captcha
})
if
(
res
.
code
==
0
){
//...这里写你的业务逻辑
}
else
{
return
res
}
}
}
```
**参数说明**
...
...
@@ -208,9 +295,11 @@ GitCode 仓库:[https://gitee.com/dcloud/uni-captcha](https://gitee.com/dcloud
`注意:`
-
若提示验证码失效,请重新获取
-
如果为了更小的代码体积,不想使用本方法,也可以直接查库校验
## 错误码
**已过期,uni-captcha 0.3.0起,返回值均已符合[uniCloud响应体规范](https://uniapp.dcloud.io/uniCloud/cf-functions.html#resformat)**
_详细信息请查看 message 中查看_
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录