97午夜理论片影院,尤物av无码网址,中文字幕无码一线

本文為您介紹如何在H5頁(yè)面通過(guò)集成網(wǎng)頁(yè)端SDK，使用圖形認(rèn)證。

接入步驟

下載SDK

登錄號(hào)碼認(rèn)證產(chǎn)品控制臺(tái)，在概覽頁(yè)面右側(cè)API&SDK區(qū)域，單擊立即下載，進(jìn)入API&SDK頁(yè)面，選擇圖形驗(yàn)證碼 > 網(wǎng)頁(yè)端 > h5，下載并解壓SDK。

資源引入

將網(wǎng)頁(yè)端SDK上傳到您的靜態(tài)資源服務(wù)器上，獲取能夠訪問(wèn)到網(wǎng)頁(yè)端SDK的URL，通過(guò)script標(biāo)簽的方式引入。

<script type="text/javascript" charset="utf-8" src="${your-sdk-asset-path}/ct4.js"></script>

創(chuàng)建認(rèn)證方案

您使用SDK時(shí)，會(huì)用到密鑰參數(shù)信息，請(qǐng)先在圖形認(rèn)證方案管理控制臺(tái)，新增圖形認(rèn)證方案，獲取密鑰參數(shù)（包括appId、appKey）信息。

初始化

調(diào)用initAlicom4方法并傳入?yún)?shù)與回調(diào)函數(shù)進(jìn)行初始化，必傳參數(shù)captcha_id、product可參考如下示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>bind</title>
    <style>
      <!-- Some code here -->
    </style>
  </head>

  <body>
    <h2>Slide CAPTCHA-float</h2>
    <form id="form">
      <div>
        <label for="username">Username：</label>
        <input class="inp" id="username" type="text" value="Username" />
      </div>
      <br />
      <div>
        <label for="password">Password：</label>
        <input class="inp" id="password" type="password" value="123456" />
      </div>
      <br />

      <div>
        <label>Verify：</label>
        <div id="captcha"></div>
      </div>
      <br />

      <div id="btn" class="btn">Submit</div>
    </form>
    <!-- Note that the CAPTCHA itself does not require the jquery library. -->
    <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
    <!-- Introducing ct4.js, you can use the initAlicom4 initialization func -->
    <script src="https://static.alicaptcha.com/v4/ct4.js"></script>
    <script>
      initAlicom4(
        {
          captchaId: "<YOUR_APP_ID>", // 請(qǐng)?zhí)钊隺ppId
          product: "bind",
        },
        function (captchaObj) {
          captchaObj
            .onReady(function () {
              //驗(yàn)證碼ready之后才能調(diào)?showCaptcha方法顯示驗(yàn)證碼
            })
            .onSuccess(function () {
              //your code,結(jié)合您的業(yè)務(wù)邏輯重置驗(yàn)證碼
              captchaObj.reset();
            })
            .onError(function () {
              //your code
            });
          // 按鈕提交事件
          $("#btn").click(function () {
            // some code
            // 檢測(cè)驗(yàn)證碼是否ready, 驗(yàn)證碼的onReady是否執(zhí)行
            captchaObj.showCaptcha(); //顯示驗(yàn)證碼
            // some code
          });
        }
      );
    </script>
  </body>
</html>

參數(shù)	是否必填	類型	說(shuō)明
captchaId	是	string	驗(yàn)證ID，請(qǐng)傳入在控制臺(tái)創(chuàng)建認(rèn)證方案后生成的`appId`。
product	是	string	bind

接口說(shuō)明

getValidate

獲取用戶進(jìn)行成功驗(yàn)證onSuccess所得到的結(jié)果，該結(jié)果用于進(jìn)行服務(wù)端SDK進(jìn)行二次驗(yàn)證。
getValidate方法返回?個(gè)對(duì)象，該對(duì)象包含?些驗(yàn)證需要的字段。
其他情況返回false，網(wǎng)站開(kāi)發(fā)者可根據(jù)該返回值決定是否需要進(jìn)行下?步操作，提交表單或ajax進(jìn)行?次驗(yàn)證。

通過(guò)ajax方式進(jìn)行?次驗(yàn)證示例

<!DOCTYPE html>
<html lang="zh">
<script>
    initAlicom4({
        // 省略配置參數(shù)
    }, function (captchaObj) {
        // 省略其他方法的調(diào)用
        // 這里調(diào)用onSuccess方法，該方法介紹見(jiàn)下?
        captchaObj.onSuccess(function () {
            var result = captchaObj.getValidate();
            // ajax偽代碼
            $.ajax({
                url: '服務(wù)端',
                data: result,
                dataType: 'json',
                success: function (res) {
                    console.log(res.result);
                }
            })
        })
})
</script>
</html>

reset

用戶發(fā)現(xiàn)驗(yàn)證成功但其他信息不對(duì)的情況，如用戶名密碼錯(cuò)誤或驗(yàn)證出現(xiàn)錯(cuò)誤的情況時(shí)使用此接口。

<!DOCTYPE html>
<html lang="zh">
<script>
  initAlicom4({
    // 省略配置參數(shù)
  }, function (captchaObj) {
    // 省略其他方法的調(diào)用
    // 這里調(diào)用onSuccess方法，該?法介紹見(jiàn)下?
    captchaObj.onSuccess(function () {
      var result = captchaObj.getValidate();
      // ajax 偽代碼
      ajax('/login', {
        lot_number: result.lot_number,
        captcha_output: result.captcha_output,
        pass_token: result.pass_token,
        gen_time: result.gen_time,
        username: 'xxx',
        password: 'xxx'
        // 其他服務(wù)端需要的數(shù)據(jù)，比如登錄時(shí)的用戶名和密碼
      }, function (data) {
        // 根據(jù)服務(wù)端?次驗(yàn)證的結(jié)果進(jìn)?跳轉(zhuǎn)等操作
        if (data.status === 'fail') {
          alert('??名或密碼錯(cuò)誤，請(qǐng)重新輸?并完成驗(yàn)證');
          captchaObj.reset(); // 調(diào)?該接口進(jìn)行重置
        }
      });
    });
  });
</script>

</html>

showCaptcha

對(duì)用戶所填寫的數(shù)據(jù)進(jìn)行檢查，無(wú)問(wèn)題后再調(diào)用驗(yàn)證接口。

<!DOCTYPE html>
<html lang="zh">
  <body>
    <div id="btn">提交按鈕</div>
  </body>
  <script>
    initAlicom4({
      // 省略配置參數(shù)
      product: 'bind'
    }, function (captchaObj) {
      // 省略其他方法的調(diào)?
      document.getElementById('btn').addEventListener('click', function () {
        if (check()) { // 檢查是否可以進(jìn)行提交
          captchaObj.showCaptcha();
        }
      });
      captchaObj.onSuccess(function () {
        // 用戶驗(yàn)證成功后，進(jìn)行實(shí)際的提交?為
        // todo
      })
    });
  </script>
</html>

onReady(callback)

監(jiān)聽(tīng)驗(yàn)證按鈕的DOM生成完畢事件，參數(shù)callback為函數(shù)類型。根據(jù)onReady事件隱藏“加載驗(yàn)證提示語(yǔ)”。

<!DOCTYPE html>
<html lang="zh">
<body>
    <div id="captcha-box">
    <div id="loading-tip">加載中，請(qǐng)稍后...</div>
    </div>
</body>
<script>
  initAlicom4({
    // 省略配置參數(shù)
  }, function (captchaObj) {
    // 省略其他方法的調(diào)用
    captchaObj.onReady(function () {
      // DOM準(zhǔn)備好后，隱藏 #loading-tip元素
      // 僅作示例用，用您適合的方式隱藏即可
      document.getElementById('loading-tip').style.display = 'none';
    });
  });
</script>
</html>

onNextReady(callback)

監(jiān)聽(tīng)驗(yàn)證下一步資源的加載完畢事件，參數(shù)callback為函數(shù)類型。

<!DOCTYPE html>
<html lang="zh">

<body>
  <div id="captcha-box">
    <div id="loading-tip">加載中，請(qǐng)稍后...</div>
  </div>
</body>
<script>
  initAlicom4({
    // 省略配置參數(shù)
  }, function (captchaObj) {
    // 省略其他方法的調(diào)用
    captchaObj.onNextReady(function () {
    });
  });
</script>

</html>

onSuccess(callback)

監(jiān)聽(tīng)驗(yàn)證成功事件，參數(shù)callback為函數(shù)類型。

<!DOCTYPE html>
<html lang="zh">
  <script>
    initAlicom4({
        // 省略配置參數(shù)
        product: 'bind'
    }, function (captchaObj) {
        // 省略其他方法的調(diào)用
        document.getElementById('btn').addEventListener('click', function () {
            if (check()) { // 檢查是否可以進(jìn)?提交
                captchaObj.showCaptcha();
            }
        })};
    captchaObj.onSuccess(function () {
        // 用戶驗(yàn)證成功后，進(jìn)?實(shí)際的提交?為
        // todo
    })
    );
  </script>
</html>

onFail(callback)

監(jiān)聽(tīng)驗(yàn)證成功事件，參數(shù)callback為函數(shù)類型。failObj操作失敗對(duì)象包含：captcha_id、captcha_type、challenge，后續(xù)可能增加，監(jiān)聽(tīng)驗(yàn)證碼操作失敗事件，統(tǒng)計(jì)用戶操作失敗次數(shù)。

<!DOCTYPE html>
<html lang="zh">
   <script>
    initAlicom4{
    // 省略配置參數(shù)
   }, function (captchaObj) {
    // 省略其他方法的調(diào)用
    captchaObj.onFail(function (failObj) {
      // 對(duì)錯(cuò)誤信息做?些統(tǒng)計(jì)
    })
  };
   </script>
</html>

onError(callback)

監(jiān)聽(tīng)驗(yàn)證出錯(cuò)事件，參數(shù)callback為函數(shù)類型。靜態(tài)資源加載失敗、網(wǎng)絡(luò)不佳等驗(yàn)證碼能捕獲到的錯(cuò)誤，都會(huì)觸發(fā)onError回調(diào)。該錯(cuò)誤對(duì)象包含三部分：code錯(cuò)誤碼、msg提示信息、desc該對(duì)象包含detail屬性，描述具體的錯(cuò)誤信息。

<!DOCTYPE html>
<html lang="zh">
  <script>
  initAlicom4({
    // 省略配置參數(shù)
  }, function (captchaObj) {
    // 省略其他方法的調(diào)用
    captchaObj.onError(function (error) {
      // 出錯(cuò)啦，可以提醒用戶稍后進(jìn)行重試
      // error 包含error_code、msg
      // {code: '60000',msg:"用戶配置錯(cuò)誤"，desc:{ detail: "用戶id缺少"} }
    });
  });
  </script>
</html>

onClose(callback)

當(dāng)用戶關(guān)閉彈出來(lái)的驗(yàn)證時(shí)，會(huì)觸發(fā)該回調(diào)。

<!DOCTYPE html>
<html lang="zh">
<script>
  initAlicom4({
    // 省略配置參數(shù)
    product: 'bind'
  }, function (captchaObj) {
    // 省略其他方法的調(diào)用
    captchaObj.onClose(function () {
      // 用戶把驗(yàn)證關(guān)閉了，這時(shí)你可以提示用戶需要把驗(yàn)證通過(guò)后才能進(jìn)行后續(xù)流程
    });
  });
</script>

</html>

destroy

銷毀驗(yàn)證實(shí)例，驗(yàn)證相關(guān)UI以及驗(yàn)證注冊(cè)的事件監(jiān)聽(tīng)器都會(huì)被移除。

<!DOCTYPE html>
<html lang="zh">
<script>
  initAlicom4({
    // 省略配置參數(shù)
    product: 'bind'
  }, function (captchaObj) {
    // 省略其他方法的調(diào)用
    captchaObj.onSuccess(function () {
      var result = captchaObj.getValidate();
      // ajax 偽代碼
      ajax('/login', {
        lot_number: result.lot_number,
        captcha_output: result.captcha_output,
        pass_token: result.pass_token,
        gen_time: result.gen_time,
        username: 'xxx',
        password: 'xxx'
        // 其他服務(wù)端需要的數(shù)據(jù)，比如登錄時(shí)的用戶名和密碼
      }, function (data) {
        // 根據(jù)服務(wù)端?次驗(yàn)證的結(jié)果進(jìn)行跳轉(zhuǎn)等操作
        if (data.status === 'fail') {
          alert('??名或密碼錯(cuò)誤，請(qǐng)重新輸入并完成驗(yàn)證');
          captchaObj.reset(); // 調(diào)用該接口進(jìn)行重置
        } else if (data.status === 'success') {
          // 結(jié)合業(yè)務(wù)邏輯，判斷是否需要移除驗(yàn)證
          captchaObj.destroy();
          captchaObj = null;
        }
      });
    });
  });
</script>

</html>

錯(cuò)誤碼

錯(cuò)誤碼	描述
60001	配置參數(shù)captcha_id有誤。請(qǐng)檢查初始化時(shí)傳入的配置參數(shù)captcha_id。
60002	傳給appendTo接口的參數(shù)有誤，只接受ID選擇器和DOM元素。
60100	/load請(qǐng)求報(bào)錯(cuò)。建議：請(qǐng)保持網(wǎng)絡(luò)暢通。檢查初始化時(shí)傳入的配置參數(shù)captchaId。
60101	/verify請(qǐng)求報(bào)錯(cuò)，請(qǐng)保持網(wǎng)絡(luò)暢通。
60200	皮膚加載失敗，請(qǐng)保持網(wǎng)絡(luò)暢通。
60201	語(yǔ)?包加載失敗，請(qǐng)保持網(wǎng)絡(luò)暢通。
60202	驗(yàn)證圖片加載失敗，請(qǐng)保持網(wǎng)絡(luò)暢通。
60204	（gacptcha4）js資源加載超時(shí)，請(qǐng)保持網(wǎng)絡(luò)暢通。
60205	(ct4)js資源加載超時(shí)，請(qǐng)保持網(wǎng)絡(luò)暢通。
60500	服務(wù)端forbidden。

日本熟妇hd丰满老熟妇,中文字幕一区二区三区在线不卡 ,亚洲成片在线观看,免费女同在线一区二区

H5客戶端接入