Checking Google ReCaptcha for success on backend - php

Question

I have a contact form that is performing validation on the back end, what I want to check for is if the user has successfully completed the captcha or not and if not print an error message.
Currently, I am getting an error message:
Notice: Undefined index: g-recaptcha-response in /var/www/html/mangoForm.php on line 99
So it isn't printing the error message that is in the JSON:
{"success":false,"errors":{"captcha":"ReCaptcha is required."}}
Line 99:
$captcha = checkCaptcha($formData['g-recaptcha-response']);
Code Block in Question:
if (!empty($validationMSG)) {
return $validationMSG;
}
else {
$captcha = checkCaptcha($formData['g-recaptcha-response']);
if(!$captcha['isSuccess']){
$validationMSG['captcha'] = 'ReCaptcha is required.';
return $validationMSG;
}
//End of Validation Function
}
}
Full Code:
<?php
//show errors - enable this
//ini_set('display_errors', 1);
//ini_set('display_startup_errors', 1);
//error_reporting(E_ALL);
//Var Dump (Debugging)
//var_dump($_POST);
//Load Required Components
require_once 'src/recaptcha_autoload.php';
require_once "functions.php";
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
require 'src/Exception.php';
require 'src/PHPMailer.php';
require 'src/SMTP.php';
function validate($formData)
{
// Initiate Array
$validationMSG = array(); // array to hold validation errors
$pname_exp = '/^[a-zA-Z0-9\_]{2,20}/';
if (!isset($formData['firstName'])) {
$validationMSG['firstName'] = 'First Name is required.';
}elseif (!preg_match($pname_exp, $formData['firstName'])){
$validationMSG['firstName'] = 'First Name is not valid.';
}
// Validate lastName
if (!isset($formData['lastName'])) {
$validationMSG['lastName'] = 'Last Name is required.';
}
// Check RegEx for Last Name
elseif (!preg_match($pname_exp, $formData['lastName'])) {
$validationMSG['lastName'] = 'Last Name is not valid.';
}
// Validate companyName
if (!isset($formData['companyName'])) {
$validationMSG['companyName'] = 'Company Name is required.';
}
// Validate companyAddress
if (!isset($formData['companyAddress'])) {
$validationMSG['companyAddress'] = 'Company Address is required.';
}
// Validate state
if (!isset($formData['state'])) {
$validationMSG['state'] = 'State is required.';
}
// Validate city
if (!isset($formData['city'])) {
$validationMSG['city'] = 'City is required.';
}
// Validate Zipcode - If Field is Empty
if (!isset($formData['zipcode'])) {
$validationMSG['zipcode'] = 'Zipcode is required.';
}
// Validate emailAddress
if (!isset($formData['emailAddress'])) {
$validationMSG['emailAddress'] = 'Email Address is required.';
}
// Check if emailAddress is a valid email address
elseif (!filter_var($formData['emailAddress'], FILTER_VALIDATE_EMAIL)) {
$validationMSG['emailAddress'] = 'Email address is not valid.';
}
//Validate phoneNumber
if (!isset($formData['phoneNumber'])) {
$validationMSG['phoneNumber'] = 'Phone Number is required.';
}
//Validate phoneNumber
elseif (preg_match("/^[0-9]{3}-[0-9]{4}-[0-9]{4}$/", $formData['phoneNumber'])) {
$validationMSG['phoneNumber'] = 'Must be a valid phone number.';
}
var_dump($formData);
// Validate message
if (!isset($formData['message'])) {
$validationMSG['message'] = 'Message is required.';
}
if (!empty($validationMSG)) {
return $validationMSG;
}
else {
$captcha = checkCaptcha($formData['g-recaptcha-response']);
if(!$captcha['isSuccess']){
$validationMSG['captcha'] = 'ReCaptcha is required.';
return $validationMSG;
}
//End of Validation Function
}
}
function checkCaptcha($g_recaptcha_response)
{
$recaptcha_secret_key = 'REDACTED';
$recaptcha = new \ReCaptcha\ReCaptcha($recaptcha_secret_key);
$resp = $recaptcha->verify($g_recaptcha_response, $_SERVER['REMOTE_ADDR']);
return [
'isSuccess' => $resp->isSuccess(),
'errorCodes' => $resp->getErrorCodes(),
];
}
function sendMail($formData)
{
$mail = new PHPMailer(true); // Passing `true` enables exceptions
// Server settings
//$mail->SMTPDebug = 2; // Enable verbose debug output
$mail->isSMTP(); // Set mailer to use SMTP
$mail->Host = 'smtp.server.com'; // Specify main and backup SMTP servers
$mail->SMTPAuth = true; // Enable SMTP authentication
$mail->Username = 'user#server.com'; // SMTP username
$mail->Password = 'REDACTED'; // SMTP password
$mail->SMTPSecure = 'ssl'; // Enable TLS encryption, `ssl` also accepted
$mail->Port = 465; // TCP port to connect to
// Recipients
$mail->setFrom('user#server.com', 'Mailer');
$mail->addAddress('user#server.com', 'Joe User'); // Add a recipient
// Content
$mail->isHTML(true); // Set email format to HTML
$mail->Subject = 'New Message from Contact Form';
// prepare email body
$body_message = "";
$body_message.= "Sender IP: " . get_client_ip() . "<br />";
// #todo: make the other rows the same way, i.e. $formData['key'];
$body_message.= "First Name: " . $formData['firstName'] . "<br />";
$body_message.= "Last Name: " . $formData['lastName'] . "<br />";
$body_message.= "Company Name: " . $formData['companyName'] . "<br />";
$body_message.= "Company Address: " . $formData['companyAddress'] . "<br />";
$body_message.= "City: " . $formData['city'] . "<br />";
$body_message.= "State: " . $formData['state'] . "<br />";
$body_message.= "Sender email: " . $formData['emailAddress'] . "<br />";
$body_message.= "Sender Phone: " . $formData['phoneNumber'] . "<br />";
$body_message.= "\n\n" . $formData['message'];
$mail->Body = $body_message;
$mail->send();
}
/////////////////////////////////////////////////
// process
//this will be our whole response (jsoned later)
$response = [
//we'll change these later, possibly:
'success' => false,
'errors' => [],
// 'message' => 'There has been an issue sending your message!!!!',//could be an "OK" error message as well, depends on the 'success' key.
];
// Copy $_POST to $formData
//$formData = $_POST;
//$formData = json_decode($_POST, true);
$formData = json_decode(file_get_contents("php://input"), true);
//validate
$errors = validate($formData);
if(!empty($errors)){
$response['success'] = false;
$response['errors'] = $errors;
}else {//it's ok
//send it
try{
sendMail($formData);
//Print Success Message
$response['success'] = true;
$response['message'] = 'Message was Sent!';
}
catch(Exception $e) {
// Print phpMailer Error Message
$response['success'] = false;
$response['message'] = 'There has been an issue sending your message';
}
}
echo json_encode($response);
exit;
How I can achieve where the PHP script checks for a successful response from Google ReCaptcha and either permits the script to go on further in the event of a success or print an error message?
EDITED JS:
document.querySelector("#form").addEventListener("submit", function(e){
//create variable for contact form url
var formURL = 'mangoForm.php';
//prevent default submission
event.preventDefault();
//define form fields
var mangoForm = {
'firstName' : document.querySelector('input[name=firstName]').value,
'lastName' : document.querySelector('input[name=lastName]').value,
'companyName' : document.querySelector('input[name=companyName]').value,
'companyAddress' : document.querySelector('input[name=companyAddress]').value,
'city' : document.querySelector('input[name=city]').value,
'state' : document.querySelector('select[name=state]').value,
'zipcode' : document.querySelector('input[name=zipcode]').value,
'emailAddress' : document.querySelector('input[name=emailAddress]').value,
'phoneNumber' : document.querySelector('input[name=phoneNumber]').value,
'message' : document.querySelector('input[name=message]').value,
}
//define request variable
var formRequest = new Request(formURL, {
method: 'POST',
body: JSON.stringify(mangoForm),
headers: {
"content-type":"application/json; charset=utf-8"
}
});
//fetch
fetch(formRequest)
//console.log(formRequest)
.then(function(formResponse) {
return formResponse.json();
})
.then(function(data) {
//handle server responses
if ( ! data.success) {
//handle error messages
//handle error message for firstName
//console.log(data);
if (data.errors.firstName && !document.querySelector('#firstName-group .help-block')) {
document.getElementById("firstName-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.firstName;
document.getElementById("firstName-group").append(helpBlock);
}
//handle errors for lastName
if (data.errors.lastName && !document.querySelector('#lastName-group .help-block')) {
document.getElementById("lastName-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.lastName;
document.getElementById("lastName-group").appendChild(helpBlock);
}
//handle errors for companyName
if (data.errors.companyName && !document.querySelector('#companyName-group .help-block')) {
document.getElementById("companyName-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.companyName;
document.getElementById("companyName-group").appendChild(helpBlock);
}
//handle errors for companyAddress
if (data.errors.companyAddress && !document.querySelector('#companyAddress-group .help-block')) {
document.getElementById("companyAddress-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.companyAddress;
document.getElementById("companyAddress-group").appendChild(helpBlock);
}
//handle errors for city
if (data.errors.city && !document.querySelector('#city-group .help-block')) {
document.getElementById("city-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.city;
document.getElementById("city-group").appendChild(helpBlock);
}
//handle errors for state
if (data.errors.state && !document.querySelector('#state-group .help-block')) {
document.getElementById("state-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.state;
document.getElementById("state-group").appendChild(helpBlock);
}
//handle errors for zipcode
if (data.errors.zipcode && !document.querySelector('#zipcode-group .help-block')) {
document.getElementById("zipcode-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.zipcode;
document.getElementById("zipcode-group").appendChild(helpBlock);
}
//handle errors for emailAddress
if (data.errors.emailAddress && !document.querySelector('#emailAddress-group .help-block')) {
document.getElementById("emailAddress-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.emailAddress;
document.getElementById("emailAddress-group").appendChild(helpBlock);
}
//handle errors for phoneNumber
if (data.errors.phoneNumber && !document.querySelector('#phoneNumber-group .help-block')) {
document.getElementById("phoneNumber-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.phoneNumber;
document.getElementById("phoneNumber-group").appendChild(helpBlock);
}
//handle errors for message
if (data.errors.message && !document.querySelector('#message-group .help-block')) {
document.getElementById("message-group").classList.add("has-error");
let helpBlock = document.createElement('div');
helpBlock.classList.add('help-block');
helpBlock.innerHTML = data.errors.message;
document.getElementById("message-group").appendChild(helpBlock);
}
// handle errors for captcha ---------------
if (data.errors.captcha) {
swal({
title: "Error!",
text: data.errors.captcha,
icon: "error",
});
}
// handle errors for phpmailer ---------------
if (data.message) {
swal({
title: "Error!",
text: data.message,
icon: "error",
});
}
if (data.success) {
swal({
title: "Success!",
text: data.message,
icon: "success",
});
//document.getElementById("form").reset();
}
}
});
})

Answer 1

As mentioned by #marv255 there actually is no captcha data in your request apparently.
So try adding this:
'g-recaptcha-response' : grecaptcha.getResponse()
Just below
'message' : document.query ...
In your js file.