web-dev-qa-db-fra.com

Aide à la vérification de google recaptcha dans un formulaire personnalisé

J'essaie d'ajouter un recaptcha à mon champ personnalisé. J'ai créé un formulaire personnalisé dans un modèle de page et cette partie de mon code est pertinente (ne vous inquiétez pas, la clé API est l'API de démonstration publique de MerchantOne, elle n'est donc pas personnelle):

// API Setup parameters
$gatewayURL = 'https://secure.merchantonegateway.com/api/v2/three-step';
$APIKey = '2F822Rw39fx762MaV7Yy86jXGTC7sCDy';


// If there is no POST data or a token-id, print the initial shopping cart form to get ready for Step One.
if (empty($_POST['DO_STEP_1']) && empty($_GET['token-id'])) {

    print '  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
    print '
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Hansen Hunter Collect non-sensitive Customer Info</title>
      </head>
      <body>
      <p>We are pleased to offer the option for you to securely pay your Hansen Hunter & Co. invoice online.</p>
      <h2 class="pad">Invoice Details</h2>


        <form action="" method="post">
          <table>
          <tr><td><input type="text" name="shipping-address-first-name" placeholder="First Name" required></td></tr>
          <tr><td><input type="text" name="shipping-address-last-name" placeholder="Last Name" required></td></tr>
          <tr><td><input type="text" name="shipping-address-company" placeholder="Company" required></td></tr>
          <tr><td><input type="text" name="billing-address-phone" placeholder="Phone Number" required></td></tr>
          <tr><td><input type="text" name="billing-address-email" placeholder="Email Address" required></td></tr>
          <tr><td><input type="text" name="billing-invoice" placeholder="Invoice or Customer Number"></td></tr>
          <tr><td><input type="text" name="billing-amount" placeholder="Total Amount" required></td></tr>

          <tr><td><h4><br />Payment Information</h4></td></tr>

          <tr><td><input type="text" name="billing-address-first-name" placeholder="Cardholder First Name" required></td></tr>
          <tr><td><input type="text" name="billing-address-last-name" placeholder="Cardholder Last Name" required></td></tr>
          <tr><td><input type="text" name="billing-address-address1" placeholder="Address" required></td></tr>
          <tr><td><input type="text" name="billing-address-address2" placeholder="Address 2"></td></tr>
          <tr><td><input type="text" name="billing-address-city" placeholder="City" required></td></tr>
          <tr><td><input type="text" name="billing-address-state" placeholder="State" required></td></tr>
          <tr><td><input type="text" name="billing-address-Zip" placeholder="Zip/Postal Code" required></td></tr>
          <tr><td><input type="text" name="billing-address-country" placeholder="Country" value="US" required></td></tr>
       <tr><td><div class="g-recaptcha" data-sitekey="6Lc2MiUTAAAAAGJeGAlku50gFi7hFKvIitP_-3e0"></div></td></tr>
          <tr><td><input type="submit" class="btn pad" value="Continue"><input type="hidden" name ="DO_STEP_1" value="true"></td></tr>
          </table>
        </form>

    ';
}else if (!empty($_POST['DO_STEP_1'])) {

    // Initiate Step One: Now that we've collected the non-sensitive payment information, we can combine other order information and build the XML format.

J'ai ajouté ce code à mon functions.php pour ajouter l'api de Google:

add_action('wp_head','hook_recaptca');

function hook_recaptca() {

    $output="<script src='https://www.google.com/recaptcha/api.js'></script>";

    echo $output;
}

Cela permet à mon recaptcha de se présenter. Le problème est que ce n'est pas encore vérifié.

Je sais que j'ai ces 2 morceaux de code à ajouter quand même:

/**
 * Send a GET request to verify CAPTCHA challenge
 *
 * @return bool
 */
function captcha_verification() {

    $response = isset( $_POST['g-recaptcha-response'] ) ? esc_attr( $_POST['g-recaptcha-response'] ) : '';

    $remote_ip = $_SERVER["REMOTE_ADDR"];

    // make a GET request to the Google reCAPTCHA Server
    $request = wp_remote_get(
        'https://www.google.com/recaptcha/api/siteverify?secret=your_secret&response=' . $response . '&remoteip=' . $remote_ip
    );

    // get the request response body
    $response_body = wp_remote_retrieve_body( $request );

    $result = json_decode( $response_body, true );

    return $result['success'];
}

et

/**
 * Verify the CAPTCHA answer
 *
 * @param $user string login username
 * @param $password string login password
 *
 * @return WP_Error|WP_user
 */
function validate_captcha( $user, $password ) {

    if ( isset( $_POST['g-recaptcha-response'] ) && !captcha_verification() ) {
        return new WP_Error( 'empty_captcha', '<strong>ERROR</strong>: Please retry CAPTCHA' );
    }

    return $user;
}

mais je ne suis pas sûr de savoir comment les attacher (quel crochet utiliser?) dans mon formulaire afin qu'un utilisateur soit arrêté s'il ne remplit pas la case à cocher. Je vois des tutoriels et des questions sur l'ajout au formulaire de connexion ou au formulaire d'inscription ou aux commentaires, mais je ne parviens pas à comprendre comment le faire sur mon formulaire personnalisé.

Au cas où cela serait utile, voici le php complet fourni par le marchand pour leur intégration:

http://Pastebin.com/mR5jf5B3

formscaptcha
1
rudtek

Vous devez valider le reCAPTCHA immédiatement une fois que vous POST le formulaire. Vous envoyez simplement un POST à la même page, vous devez donc le faire avant toute autre manipulation.

S'il ne se valide pas, vous devez afficher à nouveau le formulaire avec un message d'erreur.

function recaptcha_validated(){
    if( empty( $_POST['g-recaptcha-response'] ) ) return FALSE;
    $response = wp_remote_get( add_query_arg( array(
                                              'secret'   => 'your_secret',
                                              'response' => isset($_POST['g-recaptcha-response']) ? $_POST['g-recaptcha-response'] : '',
                                              'remoteip' => isset($_SERVER['HTTP_X_FORWARDED_FOR']) ? $_SERVER['HTTP_X_FORWARDED_FOR'] : $_SERVER['REMOTE_ADDR']
                                          ), 'https://www.google.com/recaptcha/api/siteverify' ) );

    if( is_wp_error( $response ) || empty($response['body']) || ! ($json = json_decode( $response['body'] )) || ! $json->success ) {
        //return new WP_Error( 'validation-error',  __('reCAPTCHA validation failed. Please try again.' ) );
        return FALSE;
    }

    return TRUE;
}

// reCAPTCHA data was POSTed, let's validate it!
if( ! empty( $_POST['DO_STEP_1'] ) ){

    if( recaptcha_validated() === FALSE ){
        $recaptcha_error = TRUE;
        print '<div class="error message">' . __('reCAPTCHA failed, please try again.') . '</div>';
    }

}

// Because we want to show the form again if there was an error, we first check if error var is set OR if DO_STEP_1 and token-id are empty
if ( isset( $recaptcha_error ) || ( empty($_POST['DO_STEP_1']) && empty($_GET['token-id']) ) ) {
     print '<p>We are pleased to offer the option for you to securely pay your Hansen Hunter & Co. invoice online.</p>
      <h2 class="pad">Invoice Details</h2>    
        <form method="post">
          <table>
          <tr><td><input type="text" name="shipping-address-first-name" placeholder="First Name" required></td></tr>
          <tr><td><input type="text" name="shipping-address-last-name" placeholder="Last Name" required></td></tr>
          <tr><td><input type="text" name="shipping-address-company" placeholder="Company" required></td></tr>
          <tr><td><input type="text" name="billing-address-phone" placeholder="Phone Number" required></td></tr>
          <tr><td><input type="text" name="billing-address-email" placeholder="Email Address" required></td></tr>
          <tr><td><input type="text" name="billing-invoice" placeholder="Invoice or Customer Number"></td></tr>
          <tr><td><input type="text" name="billing-amount" placeholder="Total Amount" required></td></tr>

          <tr><td><h4><br />Payment Information</h4></td></tr>

          <tr><td><input type="text" name="billing-address-first-name" placeholder="Cardholder First Name" required></td></tr>
          <tr><td><input type="text" name="billing-address-last-name" placeholder="Cardholder Last Name" required></td></tr>
          <tr><td><input type="text" name="billing-address-address1" placeholder="Address" required></td></tr>
          <tr><td><input type="text" name="billing-address-address2" placeholder="Address 2"></td></tr>
          <tr><td><input type="text" name="billing-address-city" placeholder="City" required></td></tr>
          <tr><td><input type="text" name="billing-address-state" placeholder="State" required></td></tr>
          <tr><td><input type="text" name="billing-address-Zip" placeholder="Zip/Postal Code" required></td></tr>
          <tr><td><input type="text" name="billing-address-country" placeholder="Country" value="US" required></td></tr>
       <tr><td><div class="g-recaptcha" data-sitekey="6Lc2MiUTAAAAAGJeGAlku50gFi7hFKvIitP_-3e0"></div></td></tr>
          <tr><td><input type="submit" class="btn pad" value="Continue"><input type="hidden" name="DO_STEP_1" value="true"></td></tr>
          </table>
        </form>

    ';
}

Y a-t-il une raison pour laquelle vous n'utilisez pas de plugin comme Caldera Forms au lieu d'un code entièrement personnalisé? Le plugin gérerait la majorité de ces choses pour vous, y compris la sortie HTML de champ, la sortie/validation reCAPTCHA, et vous fournirait quand même des actions/hooks pouvant être appelés lors de la soumission du formulaire pour vous permettre de gérer du code personnalisé:

https://wordpress.org/plugins/caldera-forms/

https://calderawp.com/downloads/caldera-forms-run-action/

https://wordpress.org/plugins/caldera-forms-run-action/

1
sMyles