xlsdg / react-geetest Goto Github PK

initGeetest({
    // 省略配置参数
}, function (captchaObj) {
    // 省略其他方法的调用

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

        // ajax 伪代码
        ajax('/api/gt-validate', {
            geetest_challenge: result.geetest_challenge,
            geetest_validate: result.geetest_validate,
            geetest_seccode: result.geetest_seccode,

            username: 'xxx',
            password: 'xxx'

            // 其他服务端需要的数据，比如登录时的用户名和密码
        }, function (data) {
            // 根据服务端二次验证的结果进行跳转等操作
            if (data.status === 'fail') {
                alert('用户名或密码错误，请重新输入并完成验证');
                captchaObj.reset(); // 调用该接口进行重置
            }
        });
    });
});

  onSuccess: function onSuccess() {},
  onError: function onError() {},
  onClose: function onClose() {},

  ins.appendTo(that.dom);
        ins.onReady(onReady);
        ins.onSuccess(function() {
          return onSuccess(ins.getValidate(), ins);
        });
        ins.onError(onError);
        ins.onClose(onClose);

import React from 'react';
import { request } from 'umi';
import Geetest from 'react-geetest';

export default () => {
  const gt = '0cb2301a6474506db6cabd271ae3976d';
  const challenge = 'c1caf3daf3feb384161de77ddc9bdf2c';

  const onSuccess = (isSuccess: any) => {
    const { geetest_challenge, geetest_seccode, geetest_validate } = isSuccess;

    console.log(isSuccess, '每次都是相同的');
  };

  return (
    <div>
      <Geetest
        gt={gt}
        challenge={challenge}
        offline
        product={"float"}
        newCaptcha
        nextWidth="90%"
        bgColor="#000"
        onSuccess={onSuccess}
      />
    </div>
  );
}