fpCaptcha Client React SDK

🚧 This is still a WIP project, do not use this in production. 🚧

install

1. Follow this guide to retrieve a GitLab personal access token.
2. Run these lines in shell to add the config to npm.

$ npm config set @funpodium:registry https://gitlab.com/api/v4/packages/npm/
$ npm config set -- '//gitlab.com/api/v4/packages/npm/:_authToken' "<your_personal_access_token>"

3. Run one of these lines to add it to the project's package.json.

npm install @funpodium/fp-captcha-client-react-sdk
# or use yarn
yarn add @funpodium/fp-captcha-client-react-sdk

usage

<FpCaptcha />

all-in-one React component that encapsulate the logic in a nice package.

import { FpCaptcha } from "@funpodium/fp-captcha-client-react-sdk";

const App: React.FC = () => {
  const [visible, useVisible] = useState(false);
  const [challengeUuid, setChallengeUuid] = useState("");

  const startNewChallenge = () => {
    //TODO: get challengeId
  };

  const handlePassed = () => {
    //TODO: after pass
  };

  useEffect(() => {
    startNewChallenge();
  }, []);

  return (
    <FpCaptcha
      visible={visible}
      challengeId={challengeUuid}
      options={{
        window: global.window,
        dialogMode: true,
        config: {
          apiUrl: CAPTCHA_SERVICE_API_URL,
          applicationLocale: "zh",
          chunkSize: 10,
          dragThreshold: 20,
        },
      }}
      onClose={() => setVisible(false)}
      onPassed={handlePassed}
    />
  );
};

FpCaptcha Features

| Attribute | Usage | Type | | ----------- | ------------------------------------- | ----------- | | visible | showing the Fpcaptcha component | Boolean | | challengeId | challengeUuid came form client server | String | | onClose | triggered when closing | ()=>void | | onPassed | triggered when passing the judgement | ()=>void | | options | setting of captcha | OptionsType |

FpCaptcha-options

| Attribute | Usage | Type | | ---------- | ------------------------------------------ | ---------- | | window | window which the captcha object binding on | Window | | dialogMode | Fpcaptcha may appear in a dialog | boolean | | config | config of captcha | ConfigType |

FpCaptcha-options-config

| Attribute | Usage | Type | | ----------------- | ----------------------------------- | ------ | | apiUrl | main captcha judgement services url | URL | | applicationLocale | Locale of captcha | string | | dismissTime | under developing!! | number | | chunkSize | chunk size for the decipher | number | | dragThreshold | drag active area on the map | number |

useFpCaptcha hook

a React hook that handles the dirty work for you while it allows you to trigger methods on your command.

import { useFpCaptcha } from "@funpodium/fp-captcha-client-react-sdk";

const App: React.FC = () => {
  const canvasRef = useRef();
  const { build, refresh, result, fpCaptcha } = useFpCaptcha(canvasRef);

  useEffect(() => {
    build();
  }, [build]);

  return <canvas ref={canvasRef} />;
};

useFpCaptcha-Return type

| Attribute | Usage | Type | | --------- | ---------------------------------------------------------------------- | --------------------------------------- | | build | build fpCaptcha component | (challengeId: string) => Promise<void> | | refresh | refresh fpCaptcha component | () => Promise<void> | | judgement | judgement object return by server | JudgementType | | locale | locale object return by server (setting of each product) | LocaleType | | fpCaptcha | fpCaptcha class object (not usually used / object from js-captcha-sdk) | FpCaptchaType | | loading | is loading | boolean |

Type

JudgementType

{
  challengeUuid: string;
  code: number;
  message: string;
  isPassed: boolean;
}

LocaleType

{
  fail: string;
  abnormal: string;
  provide: string;
  success: string;
  refresh: string;
  description: string;
  info: string;
}