Add Google Recaptcha on a SilverStripe form - captcha

Question

I am trying to add Google Recaptcha to my custom SilverStripe form.
I have generated Google public and private keys but I do not know where to put them to show a captcha on my website.
Here is my current code:
ContactPage
class ContactPage extends Page
{
private static $db = array(
'TelCustomerSupport' => 'Varchar',
'TelProjectSupport' => 'Varchar',
'OfficeName' => 'Text',
'OfficeStreetAddress' => 'Text',
'OfficeAddressLocality' => 'Text',
'OfficePostalCode' => 'Varchar',
'OfficeMapLink' => 'Text',
'OfficeLatitude' => 'Text',
'OfficeLongitude' => 'Text',
);
public function getCMSFields()
{
$fields = parent::getCMSFields();
// Add extra fields
$fields->addFieldToTab("Root.Main", new TextField('TelCustomerSupport', 'Phone - Customer, Trade & Retail Support'), "Content");
$fields->addFieldToTab("Root.Main", new TextField('TelProjectSupport', 'Phone - Project Support'), "Content");
$fields->addFieldToTab("Root.Main", new TextField('OfficeName'), "Content");
$fields->addFieldToTab("Root.Main", new TextField('OfficeStreetAddress'), "Content");
$fields->addFieldToTab("Root.Main", new TextField('OfficeAddressLocality'), "Content");
$fields->addFieldToTab("Root.Main", new TextField('OfficePostalCode'), "Content");
$fields->addFieldToTab("Root.Main", new TextField('OfficeMapLink'), "Content");
$fields->addFieldToTab("Root.Main", new TextField('OfficeLatitude'), "Content");
$fields->addFieldToTab("Root.Main", new TextField('OfficeLongitude'), "Content");
return $fields;
}
}
class ContactPage_Controller extends NetSuitePage_Controller
{
private static $allowed_actions = array('ContactForm');
// Generate the form
public function ContactForm()
{
// Create fields
$fields = new FieldList(
TextField::create("FirstName")->setTitle(_t('Contact.FIRSTNAME')),
TextField::create("LastName")->setTitle(_t('Contact.LASTNAME')),
EmailField::create("Email")->setTitle(_t('Contact.EMAILADDRESS')),
TextField::create("Phone")->setTitle(_t('Contact.PHONENUMBER')),
DropdownField::create('Iam', _t('Contact.IAMA'), $this->translateNetsuiteConfigArray('Contact', 'Iam')),
TextField::create("SendSubject")->setTitle(_t('Contact.SUBJECT')),
HoneyPotField::create("Subject2")->setTitle('Subject2'),
TextareaField::create("Message")->setTitle(_t('Contact.MESSAGE'))->setColumns(30)->setRows(10)
new RecaptchaField('MyCaptcha')
);
// Create actions
$submitbutton = new FormAction('doContactForm', _t('Contact.SEND'));
$submitbutton->addExtraClass('btn btn-black');
$actions = new FieldList(
$submitbutton
);
$validator = ZenValidator::create();
$validator->addRequiredFields(array('FirstName', 'LastName', 'Email', 'Phone', 'Iam', 'SendSubject', 'Message'));
$validator->setConstraint('FirstName', Constraint_length::create('max', 32));
$validator->setConstraint('LastName', Constraint_length::create('max', 32));
$validator->setConstraint('Phone', Constraint_length::create('min', 7));
$validator->setConstraint('Email', Constraint_type::create('email'));
$validator->setConstraint('Phone', Constraint_type::create('digits'));
$form = new Form($this, 'ContactForm', $fields, $actions, $validator);
$form->addExtraClass('contact-form');
$form->setFormMethod('POST', true);
return $form;
}
// Deal with form submission
public function doContactForm($data, $form)
{
$submission = new ContactFormSubmission();
$form->saveInto($submission);
$submission->write();
$data['path'] = print_r($this->refererTracker->retrieveAll(), true);
$email = new Email();
$email->setTemplate('ContactFormEmail');
$email->populateTemplate($data);
$email->setTo($this->getNetsuiteConfig('Contact', 'Emails'));
$email->setFrom("no-reply#warmup.co.uk");
$email->setSubject('[warmup.co.uk] New contact from the website');
$email->populateTemplate($data);
$email->send();
$post = $this->getNetsuiteConfig('Contact');
$post->firstname = $data['FirstName'];
$post->lastname = $data['LastName'];
$post->email = $data['Email'];
$post->phone = $data['Phone'];
$post->custentity116 = $data['Iam'];
$post->custentitysubject_contact_us = $data['SendSubject'];
$post->custentitymessage_contact_us = $data['Message'];
// Check for success
if ($this->queueNetSuitePost($post)) {
return $this->redirect(Director::get_current_page()->Link()."?success=1");
}
// Redirect back with form data and error message
Session::set('FormInfo.' . $form->FormName() . '.data', $data);
Session::set('FormInfo.'.$form->FormName().'.errors', array());
$form->sessionMessage("Netsuite error", 'bad');
return $this->redirectBack();
}
// Returns true if form submitted successfully
public function Success()
{
return isset($_REQUEST['success']) && $_REQUEST['success'] == "1";
}
public function getCurrentSubsite()
{
$subsite = Subsite::currentSubsite();
if($subsite) {
return $subsite->Title;
}
return $subsite;
}
}
ContactFormSubmission
class ContactFormSubmission extends DataObject {
private static $db = array(
'FirstName' => 'Text',
'LastName' => 'Text',
'Email' => 'Text',
'Phone' => 'Text',
'Iam' => 'Text',
'Subject' => 'Text',
'Message' => 'Text'
);
}
How do I correctly add Google Recaptcha to my form?

Answer 1

We can add Google Nocaptcha to our form using the SilverStripe Nocaptcha module.
The easiest way to install this module is through composer with the following command:
composer require undefinedoffset/silverstripe-nocaptcha
After installing the module be sure to call dev/build?flush=all.
Next we must set the spam protector to NocaptchaProtector through our site config.yml file, as well as set the Nocaptcha keys.
mysite/_config/config.yml
# ...
FormSpamProtectionExtension:
default_spam_protector: NocaptchaProtector
NocaptchaField:
site_key: "YOUR_SITE_KEY"
secret_key: "YOUR_SECRET_KEY"
The keys are retrieved through Google when setting up a new Nocaptcha account.
Make sure to call ?flush=all after adding these settings.
We are now ready to enable spam protection on our form. To do this we simply call $form->enableSpamProtection() in our form function:
public function ContactForm()
{
// Create fields
$fields = FieldList::create(
// ...
);
// Create actions
$actions = FieldList::create(
// ...
);
$validator = ZenValidator::create();
$form = Form::create($this, 'ContactForm', $fields, $actions, $validator);
$form->enableSpamProtection();
return $form;
}
Google Nocaptcha should now be enabled on our form.

Answer 2

Add
new LiteralField('recaptcha_bubble', '<div id="recaptcha_bubble" class="field"></div>')
in your forms field list
Then add the google javascript with
Requirements::javascript("https://www.google.com/recaptcha/api.js?onload=recaptchaCallback&render=explicit&hl=en-GB");
After that add the function to your javascript
var recaptchaCallback = function () {
var elementExists = document.getElementById('recaptcha_bubble');
if (null != elementExists) {
grecaptcha.render('recaptcha_bubble', {
'sitekey' : 'the site key here'
});
}};
When the form will be submitted with the variable 'g-recaptcha-response'
function getPostUrlContents($url, $fields){
$result = null;
$ch = curl_init();
$timeout = 30;
$fields_string = '';
foreach($fields as $key=>$value) {
$fields_string .= $key.'='.$value.'&';
}
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_POST, count($fields));
curl_setopt($ch, CURLOPT_POSTFIELDS, rtrim($fields_string, '&'));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
$result = curl_exec($ch);
curl_close($ch);
return $result;
}
public function checkGoogle_recaptcha_Response($code) {
$result = $this->getPostUrlContents(
'https://www.google.com/recaptcha/api/siteverify',
array(
'secret' => urlencode('secret key here'),
'response' => urlencode($code)
)
);
if (!$result) return false;
$gResult = json_decode($result, true);
if ($gResult['success']) {
return true;
}
return false;
}
public function yourForm(SS_HTTPRequest $request) {
$vars = $request->postVars();
if (!$this->checkGoogle_recaptcha_Response($vars['g-recaptcha-response'])) {
// throw error
} else {
//not a robot, do something with request
}
}