Add reCAPTCHA support and update captcha provider handling

api/.env.example

@@ -72,6 +72,9 @@ STRIPE_TEST_DEFAULT_PRICING_YEARLY=
 H_CAPTCHA_SITE_KEY=
 H_CAPTCHA_SECRET_KEY=
 
+RE_CAPTCHA_SITE_KEY=
+RE_CAPTCHA_SECRET_KEY=
+
 MUX_WORKSPACE_ID=
 MUX_API_TOKEN=
 

api/app/Http/Requests/AnswerFormRequest.php

@@ -8,6 +8,7 @@
 use App\Rules\StorageFile;
 use App\Rules\ValidHCaptcha;
 use App\Rules\ValidPhoneInputRule;
+use App\Rules\ValidReCaptcha;
 use App\Rules\ValidUrl;
 use App\Service\Forms\FormLogicPropertyResolver;
 use Illuminate\Foundation\Http\FormRequest;
@@ -118,7 +119,11 @@ public function rules()
 
         // Validate hCaptcha
         if ($this->form->use_captcha) {
-            $this->requestRules['h-captcha-response'] = [new ValidHCaptcha()];
+            if ($this->form->captcha_provider === 'recaptcha') {
+                $this->requestRules['g-recaptcha-response'] = [new ValidReCaptcha()];
+            } elseif ($this->form->captcha_provider === 'hcaptcha') {
+                $this->requestRules['h-captcha-response'] = [new ValidHCaptcha()];
+            }
         }
 
         // Validate submission_id for edit mode

api/app/Http/Requests/UserFormRequest.php

@@ -118,6 +118,7 @@ public function rules()
             'can_be_indexed' => 'boolean',
             'password' => 'sometimes|nullable',
             'use_captcha' => 'boolean',
+            'captcha_provider' => ['sometimes', Rule::in(['recaptcha', 'hcaptcha'])],
 
             // Custom SEO
             'seo_meta' => 'nullable|array',

api/app/Models/Forms/Form.php

@@ -82,6 +82,7 @@ class Form extends Model implements CachableAttributes
         'submitted_text',
         'redirect_url',
         'use_captcha',
+        'captcha_provider',
         'closes_at',
         'closed_text',
         'max_submissions_count',

api/app/Rules/ValidReCaptcha.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Rules;
+
+use Closure;
+use Illuminate\Contracts\Validation\ImplicitRule;
+use Illuminate\Support\Facades\Http;
+
+class ValidReCaptcha implements ImplicitRule
+{
+    public const RECAPTCHA_VERIFY_URL = 'https://www.google.com/recaptcha/api/siteverify';
+
+    private $error = 'Invalid CAPTCHA. Please prove you\'re not a bot.';
+
+    /**
+     * Determine if the validation rule passes.
+     *
+     * @param  string  $attribute
+     * @param  mixed  $value
+     * @return bool
+     */
+    public function passes($attribute, $value)
+    {
+        if (empty($value)) {
+            $this->error = 'Please complete the captcha.';
+
+            return false;
+        }
+
+        return Http::asForm()->post(self::RECAPTCHA_VERIFY_URL, [
+            'secret' => config('services.re_captcha.secret_key'),
+            'response' => $value,
+        ])->json('success');
+    }
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        if (!$this->passes($attribute, $value)) {
+            $fail($this->message());
+        }
+    }
+
+    /**
+     * Get the validation error message.
+     *
+     * @return string
+     */
+    public function message()
+    {
+        return $this->error;
+    }
+}

api/config/services.php

@@ -40,6 +40,11 @@
         'secret_key' => env('H_CAPTCHA_SECRET_KEY'),
     ],
 
+    're_captcha' => [
+        'site_key' => env('RE_CAPTCHA_SITE_KEY'),
+        'secret_key' => env('RE_CAPTCHA_SECRET_KEY'),
+    ],
+
     'canny' => [
         'api_key' => env('CANNY_API_KEY'),
     ],

api/database/migrations/2024_03_21_000000_add_captcha_provider_to_forms_table.php

@@ -0,0 +1,21 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class () extends Migration {
+    public function up()
+    {
+        Schema::table('forms', function (Blueprint $table) {
+            $table->string('captcha_provider')->default('hcaptcha')->after('use_captcha');
+        });
+    }
+
+    public function down()
+    {
+        Schema::table('forms', function (Blueprint $table) {
+            $table->dropColumn('captcha_provider');
+        });
+    }
+};

api/tests/Feature/Forms/FormCaptchaTest.php

@@ -1,10 +1,11 @@
 <?php
 
-it('create form with captcha and raise validation issue', function () {
+it('create form with hcaptcha and raise validation issue', function () {
     $user = $this->actingAsUser();
     $workspace = $this->createUserWorkspace($user);
     $form = $this->createForm($user, $workspace, [
         'use_captcha' => true,
+        'captcha_provider' => 'hcaptcha',
     ]);
 
     $this->postJson(route('forms.answer', $form->slug), [])
@@ -18,3 +19,23 @@
             ],
         ]);
 });
+
+it('create form with recaptcha and raise validation issue', function () {
+    $user = $this->actingAsUser();
+    $workspace = $this->createUserWorkspace($user);
+    $form = $this->createForm($user, $workspace, [
+        'use_captcha' => true,
+        'captcha_provider' => 'recaptcha',
+    ]);
+
+    $this->postJson(route('forms.answer', $form->slug), [])
+        ->assertStatus(422)
+        ->assertJson([
+            'message' => 'Please complete the captcha.',
+            'errors' => [
+                'g-recaptcha-response' => [
+                    'Please complete the captcha.',
+                ],
+            ],
+        ]);
+});

client/.env.example

@@ -6,4 +6,5 @@ NUXT_PUBLIC_CRISP_WEBSITE_ID=
 NUXT_PUBLIC_ENV=
 NUXT_PUBLIC_GOOGLE_ANALYTICS_CODE=
 NUXT_PUBLIC_H_CAPTCHA_SITE_KEY=
+NUXT_PUBLIC_RE_CAPTCHA_SITE_KEY=
 NUXT_API_SECRET=secret

client/components/forms/RecaptchaV2.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div
+      ref="recaptchaContainer"
+      class="g-recaptcha"
+      :data-sitekey="sitekey"
+      :data-theme="theme"
+    />
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  sitekey: {
+    type: String,
+    required: true
+  },
+  theme: {
+    type: String,
+    default: 'light'
+  }
+})
+
+const emit = defineEmits(['verify', 'expired'])
+const recaptchaContainer = ref(null)
+
+onMounted(async () => {
+  if (!document.querySelector('script[src*="recaptcha/api.js"]')) {
+    const script = document.createElement('script')
+    script.src = 'https://www.google.com/recaptcha/api.js'
+    script.async = true
+    script.defer = true
+    document.head.appendChild(script)
+
+    await new Promise((resolve) => {
+      script.onload = resolve
+    })
+  }
+
+  // Wait for grecaptcha to be available
+  await new Promise((resolve) => {
+    const checkGrecaptcha = () => {
+      if (window.grecaptcha?.ready) {
+        resolve()
+      } else {
+        setTimeout(checkGrecaptcha, 100)
+      }
+    }
+    checkGrecaptcha()
+  })
+
+  window.recaptchaCallback = (token) => {
+    emit('verify', token)
+  }
+
+  window.recaptchaExpiredCallback = () => {
+    emit('expired')
+  }
+
+  try {
+    window.grecaptcha.render(recaptchaContainer.value, {
+      sitekey: props.sitekey,
+      theme: props.theme,
+      callback: 'recaptchaCallback',
+      'expired-callback': 'recaptchaExpiredCallback'
+    })
+  } catch (error) {
+    console.error('Error rendering reCAPTCHA:', error)
+  }
+})
+
+onBeforeUnmount(() => {
+  delete window.recaptchaCallback
+  delete window.recaptchaExpiredCallback
+})
+</script>

client/components/open/forms/OpenForm.vue

@@ -78,17 +78,31 @@
     <!-- Captcha -->
     <template v-if="form.use_captcha && isLastPage">
       <div class="mb-3 px-2 mt-2 mx-auto w-max">
-        <vue-hcaptcha
-          ref="hcaptcha"
-          :sitekey="hCaptchaSiteKey"
-          :theme="darkMode?'dark':'light'"
-          @opened="setMinHeight(500)"
-          @closed="setMinHeight(0)"
-        />
-        <has-error
-          :form="dataForm"
-          field-id="h-captcha-response"
-        />
+        <template v-if="form.captcha_provider === 'recaptcha'">
+          <RecaptchaV2
+            :sitekey="recaptchaSiteKey"
+            :theme="darkMode ? 'dark' : 'light'"
+            @verify="onRecaptchaVerify"
+            @expired="onRecaptchaExpired"
+          />
+          <has-error
+            :form="dataForm"
+            field-id="g-recaptcha-response"
+          />
+        </template>
+        <template v-if="form.captcha_provider === 'hcaptcha'">
+          <vue-hcaptcha
+            ref="hcaptcha"
+            :sitekey="hCaptchaSiteKey"
+            :theme="darkMode?'dark':'light'"
+            @opened="setMinHeight(500)"
+            @closed="setMinHeight(0)"
+          />
+          <has-error
+            :form="dataForm"
+            field-id="h-captcha-response"
+          />
+        </template>
       </div>
     </template>
 
@@ -214,6 +228,9 @@ export default {
     hCaptchaSiteKey() {
       return useRuntimeConfig().public.hCaptchaSiteKey
     },
+    recaptchaSiteKey() {
+      return useRuntimeConfig().public.recaptchaSiteKey
+    },
     /**
      * Create field groups (or Page) using page breaks if any
      */
@@ -369,8 +386,13 @@ export default {
       if (!this.isAutoSubmit && this.formPageIndex !== this.fieldGroups.length - 1) return
 
       if (this.form.use_captcha && import.meta.client) {
-        this.dataForm['h-captcha-response'] = document.getElementsByName('h-captcha-response')[0].value
-        this.$refs.hcaptcha.reset()
+        if (this.form.captcha_provider === 'recaptcha') {
+          this.dataForm['g-recaptcha-response'] = document.getElementsByName('g-recaptcha-response')[0]?.value
+          window.grecaptcha?.reset()
+        } else if (this.form.captcha_provider === 'hcaptcha') {
+          this.dataForm['h-captcha-response'] = document.getElementsByName('h-captcha-response')[0].value
+          this.$refs.hcaptcha.reset()
+        }
       }
 
       if (this.form.editable_submissions && this.form.submission_id) {
@@ -593,6 +615,12 @@ export default {
       } catch (e) {
         console.error(e)
       }
+    },
+    onRecaptchaVerify(token) {
+      this.dataForm['g-recaptcha-response'] = token
+    },
+    onRecaptchaExpired() {
+      this.dataForm['g-recaptcha-response'] = null
     }
   }
 }

client/components/open/forms/components/form-components/FormSecurityAccess.vue

@@ -79,22 +79,23 @@
       label="Bot Protection"
       help="Protects your form from spam and abuse with a captcha"
     />
+    <FlatSelectInput
+      v-if="form.use_captcha"
+      name="captcha_provider"
+      :form="form"
+      :options="captchaOptions"
+      class="mt-4"
+      label="Select a captcha provider"
+    />
   </SettingsSection>
 </template>
 
-<script>
-import { useWorkingFormStore } from '../../../../../stores/working_form'
+<script setup>
+const workingFormStore = useWorkingFormStore()
+const { content: form } = storeToRefs(workingFormStore)
 
-export default {
-  components: { },
-  props: {},
-  setup () {
-    const workingFormStore = useWorkingFormStore()
-    return {
-      workingFormStore,
-      form: storeToRefs(workingFormStore).content,
-      crisp: useCrisp()
-    }
-  }
-}
+const captchaOptions = [
+  { name: 'reCAPTCHA', value: 'recaptcha' },
+  { name: 'hCaptcha', value: 'hcaptcha' },
+]
 </script>

client/runtimeConfig.js

@@ -19,6 +19,7 @@ export default {
     appUrl: process.env.NUXT_PUBLIC_APP_URL || '',
     env: process.env.NUXT_PUBLIC_ENV || 'local',
     hCaptchaSiteKey: process.env.NUXT_PUBLIC_H_CAPTCHA_SITE_KEY || null,
+    recaptchaSiteKey: process.env.NUXT_PUBLIC_RE_CAPTCHA_SITE_KEY || null,
     gtmCode: process.env.NUXT_PUBLIC_GTM_CODE || null,
     amplitudeCode: process.env.NUXT_PUBLIC_AMPLITUDE_CODE || null,
     crispWebsiteId: process.env.NUXT_PUBLIC_CRISP_WEBSITE_ID || null,