From fc11a26ad67dc30bb37aaf445d8cbc226762faa1 Mon Sep 17 00:00:00 2001
From: tuxuuman <tuxuuman@gmail.com>
Date: Wed, 21 Apr 2021 10:49:44 +0500
Subject: [PATCH 1/2] feat: combining v2 and v3

Added the ability to simultaneously use recaptcha versions v2 and v3
---
 example/combined/api/recaptcha.js |  60 +++++++++++++++
 example/combined/nuxt.config.js   |  24 ++++++
 example/combined/pages/about.vue  |   8 ++
 example/combined/pages/index.vue  | 119 ++++++++++++++++++++++++++++++
 lib/plugin.js                     |  44 +++++++----
 lib/recaptcha.vue                 |  35 ++++-----
 package.json                      |   1 +
 types/index.d.ts                  |   4 +-
 8 files changed, 261 insertions(+), 34 deletions(-)
 create mode 100644 example/combined/api/recaptcha.js
 create mode 100644 example/combined/nuxt.config.js
 create mode 100644 example/combined/pages/about.vue
 create mode 100644 example/combined/pages/index.vue

diff --git a/example/combined/api/recaptcha.js b/example/combined/api/recaptcha.js
new file mode 100644
index 0000000..02a5576
--- /dev/null
+++ b/example/combined/api/recaptcha.js
@@ -0,0 +1,60 @@
+import { useBody } from 'h3'
+import { $fetch } from 'ohmyfetch/node'
+
+/**
+ * It is highly recommended to use enviroment variables instead of hardcoded secrets.
+ */
+const SECRET_KEYS = {
+  '2': '6LecsLIaAAAAABd-yNkMXt_rf7GjWaxVJDlWryYy', // v2 secret key
+  '3': '6LfembIaAAAAACcZlTsRvwf62fuCGXfR7e2HIj8S' // v3 secret key
+}
+
+/**
+ * This is an example that demonstrates how verifying reCAPTCHA on the server side works.
+ * Do not use this middleware in your production.
+ */
+export default async (req, res) => {
+  res.setHeader('Content-Type', 'application/json')
+  try {
+    const { token, v } = await useBody(req)
+
+    if (!SECRET_KEYS[v]) {
+      res.end(JSON.stringify({
+        success: false,
+        message: 'Invalid version'
+      }))
+      return
+    }
+
+    if (!token) {
+      res.end(JSON.stringify({
+        success: false,
+        message: 'Invalid token'
+      }))
+      return
+    }
+    const response = await $fetch(
+      `https://www.google.com/recaptcha/api/siteverify?secret=${SECRET_KEYS[v]}&response=${token}`
+    )
+
+    if (response.success) {
+      res.end(JSON.stringify({
+        success: true,
+        message: 'Token verifyed',
+        response: response
+      }))
+    } else {
+      res.end(JSON.stringify({
+        success: false,
+        message: 'Invalid token',
+        response: response
+      }))
+    }
+  } catch (e) {
+    console.log('ReCaptcha error:', e)
+    res.end(JSON.stringify({
+      success: false,
+      message: 'Internal error'
+    }))
+  }
+}
diff --git a/example/combined/nuxt.config.js b/example/combined/nuxt.config.js
new file mode 100644
index 0000000..928f863
--- /dev/null
+++ b/example/combined/nuxt.config.js
@@ -0,0 +1,24 @@
+const { resolve } = require('path')
+
+module.exports = {
+  buildDir: resolve(__dirname, '.nuxt'),
+
+  modules: [
+    ['../../lib/module', {
+      hideBadge: true,
+      siteKey: [
+        '6LecsLIaAAAAAEeBOiX7b4rSwMDNL9zhIXlPNEB1', // v2 site key
+        '6LfembIaAAAAACPEdfjUpSmmYqMyJZn-ZU0aFUvb' // v3 site key
+      ]
+    }]
+  ],
+
+  serverMiddleware: [
+    { path: '/api/check-token', handler: '~/api/recaptcha' }
+  ],
+
+  srcDir: __dirname,
+
+  render: { resourceHints: false },
+  rootDir: resolve(__dirname, '..')
+}
diff --git a/example/combined/pages/about.vue b/example/combined/pages/about.vue
new file mode 100644
index 0000000..044392d
--- /dev/null
+++ b/example/combined/pages/about.vue
@@ -0,0 +1,8 @@
+<template>
+  <section class="about-page">
+    <h2>About page</h2>
+    <p>Text</p>
+
+    <nuxt-link :to="{ name: 'index' }">Go to Index</nuxt-link>
+  </section>
+</template>
diff --git a/example/combined/pages/index.vue b/example/combined/pages/index.vue
new file mode 100644
index 0000000..ac0d5a7
--- /dev/null
+++ b/example/combined/pages/index.vue
@@ -0,0 +1,119 @@
+<template>
+  <section class="index-page">
+    <h2>With v2</h2>
+
+    <form @submit.prevent="onSubmitV2">
+      <input
+        v-model="email"
+        autocomplete="true"
+        placeholder="Email"
+        type="email"
+      >
+      <input
+        v-model="password"
+        autocomplete="current-password"
+        placeholder="Password"
+        type="password"
+      >
+      <recaptcha
+        @error="onError"
+        @success="onSuccess"
+        @expired="onExpired"
+      />
+
+      <button type="submit">
+        Sign In
+      </button>
+    </form>
+
+    <hr>
+    <h2>With v3</h2>
+
+    <form @submit.prevent="onSubmitV3">
+      <input
+        v-model="email"
+        autocomplete="true"
+        placeholder="Email"
+        type="email"
+      >
+      <input
+        v-model="password"
+        autocomplete="current-password"
+        placeholder="Password"
+        type="password"
+      >
+      <button type="submit">
+        Sign In
+      </button>
+    </form>
+    <hr>
+    <nuxt-link :to="{ name: 'about' }">About</nuxt-link>
+  </section>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    email: 'test@example.com',
+    password: '123'
+  }),
+
+  async mounted() {
+    try {
+      await this.$recaptcha.init()
+    } catch (e) {
+      console.log(e)
+    }
+  },
+
+  methods: {
+    async onSubmitV2() {
+      try {
+        const token = await this.$recaptcha.getResponse()
+        console.log('v2 ReCaptcha token:', token)
+        const response = await fetch('/api/check-token', {
+          method: 'POST',
+          body: JSON.stringify({
+            v: 2,
+            token,
+            email: this.email,
+            password: this.password
+          })
+        }).then(res => res.json())
+        console.log('v2 Server Response: ', response)
+        await this.$recaptcha.reset()
+      } catch (error) {
+        console.log('v2 Login error:', error)
+      }
+    },
+    async onSubmitV3() {
+      try {
+        const token = await this.$recaptcha.execute('login')
+        console.log('v3 ReCaptcha token:', token)
+        const response = await fetch('/api/check-token', {
+          method: 'POST',
+          body: JSON.stringify({
+            v: 3,
+            token,
+            email: this.email,
+            password: this.password
+          })
+        }).then(res => res.json())
+        console.log('v3 Server Response: ', response)
+      } catch (error) {
+        console.log('v3 Login error:', error)
+      }
+    },
+    onSuccess(token) {
+      console.log('v2 Succeeded:', token)
+    },
+
+    onExpired() {
+      console.log('v2 Expired')
+    },
+    onError(error) {
+      console.log('v2 Error happened:', error)
+    }
+  }
+}
+</script>
diff --git a/lib/plugin.js b/lib/plugin.js
index 8eba35d..3f157e0 100644
--- a/lib/plugin.js
+++ b/lib/plugin.js
@@ -9,7 +9,9 @@ class ReCaptcha {
       throw new Error('ReCaptcha error: No key provided')
     }
 
-    if (!version) {
+    if (!version && !Array.isArray(siteKey)) {
+      throw new Error('ReCaptcha error: siteKey must be array when version not provided')
+    } else if (!version && typeof(siteKey) == 'string') {
       throw new Error('ReCaptcha error: No version provided')
     }
 
@@ -26,6 +28,18 @@ class ReCaptcha {
     this.size = size
   }
 
+  get siteKeyV2() {
+    if (this.version === 2) return this.siteKey;
+    else if (Array.isArray(this.siteKey)) return this.siteKey[0];
+    else return null;
+  }
+
+  get siteKeyV3() {
+    if (this.version === 3) return this.siteKey;
+    else if (Array.isArray(this.siteKey)) return this.siteKey[1];
+    else return null;
+  }
+
   destroy () {
     if (this._ready) {
       this._ready = false
@@ -43,7 +57,7 @@ class ReCaptcha {
       if (head.contains(style)) {
         head.removeChild(style)
       }
-      
+
       const badge = document.querySelector('.grecaptcha-badge')
       if (badge) {
         badge.remove()
@@ -57,7 +71,7 @@ class ReCaptcha {
 
       if ('grecaptcha' in window) {
         return window.grecaptcha.execute(
-          this.siteKey,
+          this.siteKeyV3,
           { action }
         )
       }
@@ -117,7 +131,7 @@ class ReCaptcha {
     script.setAttribute('defer', '')
 
     const params = []
-    if (this.version === 3) { params.push('render=' + this.siteKey) }
+    if (this.siteKeyV3) { params.push('render=' + this.siteKeyV3) }
     if (this.language) { params.push('hl=' + this.language) }
     script.setAttribute('src', API_URL + '?' + params.join('&'))
 
@@ -127,12 +141,7 @@ class ReCaptcha {
 
     this._ready = new Promise((resolve, reject) => {
       script.addEventListener('load', () => {
-        if (this.version === 3 && this.hideBadge) {
-          style.innerHTML = '.grecaptcha-badge { display: none }'
-          document.head.appendChild(style)
-        } else if(this.version === 2 && this.hideBadge) {
-          // display: none DISABLES the spam checking!
-          // ref: https://stackoverflow.com/questions/44543157/how-to-hide-the-google-invisible-recaptcha-badge
+        if (this.hideBadge) {
           style.innerHTML = '.grecaptcha-badge { visibility: hidden; }'
           document.head.appendChild(style)
         }
@@ -157,13 +166,22 @@ class ReCaptcha {
   }
 
   reset (widgetId) {
-    if (this.version === 2 || typeof widgetId !== 'undefined') {
+    if (this.siteKeyV2 || typeof widgetId !== 'undefined') {
       window.grecaptcha.reset(widgetId)
     }
   }
 
-  render (reference, { sitekey, theme }) {
-    return window.grecaptcha.render(reference.$el || reference, { sitekey, theme })
+  render (reference, options) {
+    return window.grecaptcha.render(reference.$el || reference, Object.assign({
+      "sitekey": this.siteKeyV2,
+      "size": this.size
+    },
+    options,
+    {
+      "callback": "recaptchaSuccessCallback",
+      "expired-callback": "recaptchaExpiredCallback",
+      "error-callback": "recaptchaErrorCallback",
+    }));
   }
 }
 
diff --git a/lib/recaptcha.vue b/lib/recaptcha.vue
index fc0f7f3..ba33498 100644
--- a/lib/recaptcha.vue
+++ b/lib/recaptcha.vue
@@ -1,16 +1,5 @@
 <template>
-  <div
-    :data-sitekey="siteKey || $recaptcha.siteKey"
-    :data-size="computedDataSize"
-    :data-theme="dataTheme"
-    :data-badge="dataBadge"
-    :data-tabindex="dataTabindex"
-
-    data-callback="recaptchaSuccessCallback"
-    data-expired-callback="recaptchaExpiredCallback"
-    data-error-callback="recaptchaErrorCallback"
-    class="g-recaptcha"
-  />
+  <div class="g-recaptcha" />
 </template>
 
 <script>
@@ -53,24 +42,32 @@ export default {
       type: Number
     }
   },
+
+  computed: {
+    computedDataSize() {
+      return (this.dataSize || this.$recaptcha.size) || 'normal'
+    }
+  },
   beforeDestroy() {
     this.$recaptcha.destroy()
   },
 
   mounted() {
-    this.$recaptcha.init()
+    this.$recaptcha.init().then(() => {
+      this.$recaptcha.render(this, {
+        siteKey: this.siteKey || this.$recaptcha.siteKeyV2,
+        size: this.computedDataSize,
+        theme: this.dataTheme,
+        badge: this.dataBadge,
+        tabindex: this.dataTabindex
+      })
+    })
 
     this.$recaptcha.on('recaptcha-error', this.onError)
     this.$recaptcha.on('recaptcha-success', this.onSuccess)
     this.$recaptcha.on('recaptcha-expired', this.onExpired)
   },
 
-  computed: {
-    computedDataSize() {
-      return (this.dataSize || this.$recaptcha.size) || 'normal'
-    }
-  },
-
   methods: {
     onError(message) {
       return this.$emit('error', message)
diff --git a/package.json b/package.json
index a602d1b..2f3cea0 100755
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "dev": "nuxt example/both",
     "dev:v3": "nuxt example/v3",
     "dev:v2": "nuxt example/v2",
+    "dev:combined": "nuxt example/combined",
     "lint": "eslint lib test",
     "test": "yarn lint && jest",
     "release": "standard-version && git push --follow-tags && npm publish"
diff --git a/types/index.d.ts b/types/index.d.ts
index 1b09df1..eba8909 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -9,12 +9,12 @@ export interface ReCaptchaOptions {
   /**
    * Site key to send requests
    */
-  siteKey: string
+  siteKey: string | [string, string]
 
   /**
    * Version
    */
-  version: number
+  version?: number
 }
 
 export interface ReCaptchaInstance {

From eb78241a4cf4d2809b5df4864704d76a0fe5f8db Mon Sep 17 00:00:00 2001
From: tuxuuman <tuxuuman@gmail.com>
Date: Sun, 25 Apr 2021 04:13:48 +0500
Subject: [PATCH 2/2] fix: incorrect plugin and component destruction

This caused problems on reinitialization
---
 lib/plugin.js     | 6 ++++++
 lib/recaptcha.vue | 4 +++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/lib/plugin.js b/lib/plugin.js
index 3f157e0..57247fd 100644
--- a/lib/plugin.js
+++ b/lib/plugin.js
@@ -62,6 +62,8 @@ class ReCaptcha {
       if (badge) {
         badge.remove()
       }
+
+      delete window.grecaptcha;
     }
   }
 
@@ -165,6 +167,10 @@ class ReCaptcha {
     return this._eventBus.on(event, callback)
   }
 
+  off (event, callback) {
+    return this._eventBus.off(event, callback)
+  }
+
   reset (widgetId) {
     if (this.siteKeyV2 || typeof widgetId !== 'undefined') {
       window.grecaptcha.reset(widgetId)
diff --git a/lib/recaptcha.vue b/lib/recaptcha.vue
index ba33498..754c3ba 100644
--- a/lib/recaptcha.vue
+++ b/lib/recaptcha.vue
@@ -49,7 +49,9 @@ export default {
     }
   },
   beforeDestroy() {
-    this.$recaptcha.destroy()
+    this.$recaptcha.off('recaptcha-error', this.onError)
+    this.$recaptcha.off('recaptcha-success', this.onSuccess)
+    this.$recaptcha.off('recaptcha-expired', this.onExpired)
   },
 
   mounted() {