Web前端接入

1. 准备AppID

验证码接入需要先在管理后台中注册获取APPID和APPSECRET，注册步骤请参考

快速开始

2. 快速接入步骤

1、在Head的标签内最后加入以下代码引入验证JS文件（建议直接在html中引入）

<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>

2、在你想要激活验证码的DOM元素（eg. button、div、span）内加入以下id及属性
<!--点击此元素会自动激活验证码-->

<!--id : 元素的id(必须)-->

<!--data-appid : AppID(必须)-->

<!--data-cbfn : 回调函数名(必须)-->

<!--data-biz-state : 业务自定义透传参数(可选)-->

<button id="TencentCaptcha"

        data-appid="appId"

        data-cbfn="callback"

        type="button"

>验证</button>

3、为验证码创建回调函数，注意函数名要与data-cbfn相同

window.callback = function(res){

    console.log(res)

    // res（未通过验证）= {ret: 1, ticket: null}

    // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}

    if(res.ret === 0){

        alert(res.ticket)   // 票据

    }

}

完成以上操作后，点击激活验证码的元素，即可弹出验证码。

直接上html代码:

<!DOCTYPE html>

<html>

<head>

    <title>验证码</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no,maximum-scale=1.0, minimum-scale=1.0">

    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>

</head>

<body>

    <button id="TencentCaptcha" data-appid="2068666293" data-cbfn="callback" type="button">验证码</button>

    <script type="text/javascript">

        window.callback = function(res){

            console.log(res)

            // res（未通过验证）= {ret: 1, ticket: null}

            // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}

            if(res.ret === 0){

                // alert(res.ticket)   // 票据

                console.info('验证通过-----');

            }

        }

    </script>

</body>

</html>

如下图所示:

想了解更多的详细详细,请参看官网地址:

https://007.qq.com/web-access.html?ADTAG=acces.cfg

Web前端接入人机识别验证码---腾讯防水墙的更多相关文章

  1. 活动 Web 页面人机识别验证的探索与实践

    在电商行业,线上的营销活动特别多.在移动互联网时代,一般为了活动的快速上线和内容的即时更新,大部分的业务场景仍然通过 Web 页面来承载.但由于 Web 页面天生“环境透明”,相较于移动客户端页面在安 ...

  2. 腾讯Web前端开发框架JX(Javascript eXtension tools)

    转自:Web前端开发-Web前端工程师 » 腾讯Web前端开发框架JX(Javascript eXtension tools) JX – Javascript eXtension tools 一个类似 ...

  3. 2015腾讯web前端笔试题

      1 请实现,鼠标点击页面中的任意标签,alert该标签的名称.(注意兼容性) 2 请指出一下代码的性能问题,并经行优化. var info="腾讯拍拍网(www.paipai.com)是 ...

  4. 2015腾讯暑期实习生 Web前端开发 面试经历

    [2015腾讯暑期实习生 Web前端开发 面试经历] 好吧,首先声明,我被刷了,应该是跪在二面 微信查到的面试状态一直呈现复试中 .. 整整四天了.. 看来是没希望了 不过也是一次经历,记录一下还是可 ...

  5. 吐槽一下--最近多次在腾讯以及万科的面试经历---Web前端与PHP后端开发

    前端时间,由于职业发展等,想要换一份工作,于是投递了一些国内还算知名的公司,列如: 腾讯.万科之类的: (1)首先说一下这两家公司的反馈情况: 腾讯:投递到反馈,(初次人事打电话沟通)大约1周,三次不 ...

  6. [转] web前端js构造无法销毁的类UUID识别码，识别浏览器设备唯一性

    用户行为统计在如今的前端生态中已是稀松寻常,如各种站长统计工具.识别用户访问客户端唯一性是必要的实现,对于web前端获取的设备信息,一般容易想到的是通过navigator.userAgent,但相同设 ...

  7. TFC2017 腾讯Web前端大会参会小结

    简述 上周有幸参加TFC腾讯Web前端大会,见识了各路前端大神的精彩演讲,干货满满的.会议流程分为上午主会场,以及下午的三个分会场.分享的主题涵盖Web新技术.Node.js.框架.工程化. 图形处理 ...

  8. 新浪、腾讯、淘宝为何如此重视Web前端？前端入门容易吗？

    为什么新浪.搜狐.网易.腾讯.淘宝等在内的各种规模的IT企业,都对web前端越来越重视了呢?小编为您揭晓答案! web前端的由来 以前会Photoshop和Dreamweaver就可以制作网页.随着时 ...

  9. 腾讯2013笔试题—web前端笔试题 （老题练手）

    问题描述(web前端开发附加题1): 编写一个javascript的函数把url解析为与页面的javascript.location对象相似的实体对象,如:url :'http://www.qq.co ...

随机推荐

  1. 《Python编程：从入门到实践》第三章 列表简介 习题答案

    #3.1 names=['lpr','tjl','gnl','by','dqy']; print(names[0]); print(names[1]); print(names[2]); print( ...

  2. python函数式编程-偏向函数

    Python的functools模块提供了很多有用的功能,其中一个就是偏函数(Partial function).要注意,这里的偏函数和数学意义上的偏函数不一样. 在介绍函数参数的时候,我们讲到,通过 ...

  3. PAT1025

    这道题是照着晴神的来敲,但是自己技术太渣,中间还是出现了不少问题. 1.学习到排序的做法,利用algorithm库的sort(begin,end,cmp),自己按照题目要求来完成cmp的编写 可能经常 ...

  4. linux网络编程之socket编程(十四)

    经过令国鸡冻的APEC会之后,北京的冬天终于不冷了,有暖气的日子就是倍儿爽呀~~洗完热水澡,舒服的躺在床上欢乐地敲打着键盘,是件多么幸福的事呀,好了,抒发情感后,正题继续. 上节中已经初步学习了UDP ...

  5. bloomberg bulkfile【一】 文件的分类

    文章导航 bloomberg bulkfile [一]  文件的分类 bloomberg bulkfile [二]  文件解析 bloomberg bulkfile [三]  在oracle的存储 订 ...

  6. 机房重构——UML图最终版本

    刚开始画图时确实很纠结,那时候是在师父的逼迫下不得不画,不过这样也是有好处的,在师父的强烈要求下,我学会了如何使用EA,也对一个学习一个新的软件有了一个更好的方法,可以去找一些视频,或者文字资料来帮助 ...

  7. javax.jms.JMSException: Failed to build body from content. Serializable class not available to broker. Reason: java.lang.ClassNotFoundException: Forbidden class com.javaliao.portal.model.TbLogVisit! T

    javax.jms.jmsexception:无法从内容生成正文.可序列化类不可用于代理原因:java.lang.ClassNotFoundException: 禁止类com.javaliao.por ...

  8. 【Mac】打开配置文件，添加/修改环境变量

    打开文件编辑器: 进入终端,输入open -e .bash_profile或者open -t ~/.bash_profile  打开profile文件 填写配置的环境变量: #示例代码 export ...

  9. 并发编程大师系列之：CountDownLatch和Join

    业务场景描述:假设一条流水线上有三个工作者:worker1,worker2,worker3.有一个任务的完成需要他们三者协作完成,worker3可以开始这个任务的前提是worker1和worker2完 ...

  10. Selenium常用API的使用java语言之8-模拟鼠标操作

    通过前面例子了解到,可以使用click()来模拟鼠标的单击操作,现在的Web产品中提供了更丰富的鼠标交互方式, 例如鼠标右击.双击.悬停.甚至是鼠标拖动等功能.在WebDriver中,将这些关于鼠标操 ...