Google ReCaptcha In SharePoint Framework Webpart(SPFx)

In this article, we will see how we can implement Google recaptcha in SharePoint framework webpart.

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
Google ReCaptcha In SharePoint Framework Webpart(SPFx)
 
On sucessfull submission, we get site key and secret key, and copy site key somewhere we will be using later. 
Google ReCaptcha In SharePoint Framework Webpart(SPFx) 
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 
  1. yo @microsoft/sharepoint  
Select below, we will be using React framework for the purpose of this excercise.
 
Google ReCaptcha In SharePoint Framework Webpart(SPFx) 
 
Step 3 
 
Install required npm packages. Run the below commands one by one to install required packages.
  1. npm install --save react-google-recaptcha  
  2. npm install --save react-async-script  
  3. 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 
  1. import ReCAPTCHA from 'react-google-recaptcha';  
  2. import * as ReactDom from 'react-dom';  
  3. import { TextField, MaskedTextField,PrimaryButton,MessageBar, MessageBarType   } from 'office-ui-fabric-react';  
Replace your class code with below, 
  1. export default class Recaptcha extends React.Component<IRecaptchaProps, {}> {  
  2.   
  3.   public captcha:any;  
  4.   public _messageContainer:HTMLElement = undefined;  
  5.     
  6.   public render(): React.ReactElement<IRecaptchaProps> {  
  7.     return (  
  8.       <div className={ styles.recaptcha }>  
  9.       <p>  
  10.         <TextField label="Enter your name" styles={{ fieldGroup: { width: 300 } }} />  
  11.         </p>  
  12.         <ReCAPTCHA ref={ (el) => { this.captcha = el; } }  
  13.         sitekey="6LeZV7oUAAAAALiIfCUnnrlXE0fYrcyvM9JHVN72"  
  14.         onChange={this.onChange} />  
  15.         <p>  
  16.        <div id="messageContainer"   ref={(elm) => { this._messageContainer = elm; }}>  
  17.         </div>  
  18.         </p>  
  19.   
  20.         <PrimaryButton text="Submit"  onClick={() => this.buttonClicked()}   />  
  21.       </div>  
  22.     );  
  23.   }  
  24.   
  25.   public buttonClicked(): void {  
  26.     if(this.captcha.getValue())  
  27.     {  
  28.   
  29.       ReactDom.unmountComponentAtNode(this._messageContainer);  
  30.       const element2 = React.createElement(  
  31.         MessageBar,  
  32.         {  
  33.           messageBarType:MessageBarType.success,  
  34.           isMultiline:false,  
  35.           dismissButtonAriaLabel:"Close"  
  36.         },  
  37.         "You data has been saved sucessfully"  
  38.       );  
  39.       //const camContainer = document.getElementById("camContainer")  
  40.       ReactDom.render(element2, this._messageContainer);       
  41.     }  
  42.       
  43.     else{  
  44.       const element2 = React.createElement(  
  45.         MessageBar,  
  46.         {  
  47.           messageBarType:MessageBarType.error,  
  48.           isMultiline:false,  
  49.           dismissButtonAriaLabel:"Close"  
  50.         },  
  51.         "Please select captcha."  
  52.       );  
  53.       //const camContainer = document.getElementById("camContainer")  
  54.       ReactDom.render(element2, this._messageContainer);       
  55.     }  
  56.   }  
  57.   
  58.   public onChange(value){  
  59.     console.log("Captcha value:", value);  
  60.   }  
  61. }  
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 
 
Google ReCaptcha In SharePoint Framework Webpart(SPFx)
 
Google ReCaptcha In SharePoint Framework Webpart(SPFx)
 
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.