From 1541d769b4a4486f7db4958c97e7bab709869dc3 Mon Sep 17 00:00:00 2001 From: Xavier4492 <64558684+Xavier4492@users.noreply.github.com> Date: Thu, 2 Nov 2023 05:00:55 +0100 Subject: [PATCH 01/12] Add onload callback to configuration options this commit adds support for onload callback when initializing. See https://developers.google.com/recaptcha/docs/loading?hl=fr#loading_recaptcha_asynchronously --- lib/plugin.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/lib/plugin.js b/lib/plugin.js index 5f773f4..7e1eeb2 100644 --- a/lib/plugin.js +++ b/lib/plugin.js @@ -4,7 +4,7 @@ import Vue from 'vue' const API_URL = 'https://www.recaptcha.net/recaptcha/api.js' class ReCaptcha { - constructor ({ hideBadge, language, mode, siteKey, version, size }) { + constructor ({ hideBadge, language, onloadCallback, mode, siteKey, version, size }) { if (!siteKey) { throw new Error('ReCaptcha error: No key provided') } @@ -21,6 +21,7 @@ class ReCaptcha { this.hideBadge = hideBadge this.language = language + this.onloadCallback = onloadCallback this.siteKey = siteKey this.version = version @@ -122,6 +123,11 @@ class ReCaptcha { const params = [] if (this.version === 3) { params.push('render=' + this.siteKey) } if (this.language) { params.push('hl=' + this.language) } + if (this.onloadCallback) { + if (this.version === 2) { + params.push('onload=' + this.onloadCallback) + } + } let scriptUrl = API_URL From 99b8305c2d04f567e0924a16ac37063ca66bc228 Mon Sep 17 00:00:00 2001 From: Xavier4492 <64558684+Xavier4492@users.noreply.github.com> Date: Thu, 2 Nov 2023 06:19:26 +0100 Subject: [PATCH 02/12] Add onload event --- lib/plugin.js | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/lib/plugin.js b/lib/plugin.js index 7e1eeb2..94a6f89 100644 --- a/lib/plugin.js +++ b/lib/plugin.js @@ -5,6 +5,10 @@ const API_URL = 'https://www.recaptcha.net/recaptcha/api.js' class ReCaptcha { constructor ({ hideBadge, language, onloadCallback, mode, siteKey, version, size }) { + if (onloadCallback && typeof onloadCallback !== 'function') { + throw new Error('ReCaptcha error: onloadCallback doit être une fonction') + } + if (!siteKey) { throw new Error('ReCaptcha error: No key provided') } @@ -123,9 +127,9 @@ class ReCaptcha { const params = [] if (this.version === 3) { params.push('render=' + this.siteKey) } if (this.language) { params.push('hl=' + this.language) } - if (this.onloadCallback) { + if (this.onloadCallback && typeof this.onloadCallback === 'function') { if (this.version === 2) { - params.push('onload=' + this.onloadCallback) + params.push('onload=recaptchaOnloadCallback') } } @@ -141,6 +145,11 @@ class ReCaptcha { window.recaptchaSuccessCallback = (token) => this._eventBus.emit('recaptcha-success', token) window.recaptchaExpiredCallback = () => this._eventBus.emit('recaptcha-expired') window.recaptchaErrorCallback = () => this._eventBus.emit('recaptcha-error', 'Failed to execute') + window.recaptchaOnloadCallback = () => { + this._eventBus.emit('recaptcha-onload') + this.onloadCallback() + } + window.recaptchaOnload = () => this._eventBus.emit('recaptcha-onload') this._ready = new Promise((resolve, reject) => { script.addEventListener('load', () => { @@ -155,7 +164,13 @@ class ReCaptcha { } this._grecaptcha = window.grecaptcha.enterprise || window.grecaptcha - this._grecaptcha.ready(resolve) + this._grecaptcha.ready(() => { + if (typeof this.onloadCallback === 'function') { + this._eventBus.emit('recaptcha-onload') + this.onloadCallback(); + } + resolve(); + }); }) script.addEventListener('error', () => { From 637f02af7dc9c5107afabfb33aa2782089f079dc Mon Sep 17 00:00:00 2001 From: Xavier4492 <64558684+Xavier4492@users.noreply.github.com> Date: Thu, 2 Nov 2023 06:24:36 +0100 Subject: [PATCH 03/12] Add onLoad event to component --- lib/recaptcha.vue | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/lib/recaptcha.vue b/lib/recaptcha.vue index fc0f7f3..470de0b 100644 --- a/lib/recaptcha.vue +++ b/lib/recaptcha.vue @@ -9,6 +9,7 @@ data-callback="recaptchaSuccessCallback" data-expired-callback="recaptchaExpiredCallback" data-error-callback="recaptchaErrorCallback" + data-onload-callback="recaptchaOnloadCallback" class="g-recaptcha" /> @@ -63,6 +64,7 @@ export default { this.$recaptcha.on('recaptcha-error', this.onError) this.$recaptcha.on('recaptcha-success', this.onSuccess) this.$recaptcha.on('recaptcha-expired', this.onExpired) + this.$recaptcha.on('recaptcha-onload', this.onLoad) }, computed: { @@ -83,6 +85,10 @@ export default { onExpired() { return this.$emit('expired') } + + onLoad() { + return this.$emit('load') + } } } From f763045ed0d8df1f9279f61cfe679090dcd5860d Mon Sep 17 00:00:00 2001 From: Xavier4492 <64558684+Xavier4492@users.noreply.github.com> Date: Thu, 2 Nov 2023 06:33:19 +0100 Subject: [PATCH 04/12] Fix recaptchaOnloadCallback --- lib/plugin.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/lib/plugin.js b/lib/plugin.js index 94a6f89..4965ed2 100644 --- a/lib/plugin.js +++ b/lib/plugin.js @@ -6,7 +6,7 @@ const API_URL = 'https://www.recaptcha.net/recaptcha/api.js' class ReCaptcha { constructor ({ hideBadge, language, onloadCallback, mode, siteKey, version, size }) { if (onloadCallback && typeof onloadCallback !== 'function') { - throw new Error('ReCaptcha error: onloadCallback doit être une fonction') + throw new Error('ReCaptcha error: onloadCallback must be a function') } if (!siteKey) { @@ -129,7 +129,7 @@ class ReCaptcha { if (this.language) { params.push('hl=' + this.language) } if (this.onloadCallback && typeof this.onloadCallback === 'function') { if (this.version === 2) { - params.push('onload=recaptchaOnloadCallback') + params.push('onload=recaptchaOnloadCallbackFunction') } } @@ -145,11 +145,13 @@ class ReCaptcha { window.recaptchaSuccessCallback = (token) => this._eventBus.emit('recaptcha-success', token) window.recaptchaExpiredCallback = () => this._eventBus.emit('recaptcha-expired') window.recaptchaErrorCallback = () => this._eventBus.emit('recaptcha-error', 'Failed to execute') - window.recaptchaOnloadCallback = () => { + window.recaptchaOnloadCallback = () => this._eventBus.emit('recaptcha-onload') + window.recaptchaOnloadCallbackFunction = () => { this._eventBus.emit('recaptcha-onload') - this.onloadCallback() + if (typeof this.onloadCallback === 'function') { + this.onloadCallback(); + } } - window.recaptchaOnload = () => this._eventBus.emit('recaptcha-onload') this._ready = new Promise((resolve, reject) => { script.addEventListener('load', () => { @@ -165,11 +167,8 @@ class ReCaptcha { this._grecaptcha = window.grecaptcha.enterprise || window.grecaptcha this._grecaptcha.ready(() => { - if (typeof this.onloadCallback === 'function') { - this._eventBus.emit('recaptcha-onload') - this.onloadCallback(); - } - resolve(); + windows.recaptchaOnloadCallbackFunction() + resolve() }); }) From f690d515a79f2a4e26428b3b301f661e341803ee Mon Sep 17 00:00:00 2001 From: Xavier4492 <64558684+Xavier4492@users.noreply.github.com> Date: Thu, 2 Nov 2023 06:45:04 +0100 Subject: [PATCH 05/12] Add onloadCallback to types --- types/index.d.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/types/index.d.ts b/types/index.d.ts index 05459ac..df64241 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -11,6 +11,11 @@ export interface ReCaptchaOptions { */ language?: string + /** + * Callback executed when ReCaptcha fully loads + */ + onloadCallback?: Function; + /** * ReCaptcha mode. */ From 21b3f3af998323a1cfe6f6a9c79f2726311e0f18 Mon Sep 17 00:00:00 2001 From: Xavier4492 <64558684+Xavier4492@users.noreply.github.com> Date: Thu, 2 Nov 2023 06:54:55 +0100 Subject: [PATCH 06/12] Update README.md with onloadCallback --- README.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index db6a9d9..a5aedae 100755 --- a/README.md +++ b/README.md @@ -48,12 +48,13 @@ using top level options { // ... recaptcha: { - hideBadge: Boolean, // Hide badge element (v3 & v2 via size=invisible) - language: String, // Recaptcha language (v2) - mode: String, // Mode: 'base', 'enterprise' - siteKey: String, // Site key for requests - version: Number, // Version - size: String // Size: 'compact', 'normal', 'invisible' (v2) + hideBadge: Boolean, // Hide badge element (v3 & v2 via size=invisible) + language: String, // Recaptcha language (v2) + onloadCallback: Function, // Fonction de rappel à exécuter lorsque reCAPTCHA est complètement chargé + mode: String, // Mode: 'base', 'enterprise' + siteKey: String, // Site key for requests + version: Number, // Version + size: String // Size: 'compact', 'normal', 'invisible' (v2) }, // ... } From 9eccd72c9f7dde2aa1045afba7073566999f55cf Mon Sep 17 00:00:00 2001 From: Xavier4492 <64558684+Xavier4492@users.noreply.github.com> Date: Thu, 2 Nov 2023 06:57:34 +0100 Subject: [PATCH 07/12] Update exemple entreprise v3 --- example/enterprise/v3/pages/index.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/example/enterprise/v3/pages/index.vue b/example/enterprise/v3/pages/index.vue index d1f9e7e..47385a9 100644 --- a/example/enterprise/v3/pages/index.vue +++ b/example/enterprise/v3/pages/index.vue @@ -32,6 +32,7 @@ export default { async mounted() { try { await this.$recaptcha.init() + this.$recaptcha.on('load', this.onLoadCallback) } catch (e) { console.log(e); } From ab9975956199d8a843f9d3ee1d43fd017ff66fa6 Mon Sep 17 00:00:00 2001 From: Xavier4492 <64558684+Xavier4492@users.noreply.github.com> Date: Thu, 2 Nov 2023 06:59:08 +0100 Subject: [PATCH 08/12] Update index.vue Update exemple entreprise v2 --- example/enterprise/v2/pages/index.vue | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/example/enterprise/v2/pages/index.vue b/example/enterprise/v2/pages/index.vue index 1606326..7cbb3ed 100644 --- a/example/enterprise/v2/pages/index.vue +++ b/example/enterprise/v2/pages/index.vue @@ -21,6 +21,7 @@ @error="onError" @success="onSuccess" @expired="onExpired" + @load="onLoad" /> @@ -68,6 +69,10 @@ export default { onExpired () { console.log('Expired') + }, + + onLoad () { + console.log('Loaded') } }, } From 0005f6cb6bd4f6f240f135969f49fc86b9e85c5d Mon Sep 17 00:00:00 2001 From: Xavier4492 <64558684+Xavier4492@users.noreply.github.com> Date: Thu, 2 Nov 2023 07:00:44 +0100 Subject: [PATCH 09/12] Update exemple base v3 with onload --- example/base/v3/pages/index.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/example/base/v3/pages/index.vue b/example/base/v3/pages/index.vue index d1f9e7e..47385a9 100644 --- a/example/base/v3/pages/index.vue +++ b/example/base/v3/pages/index.vue @@ -32,6 +32,7 @@ export default { async mounted() { try { await this.$recaptcha.init() + this.$recaptcha.on('load', this.onLoadCallback) } catch (e) { console.log(e); } From e6a77670e672af4f25495842f9c5313b26a3a78c Mon Sep 17 00:00:00 2001 From: Xavier4492 <64558684+Xavier4492@users.noreply.github.com> Date: Thu, 2 Nov 2023 07:02:09 +0100 Subject: [PATCH 10/12] Update exemple base v2 with onload --- example/base/v2/pages/index.vue | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/example/base/v2/pages/index.vue b/example/base/v2/pages/index.vue index 1606326..7cbb3ed 100644 --- a/example/base/v2/pages/index.vue +++ b/example/base/v2/pages/index.vue @@ -21,6 +21,7 @@ @error="onError" @success="onSuccess" @expired="onExpired" + @load="onLoad" /> @@ -68,6 +69,10 @@ export default { onExpired () { console.log('Expired') + }, + + onLoad () { + console.log('Loaded') } }, } From 7c72d956eb457dc240c1dd031a858b3b8ccfa4ca Mon Sep 17 00:00:00 2001 From: Xavier4492 <64558684+Xavier4492@users.noreply.github.com> Date: Thu, 2 Nov 2023 07:05:32 +0100 Subject: [PATCH 11/12] Fix function no exist on base exemple --- example/base/v3/pages/index.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/base/v3/pages/index.vue b/example/base/v3/pages/index.vue index 47385a9..b71ab28 100644 --- a/example/base/v3/pages/index.vue +++ b/example/base/v3/pages/index.vue @@ -32,7 +32,7 @@ export default { async mounted() { try { await this.$recaptcha.init() - this.$recaptcha.on('load', this.onLoadCallback) + this.$recaptcha.on('load', () => console.log('loaded')) } catch (e) { console.log(e); } From 3ccaa2a446acd606d49e6b86191693e02d7b948d Mon Sep 17 00:00:00 2001 From: Xavier4492 <64558684+Xavier4492@users.noreply.github.com> Date: Thu, 2 Nov 2023 07:06:36 +0100 Subject: [PATCH 12/12] Fix function no exist on base exemple --- example/enterprise/v3/pages/index.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/enterprise/v3/pages/index.vue b/example/enterprise/v3/pages/index.vue index 47385a9..b71ab28 100644 --- a/example/enterprise/v3/pages/index.vue +++ b/example/enterprise/v3/pages/index.vue @@ -32,7 +32,7 @@ export default { async mounted() { try { await this.$recaptcha.init() - this.$recaptcha.on('load', this.onLoadCallback) + this.$recaptcha.on('load', () => console.log('loaded')) } catch (e) { console.log(e); }