Merge pull request #2 from RyanDaDeng/display-style

Display style

Author: RyanDaDeng

README.md

@@ -13,25 +13,26 @@
 
 # Importance
 
-If you have any issues or questions on using the package, please use issue tracker to create ticket.
 
-In the future release, I am planning to add the following features:
+If you have any issues or questions on using the package, please use issue tracker to create ticket.
 
-- Tests will be covered in future release.
-- Request client driver will be configurable.
-- Field name will be supported in config file
-- Combine reCAPTCHA v3 with v2, if v3 fails then pop-up v2 challenge to do second verification.
-- Support VueJS component
 
 ## Description
 
 Google reCAPTCHA v3 is a new mechanism to verify whether the user is bot or not.
 
+reCAPTCHA v3 is intended for power users, site owners that want more data about their traffic, and for use cases in which it is not appropriate to show a challenge to the user.
+
+For example, a registration page might still use reCAPTCHA v2 for a higher-friction challenge, whereas more common actions like sign-in, searches, comments, or voting might use reCAPTCHA v3.
+
+Please check Google site: https://developers.google.com/recaptcha/docs/faq
+
 ## Features
 
 - Score Comparision
 - Support custom implementation on config interface
 - Support custom implementation on request method interface 
+- Support invisible, global and inline badge style
 
 ## Requirement
 
@@ -51,7 +52,7 @@ This package requires the following dependencies:
 Via Composer
 
 ``` sh
-        $ composer require timehunter/laravel-google-recaptcha-v3 "^1.1.2"
+        $ composer require timehunter/laravel-google-recaptcha-v3 "~1.2.0"
 ```
 
 If your Laravel framework version <= 5.4, please register the service provider in your config file: /config/app.php, otherwise please skip it.
@@ -100,40 +101,90 @@ Note: if you want to enable Score Comparision, you also need to enable is_score_
 'is_score_enabled' = true
 ```   
 
+For score comparision, all actions should be registered in googlerecaptchav3 config file under 'setting' section. 
+
 For more details please check comments in config file.
 
 #### Display reCAPTCHA v3
 
-Include Google API in header
+##### Blade
+Include div with an ID inside your form, e.g.
 
 ``` html  
-{!!  GoogleReCaptchaV3::requireJs() !!}
+ <div id="contact_us_id"></div>
 ```
 
-Include input field
+Include Template script in your bottom/header of your page, params should follow 'ID'=>'Action', e.g.
 
 ``` PHP  
- {!!  GoogleReCaptchaV3::render($actionName, $fieldName) !!} // $actionName is your google action, $fieldName is optional for input field name
+ {!!  GoogleReCaptchaV3::render(
+            [
+                'contact_us_id'=>'contact_us',  // the div id=contact_us_id maps to action name contact_us
+                'signin_id'=>'registration',  // the div id=signin_id maps to action name registration
+                'register_id'=>'registration'   // the div id=register_id maps to action name registration
+            ]) !!}
 ```
 
-Example Usage
+##### Example Usage
 
 ``` html  
-{!!  GoogleReCaptchaV3::requireJs() !!}
-
 <form method="POST" action="/verify">
     @csrf
-    {!!  GoogleReCaptchaV3::render('contact_us') !!}
-
+    <div id="contact_us_id"></div>
     <input type="submit" value="submit">
+    <div>
+        <small>
+            This site is protected by reCAPTCHA and the Google
+            <a href="https://policies.google.com/privacy">Privacy Policy</a> and
+            <a href="https://policies.google.com/terms">Terms of Service</a> apply.
+        </small>
+    </div>
 </form>
 
+{!!  GoogleReCaptchaV3::render([
+               'contact_us_id'=>'contact_us'
+           ]) !!}
+
 ```
 
-Note: For score comparision, all actions should be registered in googlerecaptchav3 config file under 'setting' section. 
+##### Badge Display
+
+Inline
+
+1. Go to config file, and set 
+``` PHP
+    [
+        ...
+        'inline' => true
+        ...
+    ]
+```
+2. Badge will be displayed as inline format within the form.
+
+
+Invisible
+
+1. Set inline as true as well
+2. Modify your div with style display:none
+3. Refer to Google official site: https://developers.google.com/recaptcha/docs/faq
+, you need to include the following text:
+ ``` HTML
+    This site is protected by reCAPTCHA and the Google
+        <a href="https://policies.google.com/privacy">Privacy Policy</a> and
+        <a href="https://policies.google.com/terms">Terms of Service</a> apply.
+ ```
+
+Corner
+
+1. Set inline as false
+2. Your badge will be shown in the bottom right side.
+
+Custom
+
+1. Set inline as true
+2. Do Styling/CSS on its div element
+
 
-You can also customise your own template under googlerecaptchav3 folder.
-   
 #### Validation Class (Only support Laravel >= 5.5)
 
    You can use provided Validation object to verify your reCAPTCHA.
@@ -179,7 +230,12 @@ Register your action in config, also enable score and set up your own site key a
             'action' => 'contact_us',
             'threshold' => 2,
             'score_comparision' => true
-        ]
+        ],
+        [
+            'action' => 'signup',
+            'threshold' => 0.2,
+            'score_comparision' => true
+        ],
     ]
 ```
 
@@ -202,18 +258,24 @@ Create two functions in controller:
 ```
 
 Create your form in index.blade.php:
-``` php
-{!!  GoogleReCaptchaV3::requireJs() !!}
-
+``` html
 <form method="POST" action="/verify">
-   @csrf
-   {!!  GoogleReCaptchaV3::render('contact_us') !!}
+    @csrf
+    <div id="contact_us_id"></div>
+    <input type="submit" value="submit">
+</form>
+
 
-   <input type="submit" value="submit">
+<form method="POST" action="/verify">
+    @csrf
+    <div id="signup_id"></div>
+    <input type="submit" value="submit">
 </form>
+
+{!!  GoogleReCaptchaV3::render(['contact_us_id'=>'contact_us', 'signup_id'=>'signup']) !!}
 ```
 
-Go to /index and click submit button and you should see an error message that 'Score does not meet the treshhold' because the threshold >2. You can play around the controller to see all outcomes. Importantly, you need to wait the script to load and render the token before clicking the submit button.
+Go to /index and click submit button on contact us form and you should see an error message that 'Score does not meet the treshhold' because the threshold >2. You can play around the controller to see all outcomes. Importantly, you need to wait the script to load and render the token before clicking the submit button.
 
 ## Advanced Usage
 

config/googlerecaptchav3.php

@@ -42,16 +42,19 @@
     |
     */
     'site_key' => '',
+
     /*
     |--------------------------------------------------------------------------
-    | Template
+    | Badge Style
     |--------------------------------------------------------------------------
     | Type: string
-    | Template path, if your template locate at resources/views/template/test.blade.php
-    | your value should be template.test
+    | Support:
+    |  -  true: the badge will be shown inline with the form, also you can customise your style
+    |  -  false: the badge will be shown at the corner of the page
     |
     */
-    'template' => '',
+    'inline' => true,
+
     /*
     |--------------------------------------------------------------------------
     | Score Comparision
@@ -95,4 +98,14 @@
     | Google reCAPTCHA API
     */
     'site_verify_url' => 'https://www.google.com/recaptcha/api/siteverify',
+
+
+    /*
+    |--------------------------------------------------------------------------
+    | Site Verify Url
+    |--------------------------------------------------------------------------
+    | Type: string
+    | Google reCAPTCHA API
+    */
+    'display_badge' => true
 ];

resources/views/googlerecaptchav3/field.blade.php

@@ -0,0 +1,19 @@
+<script>
+    function onloadCallback() {
+                @foreach($mappers as $action=>$fields)
+                @foreach($fields as $field)
+        let client{{$field}} = grecaptcha.render('{{$field}}', {
+                'sitekey': '{{$publicKey}}',
+                    @if($inline===true) 'badge': 'inline', @endif
+                'size': 'invisible'
+            });
+        grecaptcha.ready(function () {
+            grecaptcha.execute(client{{$field}}, {
+                action: '{{$action}}'
+            });
+        });
+        @endforeach
+        @endforeach
+    }
+</script>
+<script src="https://www.google.com/recaptcha/api.js?render=explicit&onload=onloadCallback" defer async></script>

resources/views/googlerecaptchav3/header.blade.php

@@ -47,14 +47,6 @@ public function getSecretKey()
         return config('googlerecaptchav3.secret_key');
     }
 
-    /**
-     * @return string
-     */
-    public function getTemplate()
-    {
-        return config('googlerecaptchav3.template');
-    }
-
     /**
      * @return string
      */
@@ -81,4 +73,12 @@ public function getSetting()
     {
         return config('googlerecaptchav3.setting');
     }
+
+    /**
+     * @return bool
+     */
+    public function isInline()
+    {
+        return config('googlerecaptchav3.inline');
+    }
 }

resources/views/googlerecaptchav3/template.blade.php

@@ -17,45 +17,36 @@ class GoogleReCaptchaV3
     private $config;
     private $requestClient;
     private $action;
-    private $defaultFieldView = 'GoogleReCaptchaV3::googlerecaptchav3.field';
-    private $defaultHeaderView = 'GoogleReCaptchaV3::googlerecaptchav3.header';
+    private $defaultTemplate = 'GoogleReCaptchaV3::googlerecaptchav3.template';
     private $request;
 
     public function __construct(ReCaptchaConfigV3Interface $config, RequestClientInterface $requestClient)
     {
         $this->config = $config;
         $this->requestClient = $requestClient;
         $this->request = app('request');
+
     }
 
+
     /**
-     * @param $action
-     * @param string $name
-     * @return mixed|null
+     * @param $mappers
+     * @return mixed
      */
-    public function render($action, $name = 'g-recaptcha-response')
+    public function render($mappers)
     {
-        if ($this->config->isServiceEnabled() === false) {
-            return null;
+        $prepareData = [];
+        foreach ($mappers as $id => $action) {
+            $prepareData[$action][] = $id;
         }
 
-        $data = [
-            'publicKey' => value($this->config->getSiteKey()),
-            'action' => $action,
-            'name' => $name,
-            'id' => uniqid($name . '-', false)
-        ];
-
-        $view = $this->getView();
-
-        return app('view')->make($view, $data);
-    }
-
-    public function requireJs()
-    {
         return app('view')->make(
-            $this->defaultHeaderView,
-            ['publicKey' => $this->getConfig()->getSiteKey()]
+            $this->getView(),
+            [
+                'publicKey' => $this->getConfig()->getSiteKey(),
+                'mappers' => $prepareData,
+                'inline' => $this->config->isInline()
+            ]
         );
     }
 
@@ -64,12 +55,7 @@ public function requireJs()
      */
     protected function getView()
     {
-        $configTemplate = $this->config->getTemplate();
-
-        if (!empty($configTemplate)) {
-            $this->defaultFieldView = $configTemplate;
-        }
-        return $this->defaultFieldView;
+        return $this->defaultTemplate;
     }
 
     /**

src/Configurations/ReCaptchaConfigV3.php

@@ -27,11 +27,6 @@ public function isScoreEnabled();
      */
     public function getSecretKey();
 
-    /**
-     * @return string
-     */
-    public function getTemplate();
-
     /**
      * @return string
      */
@@ -56,4 +51,9 @@ public function getSiteVerifyUrl();
      * @return string
      */
     public function getHostName();
+
+    /**
+     * @return boolean
+     */
+    public function isInline();
 }