shahradelahi/react-geetest

React library for GeeTest captcha integration

GeeTest integration for React

A very simple React component to integrate GeeTest captcha.

Installation

npm install react-geetest-v4

Usage

Normal practice

import React from 'react';
import GeeTest, { GeeTestRef } from 'react-geetest-v4';

export default function Home(): JSX.Element {
  const captchaRef = React.useRef<GeeTestRef | null>(null); // Access: showCaptcha, reset, ...
  return (
    <div>
      <GeeTest
        captchaId={'your captcha id'}
        containerId={'geetest-captcha'} // Optional
        onSuccess={(result) => console.log('success. result: ', result)}
        onReady={() => console.log('ready')}
      />
      <br />
      <GeeTest
        ref={captchaRef}
        captchaId={'your captcha id'}
        product={'bind'}
        onSuccess={() => console.log('success')}
      >
        <button>Submit</button>
      </GeeTest>
    </div>
  );
}

Using hooks

import React from 'react';
import { useGeeTest } from 'react-geetest-v4';

export default function Home(): JSX.Element {
  const { captcha, state } = useGeeTest('your captcha id', {
    product: 'bind',
    protocol: 'https://',
    containerId: 'geetest-captcha',
  });

  const onClick = () => {
    captcha?.showCaptcha();
  };

  return (
    <div>
      <button onClick={onClick}>Submit</button>
    </div>
  );
}

Server validation

On this example we're using Next.JS handlers, but you can use any other framework.

import type { NextApiRequest, NextApiResponse } from 'next';
import { validateCaptcha, generateSignToken } from 'react-geetest-v4';

const CAPTCHA_ID = '647f5ed2ed8acb4be36784e01556bb71';
const CAPTCHA_KEY = 'b09a7aafbfd83f73b35a9b530d0337bf';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const { captcha_output, gen_time, lot_number, pass_token } = req.body;
  if (!captcha_output || !gen_time || !lot_number || !pass_token) {
    return res.status(400).json({ error: 'Missing required parameters' });
  }

  const { result } = await validateCaptcha({
    captcha_id: CAPTCHA_ID,
    lot_number,
    captcha_output,
    pass_token,
    gen_time,
    sign_token: generateSignToken(lot_number, CAPTCHA_KEY),
  });

  return res.status(200).json({ ok: result === 'success' });
}

react-geetest's Issues

在 onSuccess 回调函数里获取其他useState的值，一直都是默认初始化的值

在 onSuccess 回调函数里获取其他useState的值，一直都是默认初始化的值

   const [registerObj, setRegisterObj] = useState({
        username: "",
        password: "",
        email: "",
        code: "",
    })

   const handleSendCode = ()=>{
        console.log(captchaRef)
        if (!captchaRef.current){
            toast.error("滑块验证码加载失败，请刷新页面，或者检测是否被浏览器广告拦截插件拦截")
            return
        }
        console.log(registerObj);//这里获取的值一直是默认的初始化的值，是有更改值得，就是放在 geetest 的OnSuccess会一直是默认的值，其他地方调用是正常的
       
        console.log(captchaRef.current.getValidate())
    }

为什么无论传什么参数，验证结果都是true呢

我用的是next.js，新建了一个验证文件
/api/geetest/verify.ts

`
import { NextApiRequest, NextApiResponse } from 'next';
import { validateCaptcha, generateSignToken } from 'react-geetest-v4';

const CAPTCHA_ID = '';
const CAPTCHA_KEY = '';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const { captcha_output, gen_time, lot_number, pass_token } = req.body;
if (!captcha_output || !gen_time || !lot_number || !pass_token) {
return res.status(400).json({ error: '缺少参数' });
}

const validate = await validateCaptcha({
captcha_id: CAPTCHA_ID,
sign_token: generateSignToken(lot_number, CAPTCHA_KEY),
lot_number,
captcha_output,
pass_token,
gen_time,
});

return res.status(200).json({ ok: validate });
}
`
当我随便提交一些参数到这个请求时，返回的结果都是{ok:true}

Reset the captcha validation or clear captcha when some API Server if its error

basically i have logic for signin in here

signInWithOTP(
        {...jsonPayload, ...geetestData},
        {onError: () => {/*do in here*/}}
)

how to reseting the captcha from start if some error happen?

useGeeTest is undefined

import { useGeeTest } from 'react-geetest-v4';

const { captcha, state } = useGeeTest('your captcha id', {
    product: 'bind',
    protocol: 'https://',
    containerId: 'geetest-captcha',
  });

err

geetest_v4__WEBPACK_IMPORTED_MODULE_7__.useGeeTest) is not a function

useGeeTest 没有 export

useGeeTest 没有 export