From 20a0424349cdc6483f0aa6c292957615d4fe2539 Mon Sep 17 00:00:00 2001
From: omair saleh <uldvstar@gmail.com>
Date: Thu, 11 Aug 2022 23:21:34 +0800
Subject: [PATCH] test recaptcha

---
 .../Accounts/UserAuthenticationController.php |   2 +
 composer.json                                 |   1 +
 config/app.php                                |   4 +-
 config/googlerecaptchav3.php                  | 166 ++++++++++++++++++
 .../accounts/forms/LoginFormComponent.vue     |  11 +-
 .../assets/vue/general/GoogleReCaptchaV3.vue  |  85 +++++++++
 .../assets/vue/general/mixins/formHandler.js  |   1 +
 .../assets/vue/general/mixins/request.js      |   1 +
 8 files changed, 268 insertions(+), 3 deletions(-)
 create mode 100644 config/googlerecaptchav3.php
 create mode 100644 resources/assets/vue/general/GoogleReCaptchaV3.vue

diff --git a/app/Http/Controllers/Accounts/UserAuthenticationController.php b/app/Http/Controllers/Accounts/UserAuthenticationController.php
index fdf4442d..a4f6c5d6 100644
--- a/app/Http/Controllers/Accounts/UserAuthenticationController.php
+++ b/app/Http/Controllers/Accounts/UserAuthenticationController.php
@@ -5,6 +5,7 @@ namespace App\Http\Controllers\Accounts;
 use App\Classes\Modules\Accounts\ControllersLogic\AuthenticateUserLogic;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\Request;
+use TimeHunter\LaravelGoogleReCaptchaV3\Facades\GoogleReCaptchaV3;
 
 class UserAuthenticationController
 {
@@ -15,6 +16,7 @@ class UserAuthenticationController
      * @return JsonResponse
      */
     public function authenticate(Request $request, AuthenticateUserLogic $logic): JsonResponse {
+        dd(GoogleReCaptchaV3::verifyResponse($request->input('gRecaptchaResponse')));
         return $logic->execute($request);
     }
 
diff --git a/composer.json b/composer.json
index 32305073..ee759dbb 100644
--- a/composer.json
+++ b/composer.json
@@ -26,6 +26,7 @@
         "spatie/laravel-activitylog": "^3.14",
         "spatie/laravel-permission": "^3.17",
         "staudenmeir/eloquent-has-many-deep": "^1.7",
+        "timehunter/laravel-google-recaptcha-v3": "~2.5",
         "tymon/jwt-auth": "^1.0"
     },
     "require-dev": {
diff --git a/config/app.php b/config/app.php
index c080002d..55cdb890 100644
--- a/config/app.php
+++ b/config/app.php
@@ -178,7 +178,8 @@ return [
         // Third Parties
         Spatie\Permission\PermissionServiceProvider::class,
         Barryvdh\DomPDF\ServiceProvider::class,
-        Meneses\LaravelMpdf\LaravelMpdfServiceProvider::class
+        Meneses\LaravelMpdf\LaravelMpdfServiceProvider::class,
+        TimeHunter\LaravelGoogleReCaptchaV3\Providers\GoogleReCaptchaV3ServiceProvider::class
 
     ],
 
@@ -233,6 +234,7 @@ return [
         'View' => Illuminate\Support\Facades\View::class,
         'PDF' => Barryvdh\DomPDF\Facade::class,
         'MPDF' => Meneses\LaravelMpdf\Facades\LaravelMpdf::class,
+        'GoogleReCaptchaV3'=> TimeHunter\LaravelGoogleReCaptchaV3\Facades\GoogleReCaptchaV3::class
 
     ],
 
diff --git a/config/googlerecaptchav3.php b/config/googlerecaptchav3.php
new file mode 100644
index 00000000..11e0232b
--- /dev/null
+++ b/config/googlerecaptchav3.php
@@ -0,0 +1,166 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Request Method
+    |--------------------------------------------------------------------------
+    |
+    | If not provided, will use curl as default.
+    | Supported: "guzzle", "curl", if you want to use your own request method,
+    | please read document.
+    |
+    */
+    'request_method' => 'curl',
+    /*
+    |--------------------------------------------------------------------------
+    | Enable/Disable Service
+    |--------------------------------------------------------------------------
+    | Type: bool
+    |
+    | This option is used to disable/enable the service
+    |
+    | Supported: true, false
+    |
+    */
+    'is_service_enabled' => true,
+    /*
+    |--------------------------------------------------------------------------
+    | Host Name
+    |--------------------------------------------------------------------------
+    | Type: string
+    | Default will be empty, assign value only if you want domain check with Google response
+    | Google reCAPTCHA host name, https://www.google.com/recaptcha/admin
+    |
+    */
+    'host_name' => '',
+    /*
+    |--------------------------------------------------------------------------
+    | Secret Key
+    |--------------------------------------------------------------------------
+    | Type: string
+    | Google reCAPTCHA credentials, https://www.google.com/recaptcha/admin
+    |
+    */
+    'secret_key' => env('RECAPTCHA_V3_SECRET_KEY', ''),
+    /*
+    |--------------------------------------------------------------------------
+    | Site Key
+    |--------------------------------------------------------------------------
+    | Type: string
+    | Google reCAPTCHA credentials, https://www.google.com/recaptcha/admin
+    |
+    */
+    'site_key' => env('RECAPTCHA_V3_SITE_KEY', ''),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Badge Style
+    |--------------------------------------------------------------------------
+    | Type: boolean
+    | Support:
+    |  -  true: the badge will be shown inline within the form, also you can customise your style
+    |  -  false: the badge will be shown in the bottom right side
+    |
+    */
+    'inline' => false,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Background Badge Style
+    |--------------------------------------------------------------------------
+    | Type: boolean
+    | Support:
+    |  -  true: the background badge will be displayed at the bottom right of page
+    |  -  false: the background badge will be invisible
+    |
+    */
+    'background_badge_display' => true,
+    /*
+    |--------------------------------------------------------------------------
+    | Background Mode
+    |--------------------------------------------------------------------------
+    | Type: boolean
+    | Support:
+    |  -  true: the script will run on every page if you put init() on the global page
+    |  -  false: the script will only be running if there is action defined
+    |
+    */
+    'background_mode' => false,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Score Comparision
+    |--------------------------------------------------------------------------
+    | Type: bool
+    | If you enable it, the package will do score comparision from your setting
+    */
+    'is_score_enabled' => true,
+    /*
+    |--------------------------------------------------------------------------
+    | Setting
+    |--------------------------------------------------------------------------
+    | Type: array
+    | Define your score threshold, define your action
+    | action: Google reCAPTCHA required parameter
+    | threshold: score threshold
+    | score_comparison: true/false, if this is true, the system will do score comparision against your threshold for the action
+    */
+    'setting' => [
+        [
+            'action' => 'login',
+            'threshold' => 0.6,
+            'score_comparison' => true,
+        ],
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Setting
+    |--------------------------------------------------------------------------
+    | Type: array
+    | Define a list of ip that you want to skip
+    */
+    'skip_ips' => [
+
+    ],
+    /*
+    |--------------------------------------------------------------------------
+    | Options
+    |--------------------------------------------------------------------------
+    | Custom option field for your request setting, which will be used for RequestClientInterface
+    |
+    */
+    'options' => [
+
+    ],
+    /*
+    |--------------------------------------------------------------------------
+    | API JS Url
+    |--------------------------------------------------------------------------
+    | Type: string
+    | Google reCAPTCHA API JS URL
+    | use:
+    */
+    'api_js_url' => 'https://www.google.com/recaptcha/api.js',
+    /*
+    |--------------------------------------------------------------------------
+    | Site Verify Url
+    |--------------------------------------------------------------------------
+    | Type: string
+    | Google reCAPTCHA API
+    | please use "www.recaptcha.net" in your code in circumstances when "www.google.com" is not accessible. e.g China
+    | e.g. https://www.recaptcha.net/recaptcha/api.js
+    */
+    'site_verify_url' => 'https://www.google.com/recaptcha/api/siteverify',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Language
+    |--------------------------------------------------------------------------
+    | Type: string
+    | https://developers.google.com/recaptcha/docs/language
+    */
+    'language' => 'en',
+];
diff --git a/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue b/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue
index 5ddfdadb..7ffbac79 100644
--- a/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue
+++ b/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue
@@ -2,18 +2,25 @@
     <div class="row" @keyup.enter="submitForm">
         <div class="col">
             <error-message-component class="m-b-20" :error="error"></error-message-component>
+            <google-re-captcha-v3
+                    v-model="parameters.gRecaptchaResponse"
+                    ref="captcha"
+                    site-key="6Lf79GghAAAAAI5qcvMp6Xxo-lg7bizo5o7QY80Z"
+                    id="contact_us_id"
+                    action="contact_us"
+            ></google-re-captcha-v3>
             <div class="row">
                 <div class="col">
                     <validation-wrapper-component class="m-b-15" :validator="$v.parameters.email">
                         <label class="text-primary">Email Address</label>
                         <div class="controls">
-                            <input id="email" name="email" type="text" class="form-control fs-12" v-model.trim="parameters.email">
+                            <input name="email" type="text" class="form-control fs-12" v-model.trim="parameters.email">
                         </div>
                     </validation-wrapper-component>
                     <validation-wrapper-component :validator="$v.parameters.password">
                         <label class="text-primary">Password</label>
                         <div class="controls">
-                            <input id="password" name="password" type="password" class="form-control fs-12" v-model="parameters.password">
+                            <input name="password" type="password" class="form-control fs-12" v-model="parameters.password">
                         </div>
                     </validation-wrapper-component>
                     <div class="row m-t-15 align-items-center justify-content-center">
diff --git a/resources/assets/vue/general/GoogleReCaptchaV3.vue b/resources/assets/vue/general/GoogleReCaptchaV3.vue
new file mode 100644
index 00000000..19aba4fa
--- /dev/null
+++ b/resources/assets/vue/general/GoogleReCaptchaV3.vue
@@ -0,0 +1,85 @@
+<template>
+    <div :id="id"></div>
+</template>
+
+<script>
+    export default {
+        name: 'google-recaptcha-v3',
+        props: {
+            action: {
+                type: String,
+                required: false,
+                default: 'validate_grecaptcha'
+            },
+            id: {
+                type: String,
+                required: false,
+                default: 'grecaptcha_container'
+            },
+            siteKey: {
+                type: String,
+                required: false, // set to true if you don't want to store the siteKey in this component
+                default: '6LcO02khAAAAANmfljrbQV-aqusOhwlNIm0-Q-82' // set siteKey here if you want to store it in this component
+            },
+            inline: {
+                type: Boolean,
+                required: false,
+                default: false,
+            },
+        },
+        data() {
+            return {
+                captchaId: null,
+            }
+        },
+        mounted() {
+            this.init();
+        },
+        methods: {
+            init() {
+                if (!document.getElementById('gRecaptchaScript')) {
+
+                    window.gRecaptchaOnLoadCallbacks = [this.render];
+                    window.gRecaptchaOnLoad = function () {
+                        for (let i = 0; i < window.gRecaptchaOnLoadCallbacks.length; i++) {
+                            window.gRecaptchaOnLoadCallbacks[i]();
+                        }
+                        delete window.gRecaptchaOnLoadCallbacks;
+                        delete window.gRecaptchaOnLoad;
+                    };
+
+                    let recaptchaScript = document.createElement('script');
+                    recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js?render=explicit&onload=gRecaptchaOnLoad');
+                    recaptchaScript.setAttribute('id', 'gRecaptchaScript');
+                    recaptchaScript.async = true;
+                    recaptchaScript.defer = true;
+                    document.head.appendChild(recaptchaScript);
+
+                } else if (!window.grecaptcha || !window.grecaptcha.render) {
+                    window.gRecaptchaOnLoadCallbacks.push(this.render);
+                } else {
+                    this.render();
+                }
+            },
+
+            render() {
+                this.captchaId = window.grecaptcha.render(this.id, {
+                    sitekey: this.siteKey,
+                    badge: this.inline === true ? 'inline' : '',
+                    size: 'invisible',
+                    'expired-callback': this.execute
+                });
+
+                this.execute();
+            },
+
+            execute() {
+                window.grecaptcha.execute(this.captchaId, {
+                    action: this.action,
+                }).then((token) => {
+                    this.$emit('input', token);
+                });
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/general/mixins/formHandler.js b/resources/assets/vue/general/mixins/formHandler.js
index d3b640b6..f059ae58 100644
--- a/resources/assets/vue/general/mixins/formHandler.js
+++ b/resources/assets/vue/general/mixins/formHandler.js
@@ -15,6 +15,7 @@ export default {
     created() {
         if(this.data){
             this.parameters = this.data;
+            this.parameters.gRecaptchaResponse = null
         }
 
     },
diff --git a/resources/assets/vue/general/mixins/request.js b/resources/assets/vue/general/mixins/request.js
index 84b9ccb4..1f121d3c 100644
--- a/resources/assets/vue/general/mixins/request.js
+++ b/resources/assets/vue/general/mixins/request.js
@@ -30,6 +30,7 @@ export default {
                 console.log(error);
                 this.$store.dispatch('createNotification', {title: 'Unexpected Error', message: 'An unexpected error has occurred. Try again!', type: 'error'});
             }).then(() => {
+                this.$refs.captcha.execute();
                 if (section) {
                     this.$store.dispatch('toggleLoading', {name: section, status: false})
                 }