亚欧色一区w666天堂,色情一区二区三区免费看,少妇特黄A片一区二区三区,亚洲人成网站999久久久综合,国产av熟女一区二区三区

前提條件

已經訂購邊緣安全加速平臺-安全與加速服務，若未訂購，請參見服務開通。
在控制臺新增域名，請參見添加服務域名。
開通套餐為高級版及以上版本，支持驗證碼功能。
需先完成驗證碼配置。暫時未開放控制臺，請通過提交工單給天翼云客服，由其人工操作開啟。

代碼示例

以下代碼示例，單擊打開驗證碼，激活驗證碼，并彈窗展示驗證結果。點擊攜帶 ticket 發請求，能夠驗證攔截情況

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>滑塊驗證接入demo</title>
    <style>
      .container {
        max-width: 400px;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        margin-top: 100px;
      }

      h1 {
        text-align: center;
      }

      input[type="text"],
      input[type="password"] {
        width: 95%;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }

      .bt_click {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }

      .bt_click_captcha {
        position: relative;
        background: #d9f3ef;
        border: 1px solid #0fbda0;
        color: #0fbda0;
      }

      .bt_captcha_success {
        background: #edfff1;
        border: 1px solid #1bc45c;
        border-radius: 2px;
        color: #1bc45c;
      }

      .bt_captcha_success::before {
        content: "";
        position: absolute;
        width: 28px;
        height: 28px;
        left: 36%;
        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEqADAAQAAAABAAAAEgAAAACaqbJVAAAB4ElEQVQ4EaWUMUsjURDH37yNxANBsXQ3csiJhYIIimgipyh3Tey0Mav3CbRQLExlKygWeh/giAl4iliJoHDcZWOnYiHYaCEaCz1IIYbjzBtnNrtB44omTrGzM+8/v30z+3ZBvMdQgJ4yZ0D+W4RyOcbe8AdU/lUU2JAOxVtkOaBPW+N+ofybVDsIAjLMKB30c1jLVmfWUYgvDKCWVFkgXa+cE4hhLmZTAmvZl7QjIxUxCTLFha5Ra/WChv7mYRu/RxpRkwcEqHIheQ8nWZ/q9D1NvhD96vUpTSboqY8h/2lO0XQwtkCDwkJrumVGA9ZouxdKrwhME+Tx2h0ChtOhlXmGcI3dmp40mTpJcUahGrjqSey7wDrLbCLREcV+J5el1/T1KrSSdDXspWFFlh0IxzUS5E7d3lgbB2wEWSLnQu5puEPFEFvHRaBy36mkixOO/aUN99OuGxBgw00C4MRFMM7gZ2a3JnBW6tZpVADOkkJzVDdC4C094KMdA8Yug/Ex+97jkgc5C8af0c8okY9+TZH2kD7M4EX3WrYoXwifgDhbb31rzmFum4ZjOKpbDVXreU/irFDlcVN4/e7aeejHMWiij+LrfA6mX4O4tZ4+kIp00L9ml4+/p6CkJH3pb9U/AFEbjHExMjImAAAAAElFTkSuQmCC")
          no-repeat;
      }

      /* input[type="submit"] {
      width: 100%;
      padding: 10px;
      background-color: #4CAF50;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    } */
    </style>
  </head>

  <body>
    <div class="container">
      <h1>登錄</h1>
      <input type="text" id="username" placeholder="用戶名/郵箱" />
      <input type="password" id="password" placeholder="密碼" />
      <button class="bt_click bt_click_captcha" id="CaptchaId" type="button">
        立即點擊驗證
      </button>
      <button class="bt_click" id="submit" type="button">登錄</button>
    </div>

    <script src="/_ct_sbu/verification/slidercaptcha.js"></script>
    <script>
      // 定義驗證碼觸發事件
      window.onload = function () {
        var ticket = "";
        var type = "1";
        document.getElementById("CaptchaId").onclick = function (event) {
          try {
            var captcha = sliderCaptcha({
              event,
              /**
               * 成功回調
               * 回調入參
               * verify: {
               *   isVerify, // 成功失敗
               *   code,  //code code=0表示成功，可以獲取ticket，1的話是驗證數據格式有誤，2是驗證失敗，3是驗證動作超時，4是驗證碼版本不對ll,
               *   ticket  //ticket
               * }
               */
              onSuccess: function (verify) {
                //成功事件
                ticket = verify.ticket;
                type = verify.type;
                const ele = document.querySelector("#CaptchaId");
                ele.classList.add("bt_captcha_success");
                ele.innerHTML = ` 驗證成功`;
              },
              /**
               * 失敗回調
               */
              onFail: function (verify) {
                console.log(verify);
              },
            });
          } catch (error) {
            console.log(error);
          }
        };
        function submit() {
          // do 提交接口攜帶 ticket
          console.log("使用XMLHttpRequest發起請求");
          var xhr = new XMLHttpRequest();
          xhr.open("GET", "/test", true);

          // xhr.open('GET', '//www.ctyun.com/test', true);
          //設置請求頭
          xhr.setRequestHeader("ticket", ticket);
          xhr.withCredentials = true; //攜帶cookie

          xhr.send();

          //請求成功完成時觸發。
          xhr.onload = function () {
            if (xhr.readyState === xhr.DONE) {
              if (xhr.status === 200) {
                console.log("響應內容：");
                console.log(xhr.response);
                console.log(xhr.responseText);
                console.log("=========");
                //獲取響應頭
                var headers = xhr.getAllResponseHeaders();
                console.log("響應頭：");
                console.log(headers);
                console.log("=========");
              } else {
                console.log(xhr.status);
              }
            }
          };
        }
        document.getElementById("submit").onclick = function () {
          submit();
        };
      };
    </script>
  </body>
  <title>登陸</title>
</html>

接入說明

1、動態引入驗證碼JS

Web 頁面需動態引入驗證碼 JS，在業務需要驗證時，喚起驗證碼進行驗證。


<!-- 動態引入驗證碼JS示例 -->
<script src="/_ct_sbu/verification/slidercaptcha.js"></script>

注意
必須動態引入驗證碼 JS。如通過其他手段規避動態加載，會導致驗證碼無法正常更新，對抗能力無法保證，甚至引起誤攔截。

2、創建驗證碼對象

引入驗證碼 JS 后，驗證碼會在全局注冊一個 sliderCaptcha ，業務方可以使用這個,自行初始化驗證碼。


sliderCaptcha({
  onSuccess,
  onFail,
});

組件方法說明：

字段名	說明
event	點擊事件必傳(主要用作行為軌跡采集)
onSuccess	成功回調
onFail	錯誤回調

成功失敗回調字段說明：

字段名	說明
isVerify	成功失敗
code	狀態碼
type	回調類型 (1:智能免驗證)
ticket	成功標識

狀態碼code字段定義說明：

失敗的狀態頁面會直接重新刷新，進行再次驗證。

字段名	說明
0	成功，可以獲取 ticket
1	驗證數據格式有誤
2	驗證失敗
3	驗證動作超時
4	驗證碼版本不對

亚欧色一区w666天堂,色情一区二区三区免费看,少妇特黄A片一区二区三区,亚洲人成网站999久久久综合,国产av熟女一区二区三区

智算服務

應用商城

定價

合作伙伴

開發者

支持與服務

了解天翼云

邊緣安全加速平臺

邊緣安全加速平臺

前提條件

代碼示例

接入說明

亚欧色一区w666天堂,色情一区二区三区免费看,少妇特黄A片一区二区三区,亚洲人成网站999久久久综合,国产av熟女一区二区三区

活動

智算服務

應用商城

定價

合作伙伴

開發者

支持與服務

了解天翼云

邊緣安全加速平臺

邊緣安全加速平臺

前提條件

代碼示例

接入說明