vue-graphic-verify v1.1.9

vue-graphic-verify

A vue graphic verify project, that need to be used with another authentication service, you can visit website of graphic verify service to apply for an account.

Installation

1）npm install

npm install vue-graphic-verify --save

2）local install

First, you should build it with the following command.

npm run build

And then, you should pack it with the following command.

npm pack

Finally, enter your project and install it with the following command. It should be noted that the path is the path where the package was packed on the operating system in the previous step. And the name-version is the name and version of the package. For example, npm install D:\vue-graphic-verify\vue-graphic-verify-1.0.0.tgz

npm install path/name-version.tgz

Usage

You can set GraphicVerify default props in main.js.

By the way, when you start using it, you should know that the apiAddr(defaults to 'https://verify.cloudcrowd.com.cn') and webKey are required, and if you wanna to change the apiAddr, you can only set it in main.js. The verifyWidth are nullable, if verifyWidth is null, it will adjust by the image's width. The other props can be set freely.

So let's start, you can use the component in two ways.

The first way is as follows.

main.js.

import Vue from 'vue'
import {GVerifyPlugin} from 'vue-graphic-verify'

Vue.use(GVerifyPlugin, {
  apiAddr: 'http://localhost:8888',
  webKey: 'b7db153be64749799ab48a61ebcf7a1c',
  verifyWidth: 300
})

Your templete file.

<template>
  <graphic-verify :webKey="webKey" :verifyWidth="verifyWidth"></graphic-verify>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      webKey: 'b7db153be64749799ab48a61ebcf7a1c',
      verifyWidth: '450'
    }
  }
}
</script>

And the other way as below.

Your templete file.

<template>
  <g-verify :webKey="webKey" :verifyWidth="verifyWidth"></g-verify>
</template>

<script>
import gVerify from 'vue-graphic-verify'
 
export default {
  name: 'app',
  data () {
    return {
      webKey: 'b7db153be64749799ab48a61ebcf7a1c',
      verifyWidth: '450'
    }
  },
  components:{
    gVerify
  }
}
</script>

After the above steps, you can regist a callback function to receive the successful token of GraphicVerify, like below.

<template>
  <graphic-verify :webKey="webKey" :verifyWidth="verifyWidth" @verify-callback="recordToken"></graphic-verify>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      webKey: 'b7db153be64749799ab48a61ebcf7a1c',
      verifyWidth: '450',
      verifyToken: null
    }
  },
  methods: {
    recordToken (token) {
      this.verifyToken = token
    }
  }
}
</script>

Also, you may want to reset the GraphicVerify, and we provide a method to do that.

<template>
  <div>
    <graphic-verify ref="gVerifyBtn" :webKey="webKey" :verifyWidth="verifyWidth"></graphic-verify>
    <button @click.prevent="reset">重置</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      webKey: 'b7db153be64749799ab48a61ebcf7a1c',
      verifyWidth: '450'
    }
  },
  methods: {
    reset () {
      this.$refs.gVerifyBtn.reset()
    }
  }
}
</script>

Props

methods

Callbacks