1.0.1 • Published 3 years ago

access-vue-geetest v1.0.1

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

极验插件

文档地址: https://docs.geetest.com/sensebot/deploy/client/web

使用方式

npm install access-vue-geetest --save

vue中使用

<template>
  <div>
    <vue-geetest disable={disable} open-api={{url,...or}} @validSuccess="validSuccess">极验</vue-geetest>
  </div>
</template>
import { Geetest } from 'access-vue-geetest'

export default {
  components: {
    [Geetest.name]: Geetest
  },
  methods: {
    validSuccess() {
      console.log('校验成功')
    }
  }
}

自定义使用方式

import { loadScript } from 'access-vue-geetest'

const options = {
  fetchOpt: {
    url,
    options,
  }, // 请求后端接口获取极验配置
  sdk, // sdk url地址 默认 https://img.idanchuang.com/resource/files/gt.js
  captcha() {
    return new Promise((resolve) => {
      // 请求后端接口获取极验配置
      fetch(url).then(json => json.json()).then(response => {
        const { gt, challenge } = response.data
        window.initGeetest && window.initGeetest({
          gt,
          challenge,
          offline: !success, // 表示用户后台检验极验服务器是否宕机
          product: 'bind',
          width: `300px`,
          https: true
        }, (captchaObj) => {
          captchaObj
            .onReady(() => {
              console.log('onReady')
              resolve(captchaObj)
            })
        })
      })
    })
  } // 校验方法 返回promise
}
// 加载极验sdk
loadScript(options).then(captchaObj => {
  captchaObj.onSuccess(() => {
    const result = captchaObj.getValidate()
    if (!result) {
      return
    }
    // 校验通过后续
    ...
  })
})