SPFx React Web Part & reCAPTCHA

Today we could take a look on simple example how we can add Google reCAPTCHA to our SharePoint Framework (SPFx) React Web Part.

Firstly, you have to register to use reCAPTCHA API here. Choose reCAPTCHA V2. After registration save Site Key because you will need it a little bit later.

Because we chose React Framework for our SPFx Web Part we could use react-google-recaptcha npm package. We must use react-async-script too.

npm install --save react-async-script@0.8.0 react-google-recaptcha@0.8.1

Please take care with version of both npm packages. It depends from the version of React. Read about that on GitHub.

After that you could import it with that statement:

import ReCAPTCHA from 'react-google-recaptcha';

And finally you could use it inside render() method of your React Component:

<ReCAPTCHA ref={ (el) => { this.captcha = el; } }
 sitekey="{your-site-key}"
 onChange={ this.Recaptcha_onChange } />

Cheers!
Gašper Rupnik

{End.}

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Powered by WordPress.com.

Up ↑

%d bloggers like this: