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>
如下圖所示:
想了解更多的詳細詳細,請參看官網地址: