Trying to add recaptcha v2 to oscommerce contact us page

Question

I am using oscommerce and attempting to add googles repcatcha V2 to the contact us page. The form currently allows the user to enter the name, email address and enquiry input. Once they user has entered this, the google recaptcha widget is next to the continue button. I am struggling on catching the response before the user can click continue. Currently the user can click continue and the widget is ignored.

I have tried adding the following code to my current oscommerce contact us page:

 // Validate reCAPTCHA box 
    if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){ 
        // Google reCAPTCHA API secret key 
        $secretKey = 'mysecretkey'; 

        // Verify the reCAPTCHA response 
        $verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secretKey.'&response='.$_POST['g-recaptcha-response']); 

        // Decode json data 
        $responseData = json_decode($verifyResponse); 

        if($responseData->success){ 
        }

  }

I am not sure where the best place is to put the responsedata->success if statement within the current oscommerce code as well as making sure the $responsedata is actually being set. I am using sublime text and new to this.

/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2010 osCommerce

  Released under the GNU General Public License
*/

  require('includes/application_top.php');

  require(DIR_WS_LANGUAGES . $language . '/' . FILENAME_CONTACT_US);

  if (isset($HTTP_GET_VARS['action']) && ($HTTP_GET_VARS['action'] == 'send') && isset($HTTP_POST_VARS['formid']) && ($HTTP_POST_VARS['formid'] == $sessiontoken)) {
    $error = false;


    $name = tep_db_prepare_input($HTTP_POST_VARS['name']);
    $email_address = tep_db_prepare_input($HTTP_POST_VARS['email']);
    $enquiry = tep_db_prepare_input($HTTP_POST_VARS['enquiry']);

    if (!tep_validate_email($email_address)) {
      $error = true;

      $messageStack->add('contact', ENTRY_EMAIL_ADDRESS_CHECK_ERROR);
    }

    $actionRecorder = new actionRecorder('ar_contact_us', (tep_session_is_registered('customer_id') ? $customer_id : null), $name);
    if (!$actionRecorder->canPerform()) {
      $error = true;

      $actionRecorder->record(false);

      $messageStack->add('contact', sprintf(ERROR_ACTION_RECORDER, (defined('MODULE_ACTION_RECORDER_CONTACT_US_EMAIL_MINUTES') ? (int)MODULE_ACTION_RECORDER_CONTACT_US_EMAIL_MINUTES : 15)));
    }

    if ($error == false) {
      tep_mail(STORE_OWNER, STORE_OWNER_EMAIL_ADDRESS, EMAIL_SUBJECT, $enquiry, $name, $email_address);

      $actionRecorder->record();

      tep_redirect(tep_href_link(FILENAME_CONTACT_US, 'action=success'));
    }
  }

  $breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_CONTACT_US));

  require(DIR_WS_INCLUDES . 'template_top.php');
?>

<h1><?php echo HEADING_TITLE; ?></h1>

<?php
  if ($messageStack->size('contact') > 0) {
    echo $messageStack->output('contact');
  }

  if (isset($HTTP_GET_VARS['action']) && ($HTTP_GET_VARS['action'] == 'success')) {
?>

<div class="contentContainer">
  <div class="contentText">
    <?php echo TEXT_SUCCESS; ?>
  </div>

  <div style="float: right;">

    <?php echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'triangle-1-e', tep_href_link(FILENAME_DEFAULT)); ?>

  </div>
</div>

<?php
  } else {
?>

<?php echo tep_draw_form('contact_us', tep_href_link(FILENAME_CONTACT_US, 'action=send'), 'post', '', true); ?>

<div class="contentContainer">
  <div class="contentText">
    <table border="0" width="100%" cellspacing="0" cellpadding="2">
      <tr>
        <td class="fieldKey"><?php echo ENTRY_NAME; ?></td>
        <td class="fieldValue"><?php echo tep_draw_input_field('name'); ?></td>
      </tr>
      <tr>
        <td class="fieldKey"><?php echo ENTRY_EMAIL; ?></td>
        <td class="fieldValue"><?php echo tep_draw_input_field('email'); ?></td>
      </tr>
      <tr>
        <td class="fieldKey" valign="top"><?php echo ENTRY_ENQUIRY; ?></td>
        <td class="fieldValue"><?php echo tep_draw_textarea_field('enquiry', 'soft', 50, 15); ?></td>
      </tr>
            <tr>
        <td></td>
        <td>
              <div class="g-recaptcha" data-sitekey="6Lf1EaIUAAAAAHCvCvzM4qpHdxPgCB7fznN0B4ZR"></div>

        </td>
      </tr>
    </table>
  </div>

  <div class="buttonSet">
    <span class="buttonAction"><?php echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'triangle-1-e', null, 'primary'); ?></span>
  </div>
</div>

</form>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<?php
  }

  require(DIR_WS_INCLUDES . 'template_bottom.php');
  require(DIR_WS_INCLUDES . 'application_bottom.php');
?>


Expected outcome is for the user to HAVE to click on google repcaptcha and have a success response before the user can select the continue button on the form

Answer 1

we also use recaptcha in our oscommerce templates.

1. before your submit button <span class="buttonAction"><?php echo tep_draw_button(IMAGE_BUTTON_CONTINUE, 'triangle-1-e', null, 'primary'); ?></span>

include this file <?php require_once 'ext/recaptcha/recaptcha.php' ?>

2. contents of ext/recaptcha/recaptcha.php:

     <?php
     /**
      * Created by PhpStorm.
      * User: 'Serhii.M'
      * Date: 25.02.2019
      * Time: 15:21
      */
   
     if ($_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest') {
         $rootPath = dirname(dirname(dirname($_SERVER['SCRIPT_FILENAME'])));
         chdir('../../');
         require($rootPath.'/includes/application_top.php');
     }
   
   
   
   
     if (GOOGLE_RECAPTCHA_STATUS === 'true'){
   
     if (isset($_POST['action']) && $_POST['action'] === 'checkResponseToken'){
         $token = $_POST['token'];
         $data = array(
             'secret' => GOOGLE_RECAPTCHA_SECRET_KEY,
             'response' => $token
         );
   
         $verify = curl_init();
         curl_setopt($verify, CURLOPT_URL, "https://www.google.com/recaptcha/api/siteverify");
         curl_setopt($verify, CURLOPT_POST, true);
         curl_setopt($verify, CURLOPT_POSTFIELDS, http_build_query($data));
         curl_setopt($verify, CURLOPT_SSL_VERIFYPEER, false);
         curl_setopt($verify, CURLOPT_RETURNTRANSFER, true);
         $response = json_decode(curl_exec($verify));
         $_SESSION['recaptcha'] = $response->success;
         die(json_encode(1));
     }else{?>
         <script src="https://www.google.com/recaptcha/api.js"></script>
         <script>
             function reCaptchaCallback(callback){
                 $.ajax({
                     url:'./ext/recaptcha/recaptcha.php',
                     dataType:'json',
                     method:'post',
                     data:{'action':'checkResponseToken','token':callback}
                 }).done(function(response){
                 })
             }
         </script>
         <div class="g-recaptcha" data-sitekey="<?=GOOGLE_RECAPTCHA_PUBLIC_KEY?>" data-callback="reCaptchaCallback"></div>
     <?}?>
   
     <?}?>
   

where GOOGLE_RECAPTCHA_SECRET_KEY and GOOGLE_RECAPTCHA_PUBLIC_KEY - your keys from google recaptcha cabinet.

3. before $name = tep_db_prepare_input($HTTP_POST_VARS['name']); add this code:

       if ($_SESSION['recaptcha'] !== true) {
   
           $messageStack->add('contact', 'reCaptcha error');
           die;
       }
   

4. before $breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_CONTACT_US)); add this code:

     unset($_SESSION['recaptcha']);