https://github.com/shahradelahi/react-geetest
React library for GeeTest captcha integration
https://github.com/shahradelahi/react-geetest
geetest geetest-captcha react
Last synced: 12 months ago
JSON representation
React library for GeeTest captcha integration
- Host: GitHub
- URL: https://github.com/shahradelahi/react-geetest
- Owner: shahradelahi
- License: mit
- Created: 2023-03-27T14:46:47.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-01-13T09:29:48.000Z (over 2 years ago)
- Last Synced: 2024-10-29T20:29:24.485Z (over 1 year ago)
- Topics: geetest, geetest-captcha, react
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-geetest-v4
- Size: 200 KB
- Stars: 58
- Watchers: 2
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# GeeTest integration for React
A very simple React component to integrate [GeeTest captcha](https://docs.geetest.com/BehaviorVerification/overview/start/).
## Installation
```bash
npm install react-geetest-v4
```
## Usage
#### Normal practice
```tsx
import React from 'react';
import GeeTest, { GeeTestRef } from 'react-geetest-v4';
export default function Home(): JSX.Element {
const captchaRef = React.useRef(null); // Access: showCaptcha, reset, ...
return (
console.log('success. result: ', result)}
onReady={() => console.log('ready')}
/>
console.log('success')}
>
Submit
);
}
```
#### Using hooks
```tsx
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 (
Submit
);
}
```
#### Server validation
On this example we're using Next.JS handlers, but you can use any other framework.
```typescript
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' });
}
```