From cd64d6dcc45d7610955ccb319a17e856de094b1e Mon Sep 17 00:00:00 2001 From: Italo Date: Fri, 1 May 2020 00:06:40 -0400 Subject: [PATCH 1/6] Create FUNDING.yml --- .github/FUNDING.yml | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 .github/FUNDING.yml diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 0000000..bc6e765 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,4 @@ +# Help me support these packages + +ko_fi: DarkGhostHunter +custom: ['https://paypal.me/darkghosthunter'] From 05a34643c6ed0020e547d67468897abd39d6715f Mon Sep 17 00:00:00 2001 From: Italo Date: Fri, 1 May 2020 00:07:29 -0400 Subject: [PATCH 2/6] Update FUNDING.yml --- .github/FUNDING.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index bc6e765..50062f2 100644 --- a/.github/FUNDING.yml +++ b/.github/FUNDING.yml @@ -1,4 +1,4 @@ -# Help me support these packages +# Help me support this package ko_fi: DarkGhostHunter custom: ['https://paypal.me/darkghosthunter'] From f87a8579cc64d20af0d7913515f31976610d00d6 Mon Sep 17 00:00:00 2001 From: Italo Date: Fri, 1 May 2020 21:30:56 -0400 Subject: [PATCH 3/6] May have fixed #22 --- resources/views/script.blade.php | 33 +++++++++++++++++--------------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/resources/views/script.blade.php b/resources/views/script.blade.php index ff684b8..92114f2 100644 --- a/resources/views/script.blade.php +++ b/resources/views/script.blade.php @@ -14,21 +14,24 @@ .forEach((form) => { let action = form.action.includes('://') ? (new URL(form.action)).pathname : form.action; form.addEventListener('submit', (event) => { - event.preventDefault(); - grecaptcha.execute(site_key, { - action: action - .substring(action.indexOf('?'), action.length) - .replace(/[^A-z\/_]/gi, '') - }).then((token) => { - if (token) { - let child = document.createElement('input'); - child.setAttribute('type', 'hidden'); - child.setAttribute('name', '_recaptcha'); - child.setAttribute('value', token); - form.appendChild(child); - form.submit(); - } - }); + // Proceed only if other events have not disabled the form submission. + if (! event.defaultPrevented) { + event.preventDefault(); + grecaptcha.execute(site_key, { + action: action + .substring(action.indexOf('?'), action.length) + .replace(/[^A-z\/_]/gi, '') + }).then((token) => { + if (token) { + let child = document.createElement('input'); + child.setAttribute('type', 'hidden'); + child.setAttribute('name', '_recaptcha'); + child.setAttribute('value', token); + form.appendChild(child); + form.submit(); + } + }); + } }); }); }; From 52e8b1bb030ced53f2b5ddd096ba1452a394bb73 Mon Sep 17 00:00:00 2001 From: Italo Date: Sun, 10 May 2020 14:56:44 -0400 Subject: [PATCH 4/6] May have fixed #22 by using an await for promise --- resources/views/script.blade.php | 31 +++++++++++++------------------ 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/resources/views/script.blade.php b/resources/views/script.blade.php index 92114f2..2d54f89 100644 --- a/resources/views/script.blade.php +++ b/resources/views/script.blade.php @@ -14,24 +14,19 @@ .forEach((form) => { let action = form.action.includes('://') ? (new URL(form.action)).pathname : form.action; form.addEventListener('submit', (event) => { - // Proceed only if other events have not disabled the form submission. - if (! event.defaultPrevented) { - event.preventDefault(); - grecaptcha.execute(site_key, { - action: action - .substring(action.indexOf('?'), action.length) - .replace(/[^A-z\/_]/gi, '') - }).then((token) => { - if (token) { - let child = document.createElement('input'); - child.setAttribute('type', 'hidden'); - child.setAttribute('name', '_recaptcha'); - child.setAttribute('value', token); - form.appendChild(child); - form.submit(); - } - }); - } + await grecaptcha.execute(site_key, { + action: action + .substring(action.indexOf('?'), action.length) + .replace(/[^A-z\/_]/gi, '') + }).then((token) => { + if (token) { + let child = document.createElement('input'); + child.setAttribute('type', 'hidden'); + child.setAttribute('name', '_recaptcha'); + child.setAttribute('value', token); + form.appendChild(child); + } + }); }); }); }; From a830a286ecb1d5a28c1a2d0ec56b49dfd1310702 Mon Sep 17 00:00:00 2001 From: DarkGhostHunter Date: Tue, 26 May 2020 20:34:52 -0400 Subject: [PATCH 5/6] Reworked script. Last time I do this. --- README.md | 34 +++++++++++++--- resources/views/script.blade.php | 70 ++++++++++++++++++++++---------- 2 files changed, 76 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 9d866ad..39655eb 100644 --- a/README.md +++ b/README.md @@ -3,6 +3,7 @@ [![Latest Version on Packagist](https://img.shields.io/packagist/v/darkghosthunter/captchavel.svg?style=flat-square)](https://packagist.org/packages/darkghosthunter/captchavel) [![License](https://poser.pugx.org/darkghosthunter/captchavel/license)](https://packagist.org/packages/darkghosthunter/larapoke) ![](https://img.shields.io/packagist/php-v/darkghosthunter/captchavel.svg) ![](https://github.com/DarkGhostHunter/Captchavel/workflows/PHP%20Composer/badge.svg) [![Coverage Status](https://coveralls.io/repos/github/DarkGhostHunter/Captchavel/badge.svg?branch=master)](https://coveralls.io/github/DarkGhostHunter/Captchavel?branch=master) [![Maintainability](https://api.codeclimate.com/v1/badges/9571f57106069b5f3aac/maintainability)](https://codeclimate.com/github/DarkGhostHunter/Captchavel/maintainability) + # Captchavel Easily integrate Google reCAPTCHA v3 into your Laravel application. @@ -45,9 +46,30 @@ Just add the `data-recaptcha="true"` attribute to the forms where you want to ha ``` -The Google reCAPTCHA script from Google will be automatically injected on all responses for better analytics. +The Google reCAPTCHA script from Google will be automatically injected on all responses for better analytics. + +> Alternatively, you may want to use the [`manual` mode](#manual) if you want control on how to deal with the frontend reCAPTCHA script, or use a [personalized one](#editing-the-script-view). + +#### Form submission prevented + +Form submission is disabled by default until the token from reCAPTCHA is retrieved. If you want to disable this behaviour, append `data-recaptcha-dont-prevent` to the form: -> Alternatively, you may want to use the [`manual` mode](#manual) if you want control on how to deal with the frontend reCAPTCHA script. +```blade + +
+ +
+``` + +#### Token resolved helper. + +When the reCAPTCHA token is being retrieved for the form, the form will have set the property `recaptcha_unresolved` to `true`. You can use this property for your other script to conditionally allow submission or whatever. + +```javascript +if (form.recaptcha_unresolved) { + alert('Wait until reCAPTCHA sends the token!'); +} +``` ### Backend @@ -412,19 +434,19 @@ We're leaving the Contextual Binding to you, since your *requester* may need som You can edit the script Blade view under by just creating a Blade template in `resources/vendor/captchavel/script.blade.php`. -This blade views requires the Google reCAPTCHA v3 script, and detects the forms that need a reCAPTCHA check to be injected inside the request to the application. The view receives the `$key` variable witch is just the reCAPTCHA v3 Site Key. +This blade view contains the reCAPTCHA script of the package. The view receives the `$key` variable witch is just the reCAPTCHA v3 Site Key. -There you can edit how the script is downloaded from Google, and how it checks for forms to link with the backend. +There you can edit how the script is downloaded from Google, and how it checks for forms to link with the backend, if the default script isn't enough for you. ### AJAX Requests -Depending of your application, AJAX Requests won't include the reCAPTCHA token. This may be for various reasons: +Depending on the application, AJAX Requests won't include the reCAPTCHA token. This may be for various reasons: * Using virtual DOM frameworks like Vue and React. * Creating a form after the page loaded with JavaScript. * An AJAX Requests being done entirely in JavaScript. -In any of these scenarios, you may want disable the injection script and [use the reCAPATCHA v3 scripts directly](https://developers.google.com/recaptcha/docs/v3). +In any of these scenarios, you may want disable the injection script and [use the reCAPATCHA v3 scripts directly](https://developers.google.com/recaptcha/docs/v3) or your [custom script](#editing-the-script-view). ## License diff --git a/resources/views/script.blade.php b/resources/views/script.blade.php index 2d54f89..741b30a 100644 --- a/resources/views/script.blade.php +++ b/resources/views/script.blade.php @@ -1,34 +1,60 @@ From 7dc977cd97b27c3012b9b99ced594c67b4252da3 Mon Sep 17 00:00:00 2001 From: DarkGhostHunter Date: Tue, 26 May 2020 20:53:40 -0400 Subject: [PATCH 6/6] Fixed typos. Clearer texts. --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 39655eb..5282457 100644 --- a/README.md +++ b/README.md @@ -61,13 +61,15 @@ Form submission is disabled by default until the token from reCAPTCHA is retriev ``` -#### Token resolved helper. +#### Token resolved helper -When the reCAPTCHA token is being retrieved for the form, the form will have set the property `recaptcha_unresolved` to `true`. You can use this property for your other script to conditionally allow submission or whatever. +When the reCAPTCHA token is being retrieved for the form, the form will have the property `recaptcha_unresolved` set to `true`. You can use this property for your other scripts to conditionally allow submission or whatever. ```javascript if (form.recaptcha_unresolved) { alert('Wait until reCAPTCHA sends the token!'); +} else { + form.submit(); } ```