react-geetest-captcha

react-geetest-captcha

a react.js component for GEETEST

Table of Contents generated with DocToc

• Install
• Usage
• API
  • <RGCaptcha />
    • RGCaptcha props
      • name: string
      • data: () => Promise<dataObject, any> | dataObject
        • The "dataObject":
      • width?: string | number
      • product?: 'popup' | 'float' | 'custom' | 'bind'
      • lang?: 'zh-cn' | 'en'
      • protocol?: 'http://' | 'https://'
      • area?: string
      • nextWidth?: string
      • bgColor?: string
      • timeout?: number
      • onReady?: () => any
      • onSuccess?: (result: resultObject) => any
        • The "resultObject":
      • onClose?: () => any
      • onError?: () => any
      • loadingComponent?: React.Component<{loading: boolean}>
      • 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' | 'en'

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