官方网站

示例

前端

准备工作：确保已经在极验用户后台获取到了 captchaId

配置参数

1.引入初始化函数

1
<script src="https://static.geetest.com/v4/gt4.js"></script>

2.初始化

1
<div id="captcha"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
initGeetest4(
  {
    captchaId: "您的captchaId",
    nativeButton: {
      width: "300px",
      height: "40px",
    }, // 极验按钮样式设置
    userInfo: "user@geetest.com", // 用户信息
  },
  function (captcha) {
    // captcha为验证码实例
    captcha.appendTo("#captcha"); // 调用appendTo将验证码插入到页的某一个元素中，这个元素用户可以自定义
  }
);

3.二次验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
initGeetest4(
  {
    // 省略配置参数
  },
  function (captchaObj) {
    // 省略其他方法的调用

    // 这里调用了 onSuccess 方法，该方法介绍见下文
    captchaObj.onSuccess(function () {
      var result = captchaObj.getValidate();

      // ajax 伪代码
      $.ajax({
        url: "服务端",
        data: result,
        dataType: "json",
        success: function (res) {
          console.log(res.result);
        },
      });
    });
  }
);

重置

1
captchaObj.reset();

后端

后端使用 Nodejs + Express

官方 Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
var express = require("express");
var querystring = require("querystring");
const crypto = require("crypto");
var axios = require("axios");
var router = express.Router();

// geetest 公钥
// geetest public key
const CAPTCHA_ID = "";

// geetest 密钥
// geetest secret key
const CAPTCHA_KEY = "";

// geetest 服务地址
// geetest server url
const API_SERVER = "http://gcaptcha4.geetest.com";

// geetest 验证接口
// geetest server interface
const API_URL = API_SERVER + "/validate" + "?captcha_id=" + CAPTCHA_ID;

/* GET home page. */
router.get("/", function (req, res, next) {
  res.render("index");
});

router.get("/login", function (req, res, next) {
  req.query = querystring.parse(req.url.split("?")[1]);
  // 前端参数
  // web parameter
  var lot_number = req.query["lot_number"];
  var captcha_output = req.query["captcha_output"];
  var pass_token = req.query["pass_token"];
  var gen_time = req.query["gen_time"];

  // 生成签名, 使用标准的hmac算法，使用用户当前完成验证的流水号lot_number作为原始消息message，使用客户验证私钥作为key
  // 采用sha256散列算法将message和key进行单向散列生成最终的 “sign_token” 签名
  // use lot_number + CAPTCHA_KEY, generate the signature
  var sign_token = hmac_sha256_encode(lot_number, CAPTCHA_KEY);

  // 向极验转发前端数据 + “sign_token” 签名
  // send web parameter and “sign_token” to geetest server
  var datas = {
    lot_number: lot_number,
    captcha_output: captcha_output,
    pass_token: pass_token,
    gen_time: gen_time,
    sign_token: sign_token,
  };

  // post request
  // 根据极验返回的用户验证状态, 网站主进行自己的业务逻辑
  // According to the user authentication status returned by the geetest, the website owner carries out his own business logic
  post_form(datas, API_URL)
    .then((result) => {
      if (result["result"] == "success") {
        console.log("validate success");
        res.send("success");
      } else {
        console.log("validate fail:" + result["reason"]);
        res.send("fail");
      }
    })
    .catch((err) => {
      // 当请求Geetest服务接口出现异常，应放行通过，以免阻塞正常业务。
      // When the request geetest service interface is abnormal, it shall be released to avoid blocking normal business.
      console.log("Geetest server error:" + err);
      res.send("success");
    });
});

// 生成签名
// Generate signature
function hmac_sha256_encode(value, key) {
  var hash = crypto
    .createHmac("sha256", key)
    .update(value, "utf8")
    .digest("hex");
  return hash;
}

// 发送post请求, 响应json数据如：{"result": "success", "reason": "", "captcha_args": {}}
// Send a post request and respond to JSON data, such as: {result ":" success "," reason ":" "," captcha_args ": {}}
async function post_form(datas, url) {
  var options = {
    url: url,
    method: "POST",
    params: datas,
    timeout: 5000,
  };

  var result = await axios(options);

  if (result.status != 200) {
    // geetest服务响应异常
    // geetest service response exception
    console.log("Geetest Response Error, StatusCode:" + result.status);
    throw new Error("Geetest Response Error");
  }
  return result.data;
}

module.exports = router;