A set of Vue components verified by Tencent

vue-social-captcha

A vue component verified by Jiji and Tencent

Screenshot

Dependency

axios

Installation

$ npm install vue-social-captcha -S

Use

Introduce the plug-in in the main.js file and register it

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

Use vue-social-captcha in the project

<template>
    <div id="app">
        <Captcha
            id="Captcha"
            scene="Login"
            type="Geetest"
            :parm="captchaOption"
            @callback="captchaNotice"
            url="http://pay.test.com/admin/captcha/"
        >
            <input id="Captcha" type="button" value="Login"/>
        </Captcha>
    </div>
</template>

<script>
export default {
    name:'app',
    data () {
        return {
            captchaOption: {
                // The parameters of each platform, please refer to each platform document for details
                // The following are the parameters of Tencent verification code
                // appid:'',
                // The following are the parameters of the polar verification code
                product:'bind',
            }
        }
    },
    methods: {
        // Callback monitor
        // status: 1 succeeded, 2 verified, 0 failed
        // res: raw data returned by the three parties
        captchaNotice(status, res){
            console.log(status)
            console.log(res)
        }
    }
}
</script>

props

Set your verification code through the following properties

Property	Description	Type	Default Value	Required
parm	Verification code parameters (refer to the documentation of each platform)	Object	None	Yes
url	Back-end verification address, please refer to the following [Data Response Return Format] for the return format	String	None	Yes
type	Type of verification code, optional parameters `TencentCaptcha` `Geetest`	String	None	Yes
id	Bind element id	String	None	Yes
scene	The usage scene, which will be passed to the back-end, mainly used for back-end business logic	String	None	Yes

Server URL request and response

Data Request

The url request will attach the following two parameters to the server to facilitate the development of business logic.

{
    g_type:'TencentCaptcha', // verification code type
    g_scene:'Login', // Verification code usage scenario
}

Data response return format

There are three main return parameters from the server, namely code msg data.

Property	Description	Required
code	Verification code status, there are 2 values, 1 is success, 0 is failure	Required
msg	Description text	No
data	When the verification code type is `Geetest`, the data must be	No

example:

// Extreme verification
{
    "code":1,
    "msg":"Verification successful",
    "data":
    {
        "success":1,
        "gt":"29e4e065c7ba05ff77ba896e5d577f89",
        "challenge":"bd26076b3afe9ed3c17738f3f8a7eec7",
        "new_captcha":1
    }
}
// Tencent verification
{
    "code":1,
    "msg":"Verification successful"
}

Related Resources

Download Details:

Author: QQOQ

Source Code: https://github.com/QQOQ/vue-social-captcha

#vue #vuejs #javascript