uni-app接入

1. 兼容性

  1. 微信小程序,H5页面等(uni-app支持的小程序系系列,H5系列)

2. 初始化组件

  1. 1)将view/uni-app/src/pages/verify文件夹copy到自己项目中
  2. 2)下载相关依赖, npm install crypto-js -S

基础示例

  1. <template>
  2. <Verify
  3. @success="'success'" //验证成功的回调函数
  4. :mode="'pop'" //调用的模式
  5. :captchaType="'blockPuzzle'" //调用的类型 点选或者滑动
  6. :imgSize="{ width: '330px', height: '155px' }" //图片的大小对象
  7. ref="verify"
  8. ></Verify>
  9. //mode="pop"模式
  10. <button @click="useVerify">调用验证组件</button>
  11. </template>
  12. ****注: mode为"pop"时,使用组件需要给组件添加ref值,并且手动调用show方法 例: this.$refs.verify.show()**** <br/>
  13. ****注: mode为"fixed"时,无需添加ref值,无需调用show()方法****
  14. <script>
  15. //引入组件
  16. import Verify from "./../../components/verifition/Verify";
  17. export default {
  18. name: 'app',
  19. components: {
  20. Verify
  21. }
  22. methods:{
  23. success(params){
  24. // params 返回的二次验证参数, 和登录参数一起回传给登录接口,方便后台进行二次验证
  25. },
  26. useVerify(){
  27. this.$refs.verify.show()
  28. }
  29. }
  30. }
  31. </script>
  32. </script>

注意事项

  1. 后端请求地址根据部署情况到:\view\uni-app\src\pages\verify\utils\request.js 第二行 修改路劲
  1. let baseUrl = "https://mirror.anji-plus.com/captcha-api"

3.回调事件

参数类型说明
success(params)funciton验证码匹配成功后的回调函数,params为返回需回传服务器的二次验证参数
errorfunciton验证码匹配失败后的回调函数
readyfunciton验证码初始化成功的回调函数

4. 验证码参数

参数类型说明
captchaTypeString1)滑动拼图 blockPuzzle 2)文字点选 clickWord
modeString验证码的显示方式,弹出式pop,固定fixed,默认:mode : ‘pop’
vSpaceString验证码图片和移动条容器的间隔,默认单位是px。如:间隔为5px,默认:vSpace:5
explainString滑动条内的提示,不设置默认是:’向右滑动完成验证’
imgSizeObject其中包含了width、height两个参数,分别代表图片的宽度和高度,支持百分比方式设置 如:{width:’400px’,height:’200px’}

5.1默认接口api地址

请求URL请求方式
/captcha/getPost
/captcha/checkPost

5.2 获取验证码接口详情

接口地址:http://*:*/captcha/get

请求参数:
  1. {
  2. "captchaType": "blockPuzzle" //验证码类型 clickWord
  3. }
响应参数:
  1. {
  2. "repCode": "0000",
  3. "repData": {
  4. "originalImageBase64": "底图base64",
  5. "point": { //默认不返回的,校验的就是该坐标信息,允许误差范围
  6. "x": 205,
  7. "y": 5
  8. },
  9. "jigsawImageBase64": "滑块图base64",
  10. "token": "71dd26999e314f9abb0c635336976635", //一次校验唯一标识
  11. "result": false,
  12. "opAdmin": false
  13. },
  14. "success": true,
  15. "error": false
  16. }

5.3 核对验证码接口详情

请求接口:http://*:*/captcha/check

请求参数:
  1. {
  2. "captchaType": "blockPuzzle",
  3. "pointJson": "QxIVdlJoWUi04iM+65hTow==", //aes加密坐标信息
  4. "token": "71dd26999e314f9abb0c635336976635" //get请求返回的token
  5. }
响应参数:
  1. {
  2. "repCode": "0000",
  3. "repData": {
  4. "captchaType": "blockPuzzle",
  5. "token": "71dd26999e314f9abb0c635336976635",
  6. "result": true,
  7. "opAdmin": false
  8. },
  9. "success": true,
  10. "error": false
  11. }