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.
Rajkiran is currently working as a SharePoint Consultant in India . Rajkiran having 7+ 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).