github.com/godaddy-x/freego@v1.0.156/geetest/static/index.html (about)

     1  <!DOCTYPE html>
     2  <html>
     3  <head>
     4      <meta charset="UTF-8">
     5      <meta name="viewport" content="width=device-width, initial-scale=1">
     6      <title>geetest sdk demo</title>
     7      <style>
     8          body {
     9              margin: 50px 0;
    10              text-align: center;
    11              font-family: "PingFangSC-Regular", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
    12          }
    13  
    14          .inp {
    15              border: 1px solid #cccccc;
    16              border-radius: 2px;
    17              padding: 0 10px;
    18              width: 278px;
    19              height: 40px;
    20              font-size: 18px;
    21          }
    22  
    23          .btn {
    24              border: 1px solid #cccccc;
    25              border-radius: 2px;
    26              width: 100px;
    27              height: 40px;
    28              font-size: 16px;
    29              color: #666;
    30              cursor: pointer;
    31              background: white linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
    32          }
    33  
    34          .btn:hover {
    35              background: white linear-gradient(0deg, #ffffff 0%, #f3f3f3 100%)
    36          }
    37  
    38          #captcha {
    39              width: 300px;
    40              display: inline-block;
    41          }
    42  
    43          .show {
    44              display: block;
    45          }
    46  
    47          .hide {
    48              display: none;
    49          }
    50  
    51          #notice {
    52              color: red;
    53          }
    54  
    55          label {
    56              vertical-align: top;
    57              display: inline-block;
    58              width: 80px;
    59              text-align: right;
    60          }
    61  
    62          #wait {
    63              text-align: left;
    64              color: #666;
    65              margin: 0;
    66          }
    67      </style>
    68  </head>
    69  <body>
    70  <h1>极验验证SDK DEMO</h1>
    71  <form action="/geetest/validate" method="post">
    72      <br>
    73      <div>
    74          <label for="username">用户名：</label>
    75          <input class="inp" id="username" type="text" value="极验验证">
    76      </div>
    77      <br>
    78      <div>
    79          <label for="password">密码：</label>
    80          <input class="inp" id="password" type="password" value="123456">
    81      </div>
    82      <br>
    83      <div>
    84          <label>完成验证：</label>
    85          <div id="captcha">
    86              <p id="wait" class="show">正在加载验证码......</p>
    87          </div>
    88      </div>
    89      <br>
    90      <p id="notice" class="hide">请先完成验证</p>
    91      <input class="btn" id="submit" type="submit" value="提交">
    92  </form>
    93  
    94  <!-- 注意，验证码本身是不需要 jquery 库，此处使用 jquery 仅为了在 demo 使用，减少代码量 -->
    95  <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
    96  
    97  <!-- 引入 极验官方gt.js，使用其中提供的 initGeetest 初始化函数 -->
    98  <script src="gt.js"></script>
    99  
   100  <script>
   101      var handler = function (captchaObj) {
   102          $("#submit").click(function (e) {
   103              var result = captchaObj.getValidate();
   104              if (!result) {
   105                  $("#notice").show();
   106                  setTimeout(function () {
   107                      $("#notice").hide();
   108                  }, 2000);
   109                  e.preventDefault();
   110              }
   111          });
   112          // 将验证码加到id为captcha的元素里，同时会有三个input的值用于表单提交
   113          captchaObj.appendTo("#captcha");
   114          captchaObj.onReady(function () {
   115              $("#wait").hide();
   116          });
   117      };
   118      $.ajax({
   119          url: "/geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
   120          type: "get",
   121          dataType: "json",
   122          success: function (data) {
   123              console.log("-----------", data)
   124              console.log(data.gt)
   125              // 调用 initGeetest 初始化参数
   126              // 参数1：配置参数
   127              // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
   128              initGeetest({
   129                  gt: data.gt,
   130                  challenge: data.challenge,
   131                  new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
   132                  offline: !data.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
   133                  product: "float", // 产品形式，包括：float，popup
   134                  width: "100%"
   135              }, handler);
   136          }
   137      });
   138  </script>
   139  </body>
   140  </html>