VUE接入 騰訊驗證碼,極驗驗證碼

VUE接入 騰訊驗證碼,極驗驗證碼

在這裏插入圖片描述

安裝

$ npm install vue-social-captcha -S

使用

在 main.js 文件中引入插件並註冊

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

在項目中使用 vue-social-captcha

<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="登陸"/>
        </Captcha>
    </div>
</template>

<script>
export default {
    name: 'app',
    data () {
        return {
            captchaOption: {
                // 各平臺的參數,具體請參閱個平臺文檔
                // 以下爲騰訊驗證碼的參數
                // appid: '',
                // 以下爲極驗驗證碼的參數
                product: 'bind',
            }
        }
    },
    methods: {
        // 回調監聽
        // status: 1成功,2驗證中,0失敗
        // res: 三方返回的原始數據
        captchaNotice(status, res){
            console.log(status)
            console.log(res)
        }
    }
}
</script>

props屬性

通過以下屬性來設置你的驗證碼
在這裏插入圖片描述

服務端Url請求與響應

數據請求
url請求時會附帶以下兩個參數到服務端,以便於業務邏輯開發。

{
    g_type: 'TencentCaptcha', // 驗證碼類型
    g_scene: 'Login', // 驗證碼使用場景
}

數據響應返回格式
服務端返回參數主要有三個,分別是code msg data。
在這裏插入圖片描述
例:

// 極驗驗證
{
    "code":1,
    "msg":"驗證成功",
    "data":
    {
        "success":1,
        "gt":"29e4e065c7ba05ff77ba896e5d577f89",
        "challenge":"bd26076b3afe9ed3c17738f3f8a7eec7",
        "new_captcha":1
    }
}
// 騰訊驗證
{
    "code":1,
    "msg":"驗證成功"
}

相關資源

騰訊驗證

極驗驗證

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章