@prosopo/procaptcha-react
v2.2.3
Published
React components for integrating the Prosopo [procaptcha](https://github.com/prosopo/procaptcha) into a React app.
Downloads
579
Readme
Prosopo Procaptcha React Component Library
React components for integrating the Prosopo procaptcha into a React app.
Prosopo is a distributed human verification service that can be used to stop bots from interacting with your apps. Sign up to be a network beta tester.
Installation
You can install this library with:
npm install @prosopo/procaptcha-react --save
Basic Usage
See the client example for a minimal example of these components being used in a frontend app.
<Procaptcha config={config} callbacks={{ onError, onHuman, onExpired }} />
Callbacks
ProcaptchaEvents
are passed to the captcha component at creation.
The captcha event callbacks are defined as follows:
/**
* A list of all events which can occur during the Procaptcha process.
*/
export interface ProcaptchaEvents {
onError: (error: Error) => void
onHuman: (output: ProcaptchaOutput) => void
onExtensionNotFound: () => void
onExpired: () => void
onFailed: () => void
}
onHuman
The onHuman
callback is called when the user has successfully completed the captcha challenge. The ProcaptchaOutput
object contains the following fields:
| Key | Type | Description | | ------------ | ------ | ----------------------------------------------------------------------------------------------------------------------------- | | commitmentId | string | The commitment ID of the captcha challenge. This is used to verify the user's response on-chain. | | providerUrl | string | The URL of the provider that the user used to solve the captcha challenge. | | dapp | string | The SITE_KEY of your application / website | | user | string | The user's account address | | blockNumber | number | The block number of the captcha challenge. This is used to verify that the contacted provider was randomly selected on-chain. |
onError
The onError
callback is called when an error occurs during the captcha process. The Error
object is a standard
JavaScript error.
onExpired
The onExpired
callback is called when the captcha challenge has expired. This can occur if the user takes too long to
complete the challenge.
onFailed
The onFailed
callback is called when the user has failed the captcha challenge. This can occur if the user answers the
challenge incorrectly.
Add the Procaptcha Widget to your Web page using a React Component
You can see Procaptcha being used as a React component in our React Demo.
The Procaptcha component is called as follows:
<Procaptcha config={config} callbacks={{ onError, onHuman, onExpired }} />
A config object is required and must contain your SITE_KEY. The callbacks are optional and can be used to handle the
various Procaptcha events. The following config demonstrates the PROSOPO_SITE_KEY
variable being pulled from
environment variables.
const config: ProcaptchaClientConfigInput = {
account: {
address: process.env.PROSOPO_SITE_KEY || undefined,
},
web2: 'true',
dappName: 'client-example',
defaultEnvironment: 'rococo',
networks: {
rococo: {
endpoint: 'wss://rococo-contracts-rpc.polkadot.io:443',
contract: {
address: '5HiVWQhJrysNcFNEWf2crArKht16zrhro3FcekVWocyQjx5u',
name: 'prosopo',
},
},
},
solutionThreshold: 80,
}
Config Options
| Key | Type | Description |
| ------------------ | ------ | --------------------------------------------------------------------------------------- |
| account | string | The SITE_KEY you received when you signed up |
| web2 | string | Set to true
to enable web2 support |
| dappName | string | The name of your application / website |
| defaultEnvironment | string | The default environment to use - set to rococo
|
| networks | object | The networks your application supports - copy paste this from the config above |
| solutionThreshold | number | The percentage of captcha that a user must have answered correctly to identify as human |
Verify the User Response Server Side
Please see the main README for instructions on how to implement the server side of Procaptcha.