Google ReCaptcha In SharePoint Framework Webpart(SPFx)

In this article, we will learn how to implement Google reCaptcha in SPFx webpart. We will be using Google reCaptcha API service to implement captcha in SharePoint framework webpart to protect spam submission using bot on a web page. CAPTCHA is used to prevent bots from automatically submitting forms with SPAM or other unwanted content.

 

Step 1

 

Register a new site on Google reCaptcha API at this link 

• Login with valid google account.
• Provide a valid site label name.
• Select reCAPTCHA v2, Select "I'm not a robot"
• Add domain name, if you are using local workbench enter localhost. 
• For using it in context of SharePoint, enter your tenant url https://yourorg.sharepoint.com
• Accept terms and conditions
• Submit

 

On sucessfull submission, we get site key and secret key, and copy site key somewhere we will be using later. 

 

Step 2 - Create a SPFx webpart

 

Please make sure your development enviorment is ready, if not you can follow this link

 

Run the below yoeman generator command to create a new SPFx solution 

yo @microsoft/sharepoint

Select below, we will be using React framework for the purpose of this excercise.

 

 

 

Step 3 

 

Install required npm packages. Run the below commands one by one to install required packages.

npm install --save react-google-recaptcha
npm install --save react-async-script
npm install @types/react-google-recaptcha

Step 4

 

Open Visual Studio code and your target solution folder.

 

Step 5 - Modify code 

 

Open your react tsx file "D:\SP\Samples\react-recaptcha\src\webparts\recaptcha\components\Recaptcha.tsx" 

 

On top, import the below package 

import ReCAPTCHA from 'react-google-recaptcha';
import * as ReactDom from 'react-dom';
import { TextField, MaskedTextField,PrimaryButton,MessageBar, MessageBarType   } from 'office-ui-fabric-react';

Replace your class code with below, 

export default class Recaptcha extends React.Component<IRecaptchaProps, {}> {

  public captcha:any;
  public _messageContainer:HTMLElement = undefined;

  public render(): React.ReactElement<IRecaptchaProps> {
    return (
      <div className={ styles.recaptcha }>
      <p>
        <TextField label="Enter your name" styles={{ fieldGroup: { width: 300 } }} />
        </p>
        <ReCAPTCHA ref={ (el) => { this.captcha = el; } }
        sitekey="6LeZV7oUAAAAALiIfCUnnrlXE0fYrcyvM9JHVN72"
        onChange={this.onChange} />
        <p>
       <div id="messageContainer"   ref={(elm) => { this._messageContainer = elm; }}>
        </div>
        </p>

        <PrimaryButton text="Submit"  onClick={() => this.buttonClicked()}   />
      </div>
    );
  }

  public buttonClicked(): void {
    if(this.captcha.getValue())
    {

      ReactDom.unmountComponentAtNode(this._messageContainer);
      const element2 = React.createElement(
        MessageBar,
        {
          messageBarType:MessageBarType.success,
          isMultiline:false,
          dismissButtonAriaLabel:"Close"
        },
        "You data has been saved sucessfully"
      );
      //const camContainer = document.getElementById("camContainer")
      ReactDom.render(element2, this._messageContainer);
    }

    else{
      const element2 = React.createElement(
        MessageBar,
        {
          messageBarType:MessageBarType.error,
          isMultiline:false,
          dismissButtonAriaLabel:"Close"
        },
        "Please select captcha."
      );
      //const camContainer = document.getElementById("camContainer")
      ReactDom.render(element2, this._messageContainer);
    }
  }

  public onChange(value){
    console.log("Captcha value:", value);
  }
}

Please note here, we are using a simple textbox, captcha and a button. On click of button we are checking if the user has resolved captcha, if not then it will display an error message. Otherwisw it will continue processing and show sucess message.  

 

Step 6

 

Save file, and go to node js command prompt again. Run 'gulp serve'

 

Open your SharePoint local workbench.

 

https://tranformers.sharepoint.com/sites/optimusprime/_layouts/15/workbench.aspx 

 

 

 

We can see Captcha is being displayed on the page and it is validating human clicks. There are several options available which can be used as configuration. Please refer to the below link for same.

 

https://github.com/dozoisch/react-google-recaptcha 

 

Conclusion

 

In this article, we have learned how to use Google reCaptcha v2 in SPFx webpart. Though it is a very simple use case, it's  very valid if you wanted to implement captcha in your Sharepoint custom form based on SPFx webpart. CAPTCHA is used to prevent bots from automatically submitting forms with SPAM or other unwanted content.