Add Google ReCaptcha in SharePoint Online or SharePoint 2013/2016/2019 (Step by Step tutorial)

google recaptcha sharepoint

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.

SharePoint deveopment training course

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.

google recaptcha sharepoint
google recaptcha sharepoint

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

how to add google recaptcha sharepoint
how to add google recaptcha sharepoint

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.

Add Google ReCaptch in SharePoint
Add Google ReCaptch in SharePoint

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.

google recaptcha sharepoint
google recaptcha sharepoint

You may like following SharePoint tutorials:

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

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

About Rajkiran Swain

Rajkiran is currently working as a SharePoint Consultant in QATAR . Rajkiran having 6 + years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).

View all posts by Rajkiran Swain →