Web前端接入人机识别验证码---腾讯防水墙
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>
如下图所示:
想了解更多的详细详细,请参看官网地址:
利用Android手机里的摄像头进行拍照
看视频时,类加载器没太理解,现在再整理下几个要点
关于java设计模式与极品飞车游戏的思考
【Mood-3】心声
源自梦想 eclipse快捷键整理
2020重新出发,JAVA语言,JAVA的诞生和发展史
2020重新出发,序章: 语言的诞生
2020重新出发,JAVA学前了解,DOS常用命令
2020重新出发,JAVA学前了解,Windosws常用快捷键