Merge pull request #1 from AlexStack/dev

Support Google Recaptcha v3

Author: AlexStack

README.md

@@ -1,16 +1,20 @@
-# Google Recaptcha to any form
+# Google Recaptcha v2 or v3 to any form
 [![Latest Stable Version](https://poser.pugx.org/alexstack/google-recaptcha-to-any-form/v/stable)](https://packagist.org/packages/alexstack/google-recaptcha-to-any-form)
 [![License](https://poser.pugx.org/alexstack/google-recaptcha-to-any-form/license)](https://packagist.org/packages/alexstack/google-recaptcha-to-any-form)
 [![Total Downloads](https://poser.pugx.org/alexstack/google-recaptcha-to-any-form/downloads)](https://packagist.org/packages/alexstack/google-recaptcha-to-any-form)
 
-- It can display a Google Recaptcha v2 in any custom form with flexible settings and no affection to your existing code. Also works well for SilverStripe 4.x/3.x/2.x & Larave & Wordpress & other CMS.
+- It can display a Google Recaptcha v2 or v3 in any custom form with flexible settings and no affection to your existing code. Also works well for SilverStripe 4.x/3.x/2.x & Larave & Wordpress & other CMS.
 
 # Basic example codes
 
-- Display Google Recaptcha after a Form_Field_ID:
+- Display Google Recaptcha v2 or v3 after a Form_Field_ID:
 
 ```php
+// For Google recaptcha v2
 GoogleRecaptcha::show('SiteKey', 'Form_Field_ID');
+
+// For Google recaptcha v3
+GoogleRecaptcha::showV3('SiteKey', 'Form_Field_ID');
 ```
 
 - Verify it in the backend php:
@@ -37,31 +41,46 @@ composer require alexstack/google-recaptcha-to-any-form
 
 ![How to display it on frontend page](https://developers.google.com/recaptcha/images/newCaptchaAnchor.gif "Google Recaptcha")
 
-- Set up your Google Recaptcha account for you website and get the site key and secret key
+- Set up your Google Recaptcha v2 or v3 account for you website and get the site key and secret key
 - Import the GoogleRecaptcha class:
 
 ```php
 use GoogleRecaptchaToAnyForm\GoogleRecaptcha;
 ```
 
-- Put below php code in your frontend template/page.
+- Put below php code in your frontend template/page for **Google Recaptcha v2**.
 
 ```php
-GoogleRecaptcha::show($GoogleRecaptchaSiteKey, 'Form_ContactForm_Message', 'no_debug', 'mt-4 mb-1', 'Please tick the reCAPTCHA checkbox first!');
+GoogleRecaptcha::show($SiteKey, 'Form_ContactForm_Message', 'no_debug', 'mt-4 mb-1', 'Please tick the reCAPTCHA checkbox first!');
 ```
+![google-recaptcha-v2-default](docs/images/google-recaptcha-v2-default.png "google-recaptcha-v2-default")
 
-- Description for above code:
-  - '\$GoogleRecaptchaSiteKey': The Google Recaptcha Site Key of your website. You can directly put site key here or a variable or from database.
-  - 'Form_ContactForm_Message': Form field id, via html code: ... `<input type="text" id="Form_ContactForm_Message" />` ... Your Google Recaptcha will display after this form field.
+### Explain for above code:
+  - '\$SiteKey': The Google Recaptcha Site Key of your website. You can directly put site key here or a variable or from database.
+  - 'Form_ContactForm_Message': Form_Field_ID, via html code. eg. ... `<input type="text" id="Form_ContactForm_Message" />` ... Your Google Recaptcha will display after this form field.
   - 'no_debug': Change to debug and not tick the I'm not a robot checkbox will continue submit the form, then you will see the failed message.
   - 'mt-4 mb-1': Extra css class name for the Google Recaptcha area.
-  - 'Please tick the reCAPTCHA checkbox first': Frontend alert message if the end user does not tick the checkbox.
+  - 'Please tick the reCAPTCHA checkbox first': Frontend alert message if the end user does not tick the checkbox. **Tips:** You can change this value to "v3", it will automatically switch to use Google Recaptcha v3
 - Default value of the parameters of the show() method
 
 ```php
 show($site_key,$after_field_id='Form_ContactForm_Comment', $debug='no_debug', $extra_class="mt-4 mb-4", $please_tick_msg="Please tick the I'm not robot checkbox");
 ```
 
+- Put below php code in your frontend template/page for **Google Recaptcha v3**
+```php
+GoogleRecaptcha::show($SiteKey, 'Form_Field_ID', 'no_debug','show-inline-badge mt-4 mb-3','v3');
+// or
+GoogleRecaptcha::showV3($SiteKey, 'Form_Field_ID', 'no_debug');
+```
+![google-recaptcha-v3-default](docs/images/google-recaptcha-v3-default.png "google-recaptcha-v3-default")
+
+- Our Google Recaptcha v3 will automatically get g-recaptcha-response value after the page load 10 seconds or the Form_Field_ID(eg. Form_ContactForm_Message) was clicked.
+- 'no_debug': Change to "debug" will always submit an empty g-recaptcha-response to the backend.
+- 'show-inline-badge mt-4 mb-3': Extra css class name for the Google Recaptcha inline-badge. Remove show-inline-badge will show a right bottom float Recaptcha badge instead inline-badge.
+![google-recaptcha-v3-inline](docs/images/google-recaptcha-v3-inline.png "google-recaptcha-v3-inline")
+
+
 - If you do not want to use the show() method, You can also use your own code to display the recaptcha for a custom style. Just make sure the form action method is POST, then you can still use below verify() method in your backend script.
 
 # <a name="backend"></a>How to verify it in the backend script
@@ -84,7 +103,13 @@ GoogleRecaptcha::verify($GoogleRecaptchaSecretKey, 'Google Recaptcha Validation
 - Default value of the parameters of the verify() method
 
 ```php
-verify($secret_key, $break_msg = null)
+verify($secret_key, $break_msg = null, $recaptcha_score=0.5)
+```
+
+- If you are using Google Recaptcha v3, it verify score < 0.5 as a failed result by default. You can set the score if you want a different value. eg.
+
+```php
+GoogleRecaptcha::verify($SecretKey, 'Google Recaptcha Validation Failed!!', 0.36);
 ```
 
 # <a name="silverstripe"></a>Usage example for SilverStripe 4.x/3.x
@@ -99,7 +124,7 @@ use GoogleRecaptchaToAnyForm\GoogleRecaptcha;
 
 ```php
 public function showGoogleRecaptcha()   {
-    return GoogleRecaptcha::show($GoogleRecaptchaSiteKey, 'Form_ContactForm_Message', 'no_debug', 'mt-4 mb-1', 'Please tick the reCAPTCHA checkbox first!');
+    return GoogleRecaptcha::show($SiteKey, 'Form_ContactForm_Message', 'no_debug', 'mt-4 mb-1', 'Please tick the reCAPTCHA checkbox first!');
 }
 ```
 

docs/images/google-recaptcha-v2-default.png

@@ -16,11 +16,11 @@ class GoogleRecaptcha
      * @param [string] $break_msg, if set, pop up as an javascript alert and exit
      * @return true or false
      */
-    public static function verify($secret_key, $break_msg = null)
+    public static function verify($secret_key, $break_msg = null, $recaptcha_score = 0.5)
     {
         $valid = false;
         if (isset($_POST['g-recaptcha-response']) && strlen($_POST['g-recaptcha-response']) > 20) {
-            $valid = Self::result($secret_key, $_POST['g-recaptcha-response']);
+            $valid = Self::result($secret_key, $_POST['g-recaptcha-response'], $recaptcha_score);
         }
 
         if (!$valid && $break_msg) {
@@ -40,7 +40,7 @@ public static function verify($secret_key, $break_msg = null)
      * @param [type] $g_recaptcha_response
      * @return void
      */
-    public static function result($secret_key, $g_recaptcha_response)
+    public static function result($secret_key, $g_recaptcha_response, $recaptcha_score=0.5)
     {
         $google_recaptcha_uri = 'https://www.google.com/recaptcha/api/siteverify';
 
@@ -69,8 +69,11 @@ public static function result($secret_key, $g_recaptcha_response)
 
         $response = json_decode($rs);
 
+        //var_dump($response); exit();// un-comment for debug
+
         if (!$response || $response->success == false) {
-            //var_dump($response); // un-comment for debug
+            return false;
+        } else if ( isset($response->score) && $response->score < $recaptcha_score ) {
             return false;
         } else {
             return true;
@@ -89,9 +92,12 @@ public static function result($secret_key, $g_recaptcha_response)
      */
     public static function show($site_key, $after_field_id = 'Form_ContactForm_Comment', $debug = 'no_debug', $extra_class = "mt-4 mb-4", $please_tick_msg = "Please tick the I'm not robot checkbox")
     {
+        if ( $please_tick_msg == 'v3'){
+            return Self::showV3($site_key, $after_field_id, $debug, $extra_class);
+        }
         $debug_alert = ($debug == 'no_debug') ? 'false' : 'true';
         $str = <<<EOF
-        <!-- Start of the Google Recaptcha code -->
+        <!-- Start of the Google Recaptcha v2 code -->
  
         <script src='https://www.google.com/recaptcha/api.js'></script>
         <script>
@@ -135,6 +141,79 @@ function alexFindClosestNode(el, selector) {
     }
 
 
+    /**
+     * show recaptcha v3 function without jQuery
+     *
+     * @param string $site_key
+     * @param string $after_field_id
+     * @param string $debug
+     * @param string $extra_class
+     * @param string $please_tick_msg
+     * @return void
+     */
+    public static function showV3($site_key, $after_field_id = 'Form_ContactForm_Comment', $debug = 'no_debug', $extra_class = "mt-4 mb-4")
+    {
+        $debug_mode = ($debug == 'no_debug') ? '' : 'return false; // debug mode is on ';
+
+        if ( strpos($extra_class, 'show-inline-badge') !== false ){
+            $api_js = "https://www.google.com/recaptcha/api.js?render=explicit&onload=alexGetRecaptchaValue";
+            $recaptcha_client = "var recaptchaClient = grecaptcha.render('CustomContactUsForm-inline-badge', {
+                'sitekey': '$site_key',
+                'badge': 'inline',
+                'size': 'invisible'
+            });";
+        } else {
+            $api_js = "https://www.google.com/recaptcha/api.js?render=$site_key&onload=alexRecaptchaReadyCallback";
+            $recaptcha_client = "var recaptchaClient =  '$site_key';";
+        }
+        $str = <<<EOF
+        <!-- Start of the Google Recaptcha v3 code -->
+ 
+        <script src="$api_js"></script>
+
+
+        <script>
+ 
+            // Display google recaptcha v3
+            var alexEL = document.getElementById('$after_field_id');
+            alexEL.parentNode.insertAdjacentHTML('afterend', '<div id="CustomContactUsForm-inline-badge" class="inline-badge-div $extra_class"></div><input type="hidden" id="CustomContactUsForm-recaptcha" name="g-recaptcha-response">');
+
+            function alexGetRecaptchaValue(id) {
+                $debug_mode
+                if ( typeof(id)=='undefined' )  {
+                    id = 'CustomContactUsForm-recaptcha';
+                }
+                if ( document.getElementById(id).value == '' ) {
+
+                    $recaptcha_client
+
+                    grecaptcha.ready(function() {
+                        grecaptcha.execute(recaptchaClient, {
+                            action: 'CustomContactUsForm'
+                        }).then(function (token) {
+                            document.getElementById(id).value = token;
+                        });
+                    });
+                }
+
+            }
+
+            setTimeout('alexGetRecaptchaValue("CustomContactUsForm-recaptcha")', 10000);
+ 
+            function alexRecaptchaReadyCallback() {
+                alexEL.addEventListener('click',function(e){
+                    alexGetRecaptchaValue("CustomContactUsForm-recaptcha");
+                });
+            }  
+
+        </script>
+
+        <!-- End of the Google Recaptcha code -->
+EOF;
+        return $str;
+    }
+
+
     /**
      * jqueryShow function
      *