test recaptcha

This commit is contained in:
omair saleh
2022-08-11 23:21:34 +08:00
parent 18dddc38f6
commit 20a0424349
8 changed files with 268 additions and 3 deletions
@@ -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);
}
+1
View File
@@ -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": {
+3 -1
View File
@@ -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
],
+166
View File
@@ -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',
];
@@ -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">
@@ -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>
+1
View File
@@ -15,6 +15,7 @@ export default {
created() {
if(this.data){
this.parameters = this.data;
this.parameters.gRecaptchaResponse = null
}
},
+1
View File
@@ -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})
}