History

Hugo Bernier 86013372c0 Added all 1.12.1 and 1.13 containers		2022-02-14 02:52:18 -05:00
..
assets	Removing unnecessary office product from the sample metadata	2021-12-10 19:55:32 +02:00
config	Few changes to make webpart configurable	2019-10-10 01:12:09 +05:30
screens	Few changes to make webpart configurable	2019-10-10 01:12:09 +05:30
src	Few changes to make webpart configurable	2019-10-10 01:12:09 +05:30
teams	Adding react-recaptch sample	2019-10-09 01:04:27 +05:30
.editorconfig	Adding react-recaptch sample	2019-10-09 01:04:27 +05:30
.gitignore	Adding react-recaptch sample	2019-10-09 01:04:27 +05:30
.yo-rc.json	Adding react-recaptch sample	2019-10-09 01:04:27 +05:30
README.md	Added all 1.12.1 and 1.13 containers	2022-02-14 02:52:18 -05:00
gulpfile.js	Adding react-recaptch sample	2019-10-09 01:04:27 +05:30
package-lock.json	Few changes to make webpart configurable	2019-10-10 01:12:09 +05:30
package.json	Few changes to make webpart configurable	2019-10-10 01:12:09 +05:30
tsconfig.json	Adding react-recaptch sample	2019-10-09 01:04:27 +05:30
tslint.json	Adding react-recaptch sample	2019-10-09 01:04:27 +05:30

README.md

SPFx Google reCaptcha Sample

Summary

This is sample web part which showcase how to implement Google reCaptcha v2 in SPFx. CAPTCHA is used to prevent bots from automatically submitting forms with SPAM or other unwanted content. If we are building a custom input form to get feedback, newsletter subscription or contact us form using SPFx webpart. We might have to implement SPAM protection using some CAPTCHA resolving technique. This sample can come in handy to extend it for your business requirement if you need to implement CAPTCHA in SPFx web part.

Please refer this link to know 'How to build this from Scratch'

Compatibility

Applies to

Prerequisites

We would need to register our site which wants to use reCaptcha at Google. Follow below steps to get site key.

Browse 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 condition
Submit

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

Solution

Solution	Author(s)
react-recaptcha	Siddharth Vaghasia(siddh_me)

Version history

Version	Date	Comments
1.0.0	Oct 10, 2019	Implemented few changes
1.0.0	Oct 08, 2019	Initial release

Minimal Path to Awesome

Clone this repository
in the command line run:
- npm install
- gulp serve

Features

This Web Part illustrates the following concepts on top of the SharePoint Framework:

Using react framework in SPFx web part
Using PnP Placeholder control to configure web part.
Using react-google-recaptcha npm package in SPFx web part
Validate if captcha is resolved before submitting data.

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.