前端接入

1. 兼容性

  1. IE8+、ChromeFirefox.(其他未测试)

2. 初始化组件

  1. 1)复制view/vue/src/components/verifition文件夹,到自己工程对应目录下,在登录页面插入如下代码。
  2. 2)安装请求和加密依赖
  3. npm install axios 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()****
  13. ****注: mode为"fixed"时,无需添加ref值,无需调用show()方法****
  14. <script>
  15. //引入组件
  16. importVerify from "./../../components/verifition/Verify";
  17. exportdefault{
  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>

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. 组件内部默认请求服务器地址: process.env.BASE_API ;vue项目打包配置地址,方便分环境打包
请求参数:
  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. 组件内部默认请求服务器地址: process.env.BASE_API ;vue项目打包配置地址,方便分环境打包
请求参数:
  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. }