在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):dozoisch/react-google-recaptcha开源软件地址(OpenSource Url):https://github.com/dozoisch/react-google-recaptcha开源编程语言(OpenSource Language):JavaScript 100.0%开源软件介绍(OpenSource Introduction):react-google-recaptchaReact component for Google reCAPTCHA v2. Installationnpm install --save react-google-recaptcha UsageAll you need to do is sign up for an API key pair. You will need the client key then you can use The default usage imports a wrapped component that loads the google recaptcha script asynchronously then instantiates a Code Example: import ReCAPTCHA from "react-google-recaptcha";
function onChange(value) {
console.log("Captcha value:", value);
}
ReactDOM.render(
<ReCAPTCHA
sitekey="Your client site key"
onChange={onChange}
/>,
document.body
); Component PropsProperties used to customise the rendering:
Component Instance APIThe component instance also has some utility functions that can be called. These can be accessed via
Example: const recaptchaRef = React.createRef();
...
onSubmit = () => {
const recaptchaValue = recaptchaRef.current.getValue();
this.props.onSubmit(recaptchaValue);
}
render() {
return (
<form onSubmit={this.onSubmit} >
<ReCAPTCHA
ref={recaptchaRef}
sitekey="Your client site key"
onChange={onChange}
/>
</form>
)
} Invisible reCAPTCHASee the reCAPTCHA documentation to see how to configure it. With the invisible option, you need to handle things a bit differently. You will need to call the import ReCAPTCHA from "react-google-recaptcha";
const recaptchaRef = React.createRef();
ReactDOM.render(
<form onSubmit={() => { recaptchaRef.current.execute(); }}>
<ReCAPTCHA
ref={recaptchaRef}
size="invisible"
sitekey="Your client site key"
onChange={onChange}
/>
</form>,
document.body
); Additionally, you can use the import ReCAPTCHA from "react-google-recaptcha";
const ReCAPTCHAForm = (props) => {
const recaptchaRef = React.useRef();
const onSubmitWithReCAPTCHA = async () => {
const token = await recaptchaRef.current.executeAsync();
// apply to form data
}
return (
<form onSubmit={onSubmitWithReCAPTCHA}>
<ReCAPTCHA
ref={recaptchaRef}
size="invisible"
sitekey="Your client site key"
/>
</form>
)
}
ReactDOM.render(
<ReCAPTCHAForm />,
document.body
); Advanced usageGlobal properties used by reCaptchauseRecaptchaNet: If google.com is blocked, you can set Example global properties: window.recaptchaOptions = {
useRecaptchaNet: true,
}; CSP Nonce supportwindow.recaptchaOptions = {
nonce: document.querySelector('meta[name=\'csp-nonce\']').getAttribute('content'),
}; ReCaptcha loading google recaptcha script manuallyYou can also use the barebone components doing the following. Using that component will oblige you to manage the grecaptcha dep and load the script by yourself. import { ReCAPTCHA } from "react-google-recaptcha";
const grecaptchaObject = window.grecaptcha // You must provide access to the google grecaptcha object.
render(
<ReCAPTCHA
ref={(r) => this.recaptcha = r}
sitekey="Your client site key"
grecaptcha={grecaptchaObject}
/>,
document.body
); Hiding the RecaptchaAccording to the google docs you are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. Please include the following text:
If you wish to hide the badge you must add:
to your css. Migrate to 2.0
Notes on RequirementsAt least NotesPre |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论