前端vue页面 加入luosimao人机认证_前端如何接入三方人机安全验证

官方示例：https://captcha.luosimao.com/demo

文档链接在示例下面

引入方法在html的head中加入script标签

在线引入js插件

    <script src="https://captcha.luosimao.com/static/dist/api.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="https://captcha.luosimao.com/static/lib/page.js"></script>

回调函数：下面是vm对象其中的

const vm = new Vue({ // 配置对象 options
        el: '#app',  // element: 指定用vue来管理页面中的哪个标签区域
        data() {
            return{
                userForm: {
                    checkComputer:'',//检验人机
                }
            }
 
        }
 
    })

    <script language="JavaScript">
        function getResponse(resp){
            console.log(resp)
            vm._data.userForm.checkComputer='success'//有返回则不是机器，设置到vm上表示非人机
            console.log(vm)
        }
    </script>

插件标签，将标签加到body中自己想要的位置 

<div class="l-captcha" 
    data-site-key="cc9864bb9d0d879aaf4c323586911583" 
    data-callback="getResponse">
</div>

 

截图：

 

当通过了验证后会进入到<script>标签中的getResponse方法，有返回值就表示成功了，没有返回值不显示

注意上面的  data-site-key 中的值说明查看官方文档：https://luosimao.com/docs/api/56

另外你还需要注意的是上面的getResponse方法是自己写的，

 

 

 

如果想看完整示例：我挂载到github上其中的register.html是完整示例

https://github.com/1015770492/myTaoTao_store