react-geetest-captcha

A react.js CAPTCHA for GEETEST.com

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-geetest-captcha
1.0.35 years ago6 years agoMinified + gzip package size for react-geetest-captcha in KB

Readme

react-geetest-captcha
a react.js component for GEETEST
Table of Contents generated with DocToc
- <RGCaptcha />
- [RGCaptcha props](#rgcaptcha-props)
  - [`name: string`](#name-string)
  - [`data: () => Promise<dataObject, any> | dataObject`](#data---promisedataobject-any--dataobject)
    - [The "dataObject":](#the-dataobject)
  - [`width?: string | number`](#width-string--number)
  - [`product?: 'popup' | 'float' | 'custom' | 'bind'`](#product-popup--float--custom--bind)
  - [`lang?: 'zh-cn'|'zh-hk'|'zh-tw'|'en'|'ja'|'ko'|'ru'|'ar'|'es'|'pt-pt'|'fr'|'de'`](#lang-zh-cn--en)
  - [`protocol?: 'http://' | 'https://'`](#protocol-http--https)
  - [`area?: string`](#area-string)
  - [`nextWidth?: string`](#nextwidth-string)
  - [`bgColor?: string`](#bgcolor-string)
  - [`timeout?: number`](#timeout-number)
  - [`onReady?: () => any`](#onready---any)
  - [`onSuccess?: (result: resultObject) => any`](#onsuccess-result-resultobject--any)
    - [The "resultObject":](#the-resultobject)
  - [`onClose?: () => any`](#onclose---any)
  - [`onError?: () => any`](#onerror---any)
  - [`loadingComponent?: React.Component<{loading: boolean}>`](#loadingcomponent-reactcomponentloading-boolean)
  - [`loadingText?: string`](#loadingtext-string)
- appendTo: (name: string) => any - bindForm: (name: string, position: string) => any - getValidate: (name: string) => any - reset: (name: string) => any - verify: (name: string) => any

Install

npm install react-geetest-captcha

Usage

import React from 'react';
import { RGCaptcha, reset } from 'react-geetest-captcha';

const CAPTCHA_NAME = 'demoCaptcha';

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: '',
      captcha: false,
      geetestChallenge: '',
      geetestValidate: '',
      geetestSeccode: '',
    };
  }

  resetForm() {
    reset(CAPTCHA_NAME);
    this.setState({
      username: '',
      password: '',
      captcha: false,
      geetestChallenge: '',
      geetestValidate: '',
      geetestSeccode: '',
    });
  }

  handleFieldChange(e) {
    this.setState({
      [e.target.name]: [e.target.value]
    });
  }

  handleSuccess(data) {
    this.setState({
      captcha: true,
      geetestChallenge: data.geetest_challenge,
      geetestValidate: data.geetest_validate,
      geetestSeccode: data.geetest_seccode,
    });
  }

  handleSubmit(e) {
    e.preventDefault();
    const {
      username,
      password,
      captcha,
      geetestChallenge,
      geetestValidate,
      geetestSeccode,
    } = this.state;

    if(captcha) {
      ajaxLogin({
        username,
        password,
        geetestChallenge,
        geetestValidate,
        geetestSeccode,
      })
        .then(data => {
          if(data.success) {
            //
          }else {
            this.resetForm();
          }
        })
        .catch(() => {
          this.resetForm();
        });
    }
  }

  render() {
    const { username, password } = this.state;

    return (
      <form onSubmit={this.handleSubmit} onChange={this.handleFieldChange}>
        <label>
          Username:
          <input name="username" value={username} type="text" />
        </label>
        <label>
          Password:
          <input name="password" value={password} type="password" />
        </label>
        <RGCaptcha
          name={CAPTCHA_NAME}
          width="100%"
          onSuccess={this.handleSuccess}
          data={() =>
            ajax
              .then(resp => {
                const { captcha } = (resp && resp.data) || {};
                // console.log(captcha);
                // {
                //   "gt": "e385d274eeedb650fa008875ff7b14a2",
                //   "challenge": "f4873d2af972a38811814f644920b8ab",
                //   "success": 1,
                // }
                return captcha;
              })
          }
        />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

API

<RGCaptcha />

RGCaptcha props

name: string
data: () => Promise<dataObject, any> | dataObject
The "dataObject":
  • gt: string
  • challenge: string
  • success: number
  • new_captcha?: boolean
width?: string | number
product?: 'popup' | 'float' | 'custom' | 'bind'
lang?: 'zh-cn' | 'zh-hk' | 'zh-tw' | 'en' | 'ja' | 'ko' | 'ru' | 'ar' | 'es' | 'pt-pt' | 'fr' | 'de'
protocol?: 'http://' | 'https://'
area?: string
nextWidth?: string
bgColor?: string
timeout?: number
onReady?: () => any
onSuccess?: (result: resultObject) => any
The "resultObject":
resultObject = instance.getValidate();
// console.log(resultObject);
// {
//   geetest_challenge: "1ef13c67010acf6c282756145def60faag",
//   geetest_validate: "2ea11528e5d96c06e4a14d9a1dfc5916",
//   geetest_seccode: "2ea11528e5d96c06e4a14d9a1dfc5916|jordan",
// }
onClose?: () => any
onError?: () => any
loadingComponent?: React.Component<{loading: boolean}>
loadingText?: string

appendTo: (name: string) => any

a proxy method for GEETEST instance.appendTo method

bindForm: (name: string, position: string) => any

a proxy method for GEETEST instance.bindForm method

getValidate: (name: string) => any

a proxy method for GEETEST instance.getValidate method

reset: (name: string) => any

a proxy method for GEETEST instance.reset method

verify: (name: string) => any

a proxy method for GEETEST instance.verify method