Web前端接入人機識別驗證碼---騰訊防水牆

時間 2019-12-10

標籤 web 端接識別驗證碼騰訊防水欄目 HTML 简体版

原文原文鏈接

Web前端接入

1. 準備AppID

驗證碼接入須要先在管理後臺中註冊獲取APPID和APPSECRET，註冊步驟請參考 javascript

快速開始html

2. 快速接入步驟

一、在Head的標籤內最後加入如下代碼引入驗證JS文件（建議直接在html中引入）前端



二、在你想要激活驗證碼的DOM元素（eg. button、div、span）內加入如下id及屬性<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>

<!--點擊此元素會自動激活驗證碼-->
<!--id : 元素的id(必須)-->
<!--data-appid : AppID(必須)-->
<!--data-cbfn : 回調函數名(必須)-->
<!--data-biz-state : 業務自定義透傳參數(可選)-->
<button id="TencentCaptcha"
        data-appid="appId"
        data-cbfn="callback"
        type="button"
>驗證</button>

三、爲驗證碼建立回調函數，注意函數名要與data-cbfn相同java

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)   // 票據
    }
}

完成以上操做後，點擊激活驗證碼的元素，便可彈出驗證碼。web

直接上html代碼:app

<!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>