项目作者: QQOQ

项目描述 :
vue social captcha,Vue Tencent Captcha,Vue Geetest
高级语言: Vue
项目地址: git://github.com/QQOQ/vue-social-captcha.git
创建时间: 2019-01-25T03:14:02Z
项目社区:https://github.com/QQOQ/vue-social-captcha

开源协议:

下载


vue-social-captcha

一个集极验验证、腾讯验证的vue组件

截图

vue-contribution

依赖

安装

  1. $ npm install vue-social-captcha -S

使用

main.js 文件中引入插件并注册

  1. # main.js
  2. import captcha from 'vue-social-captcha'
  3. Vue.use(captcha)

在项目中使用 vue-social-captcha

  1. <template>
  2. <div id="app">
  3. <Captcha
  4. id="Captcha"
  5. scene="Login"
  6. type="Geetest"
  7. :parm="captchaOption"
  8. @callback="captchaNotice"
  9. url="http://pay.test.com/admin/captcha/"
  10. >
  11. <input id="Captcha" type="button" value="登陆"/>
  12. </Captcha>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. name: 'app',
  18. data () {
  19. return {
  20. captchaOption: {
  21. // 各平台的参数,具体请参阅个平台文档
  22. // 以下为腾讯验证码的参数
  23. // appid: '',
  24. // 以下为极验验证码的参数
  25. product: 'bind',
  26. }
  27. }
  28. },
  29. methods: {
  30. // 回调监听
  31. // status: 1成功,2验证中,0失败
  32. // res: 三方返回的原始数据
  33. captchaNotice(status, res){
  34. console.log(status)
  35. console.log(res)
  36. }
  37. }
  38. }
  39. </script>

props属性

通过以下属性来设置你的验证码

属性 说明 类型 默认值 必须
parm 验证码参数(请参阅各平台文档) Object
url 后端验证地址,返回格式请参阅下面的【数据响应返回格式】 String
type 验证码类型,可选参数 TencentCaptcha Geetest String
id 绑定元素id String
scene 使用场景,会传递给后端,主要用于后端业务逻辑 String

服务端Url请求与响应

数据请求

url请求时会附带以下两个参数到服务端,以便于业务逻辑开发。

  1. {
  2. g_type: 'TencentCaptcha', // 验证码类型
  3. g_scene: 'Login', // 验证码使用场景
  4. }

数据响应返回格式

服务端返回参数主要有三个,分别是code msg data

属性 说明 必须
code 验证码状态,有2个值,1为成功,0为失败 必须
msg 说明文本
data 当验证码类型为Geetest时该数据必须

例:

  1. // 极验验证
  2. {
  3. "code":1,
  4. "msg":"验证成功",
  5. "data":
  6. {
  7. "success":1,
  8. "gt":"29e4e065c7ba05ff77ba896e5d577f89",
  9. "challenge":"bd26076b3afe9ed3c17738f3f8a7eec7",
  10. "new_captcha":1
  11. }
  12. }
  13. // 腾讯验证
  14. {
  15. "code":1,
  16. "msg":"验证成功"
  17. }

相关资源