zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    手机进水不要慌,四个步骤告诉您正确处理方法!
    2021-08-17:学习项目代码流程
    Docker使用Centos镜像安装Openssh服务
    OpenResty简介、下载流程、简单教学
    go接收者和锁注意事项
    PHPstorm精进
    centos7找回root密码
    功能测试
    删除排序数组中的重复项
    Java多线程
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13300580.html
Copyright © 2011-2022 走看看