Add Google ReCaptcha in SharePoint Online (Step by Step tutorial)

In this SharePoint tutorial, we will discuss how to add Google ReCaptch in SharePoint Online or SharePoint 2013/2016/2019 sites. Google has released a new version of recaptcha, with enhanced security and richer user experience.

The points below might help to clarify certain instructions to create a ReCaptch in SharePoint.

Add Google ReCaptcha in SharePoint

Now we will see how to add Add Google ReCaptcha in SharePoint. First we need to do some con

Step-1: You need a site key and secret key in order to use ReCaptcha in your application.

Step-2: You have to generate your keys after register your application URL under below given URL.

Step-3: For example, My SharePoint online URL is https://RajDev.sharepoint.com so you must use the same URL to generate the keys.

Step-4: For registering URL, go to the Google ReCaptcha URL and click on plus icon as per below image.

Step-5: Enter your label name and choose reCaptchV2 and enter your application URL excluding https inside domains.

Step-6: Once you enter everything just click on submit and it will give you both site key and secret key as per below image.

Step-7: To integrate in your HTML client the recaptcha script reference must be incorporated in the HEAD section of the page : 

<Script src = ‘https: //www.google.com/recaptcha/api.js’> </ script> 

Step-8: Add your JavaScript code as per below code.

<script>
     var onloadCallback = function() {
        grecaptcha.render('google_recaptcha', {
          'sitekey' : '6LfttpMUAAiAAAEn_Vgui0Amn_4GvM16Di4D4e3z'
        });
      };
</script>

Step-9: You also need to create a method to validate the response recatpcha

$(document).ready(function ($) {  
        $('#file_input').MultiFile();  
        
	
        $("#fbutton").click(function () { 
		if(IsValid())
		{
		if (checkifreqfld()) {
              event.preventDefault();
              var rcres = grecaptcha.getResponse();
              if(rcres.length){
                grecaptcha.reset();
                finalSave() ;
              }else{
                showHideMsg("Please verify you are not a robot!","error");
              }
            } 
          }			
		});  
       
    });
 // Here is the HTML code for ReCapctha service.
<div style="margin-left: 10px;">
                  <div id="google_recaptcha"></div>
               </div>

Step-10: Finally in the SharePoint page load, you can able to see your Captcha and for verifying, you must have to click the submit button.

You may like following SharePoint tutorials:

• Google Pie Chart in SharePoint Online (Step by Step tutorial)
• SharePoint CSS and JavaScript Examples
• Change default list view style using CSS in SharePoint Online/2016/2013
• 3 Different ways to Change Site Collection URL in SharePoint 2013/2016 using PowerShell
• Left Navigation or Quick Launch Customization or Branding using CSS in SharePoint Online/2013/2016
• Get Current User Details Using JavaScript Object Model (jsom) and jQuery in SharePoint 2013/2016/Online
• Get Middle East prayer timing using JavaScript Code
• Display Task List data in a table using SharePoint REST API and filter by status column
• Get current weather using JavaScript in SharePoint Online/2013/2016
• Change language settings SharePoint online

Hope this SharePoint tutorial helps to add or integrate Google ReCaptcha in SharePoint Online or SharePoint 2013/2016/2019.