在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):t49tran/react-google-recaptcha-v3开源软件地址(OpenSource Url):https://github.com/t49tran/react-google-recaptcha-v3开源编程语言(OpenSource Language):TypeScript 90.7%开源软件介绍(OpenSource Introduction):React Google Recaptcha V3React library for integrating Google ReCaptcha V3 to your App. Installnpm install react-google-recaptcha-v3 UsageProvide Recaptcha KeyTo use EnterpriseWhen you enable to use the enterprise version, you must create new keys. These keys will replace any Site Keys you created in reCAPTCHA. Check the migration guide. To work properly, you must select the Integration type to be The complete documentation to the enterprise version you can see here. ComponentsGoogleReCaptchaProvider
Usually, your application only needs one provider. You should place it as high as possible in your React tree. It's to make sure you only have one instance of Google Recaptcha per page and it doesn't reload unecessarily when your components re-rendered. Same thing applied when you use this library with framework such as Next.js or React Router and only want to include the script on a single page. Try to make sure you only have one instance of the provider on a React tree and to place it as high (on the tree) as possible.
import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3';
ReactDom.render(
<GoogleReCaptchaProvider
reCaptchaKey="[Your recaptcha key]"
language="[optional_language]"
useRecaptchaNet="[optional_boolean_value]"
useEnterprise="[optional_boolean_value]"
scriptProps={{
async: false, // optional, default to false,
defer: false, // optional, default to false
appendTo: 'head', // optional, default to "head", can be "head" or "body",
nonce: undefined // optional, default undefined
}}
>
<YourApp />
</GoogleReCaptchaProvider>,
document.getElementById('app')
); There are three ways to trigger the recaptcha validation: using the GoogleReCaptcha
import {
GoogleReCaptchaProvider,
GoogleReCaptcha
} from 'react-google-recaptcha-v3';
ReactDom.render(
<GoogleReCaptchaProvider reCaptchaKey="[Your recaptcha key]">
<GoogleReCaptcha onVerify={handleVerify} />
</GoogleReCaptchaProvider>,
document.getElementById('app')
); // IMPORTANT NOTES: The `GoogleReCaptcha` component is a wrapper around `useGoogleRecaptcha` hook and use `useEffect` to run the verification.
// It's important that you understand how React hooks work to use it properly.
// Avoid using inline function for the `onVerify` props as it can possibly cause the verify function to run continously.
// To avoid that problem, you can use a memoized function provided by `React.useCallback` or a class method
// The code below is an example that inline function can result in an infinite loop and the verify function runs continously:
const MyComponent: FC = () => {
const [token, setToken] = useState();
return (
<div>
<GoogleReCaptcha
onVerify={token => {
setToken(token);
}}
/>
</div>
);
}; React Hook: useGoogleReCaptcha (recommended approach)If you prefer a React Hook approach over the old good Higher Order Component, you can choose to use the custom hook The How to use the hook: import {
GoogleReCaptchaProvider,
useGoogleReCaptcha
} from 'react-google-recaptcha-v3';
const YourReCaptchaComponent = () => {
const { executeRecaptcha } = useGoogleReCaptcha();
// Create an event handler so you can call the verification on button click event or form submit
const handleReCaptchaVerify = useCallback(async () => {
if (!executeRecaptcha) {
console.log('Execute recaptcha not yet available');
return;
}
const token = await executeRecaptcha('yourAction');
// Do whatever you want with the token
}, [executeRecaptcha]);
// You can use useEffect to trigger the verification as soon as the component being loaded
useEffect(() => {
handleReCaptchaVerify();
}, [handleReCaptchaVerify]);
return <button onClick={handleReCaptchaVerify}>Verify recaptcha</button>;
};
ReactDom.render(
<GoogleReCaptchaProvider reCaptchaKey="[Your recaptcha key]">
<YourReCaptchaComponent />
</GoogleReCaptchaProvider>,
document.getElementById('app')
); withGoogleReCaptcha
The object contains the You are recommended to use the custom hook import {
GoogleReCaptchaProvider,
withGoogleReCaptcha
} from 'react-google-recaptcha-v3';
class ReCaptchaComponent extends Component<{}> {
handleVerifyRecaptcha = async () => {
const { executeRecaptcha } = (this.props as IWithGoogleReCaptchaProps)
.googleReCaptchaProps;
if (!executeRecaptcha) {
console.log('Recaptcha has not been loaded');
return;
}
const token = await executeRecaptcha('homepage');
};
render() {
return (
<div>
<button onClick={this.handleVerifyRecaptcha}>Verify Recaptcha</button>
</div>
);
}
}
export const WithGoogleRecaptchaExample =
withGoogleReCaptcha(ReCaptchaComponent);
ReactDom.render(
<GoogleReCaptchaProvider reCaptchaKey="[Your recaptcha key]">
<WithGoogleRecaptchaExample />
</GoogleReCaptchaProvider>,
document.getElementById('app')
); ExampleAn example of how to use these two hooks can found inside the
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论