recaptcha v2

package.json

@@ -40,6 +40,7 @@
     "tom-select": "^1.7.5",
     "vue": "^3.2.25",
     "vue-i18n": "9",
+    "vue-recaptcha": "^2.0.3",
     "vue-router": "4",
     "xlsx": "^0.16.9",
     "zoom-vanilla.js": "^2.0.6"

src/views/register/Main.vue

@@ -109,9 +109,17 @@
 
             </div>
 
+            <div class="intro-x mt-5 xl:mt-8 text-primary xl:text-left">
+              <VueRecaptcha
+                :sitekey="reCaptchaV2Key"
+                :load-recaptcha-script="true"
+                @verify="handleSuccess"
+                @error="handleError"
+              ></VueRecaptcha>
+            </div>
             <div class="intro-x mt-5 xl:mt-8 text-center xl:text-left">
               <button class="btn btn-primary py-3 px-4 xl:mr-3 align-top w-full custom-btns"
-                @click.prevent="onRegister" :disabled="isLoading">
+                @click.prevent="onRegister" :disabled="isLoading || !recaptchaVerified">
                 {{ $t("SIGN_UP") }}
                 <LoadingIcon icon="oval" color="white" class="w-4 h-4 ml-2" v-if="isLoading" />
               </button>
@@ -158,12 +166,15 @@ import LogoInfo from "@/components/logo-info/Main.vue";
 import Lang from "@/components/lang/Main.vue";
 import i18nn from "@/i18n";
 import { ACCOUNT_TYPE_BUSINESS, RECAPTCHA_SCORE_MIN, RECAPTCHA_ACTION } from "@/helpers";
-import { load } from 'recaptcha-v3';
+// import { load } from 'recaptcha-v3';
 import { fetchWrapper } from "@/api";
+import { VueRecaptcha } from 'vue-recaptcha';
 
 const reCaptchaUrl = import.meta.env.VITE_RECAPTCHA_URL;
-const reCaptchaSecret = import.meta.env.VITE_RECAPTCHA_SECRET;
+// const reCaptchaSecret = import.meta.env.VITE_RECAPTCHA_SECRET;
-const reCaptchaKey = import.meta.env.VITE_RECAPTCHA_KEY;
+// const reCaptchaKey = import.meta.env.VITE_RECAPTCHA_KEY;
+const reCaptchaV2Key = import.meta.env.VITE_RECAPTCHA_V2_KEY;
+const reCaptchaV2Secret = import.meta.env.VITE_VITE_RECAPTCHA_V2_SECRET;
 
 const countriesStore = useCountriesStore();
 const alertStore = useAlertStore();
@@ -171,6 +182,7 @@ const alertStore = useAlertStore();
 const { countries } = storeToRefs(countriesStore);
 
 const isLoading = ref(false);
+const recaptchaVerified = ref(false);
 
 const formData = reactive({
   firstname: "",
@@ -179,15 +191,37 @@ const formData = reactive({
   password: "",
   country: "",
   accountType: "",
-  recaptchaToken: ""
+  // recaptchaToken: ""
 });
 
 const recaptchaInstance = ref(null);
 
-const recaptcha = async () => {
+const handleError = (error) => {
-  recaptchaInstance.value = await load(reCaptchaKey);
+  console('recaptcha error');
-  formData.recaptchaToken = await recaptchaInstance.value.execute(RECAPTCHA_ACTION);
+  console(error);
-}
+  recaptchaVerified.value = false;
+  refreshInFiveSeconds();
+  alert('Recaptcha Error: The page will be refreshed in 5 seconds.');
+};
+
+const handleSuccess = async (response) => {
+  console.log('recaptcha response');
+  console.log(response);
+
+  // let recaptchaResponse = await fetchWrapper.post(reCaptchaUrl, {
+  //   secret: reCaptchaV2Secret,
+  //   response: response
+  // });
+
+  // console.log(recaptchaResponse);
+
+  recaptchaVerified.value = true;
+};
+
+// const recaptcha = async () => {
+//   recaptchaInstance.value = await load(reCaptchaKey);
+//   formData.recaptchaToken = await recaptchaInstance.value.execute(RECAPTCHA_ACTION);
+// }
 
 const rules = {
   firstname: {
@@ -235,9 +269,9 @@ const onRegister = async () => {
   validate.value.$touch();
 
   // recaptcha connection error or other
-  if(formData.recaptchaToken === "") {
+  // if(formData.recaptchaToken === "") {
-    refreshInFiveSeconds();
+  //   refreshInFiveSeconds();
-  }
+  // }
 
   // if form is valid
   if (!validate.value.$invalid) {
@@ -252,7 +286,7 @@ const onRegister = async () => {
 
     isLoading.value = true;
 
-    let recaptchaResponse = null;
+    // let recaptchaResponse = null;
 
     // try {
     //   // validate reCaptcha
@@ -288,20 +322,20 @@ const onRegister = async () => {
   }
 };
 
-const recaptchaVerifiedSuccessfully = (recaptchaResponse) => {
+// const recaptchaVerifiedSuccessfully = (recaptchaResponse) => {
 
-  if(recaptchaResponse["success"]) {
+//   if(recaptchaResponse["success"]) {
     
-    if(recaptchaResponse["score"] > RECAPTCHA_SCORE_MIN) {
+//     if(recaptchaResponse["score"] > RECAPTCHA_SCORE_MIN) {
 
-      return recaptchaResponse["action"] === RECAPTCHA_ACTION;
+//       return recaptchaResponse["action"] === RECAPTCHA_ACTION;
-    }
+//     }
 
-    return false;
+//     return false;
-  }
+//   }
 
-  return false;
+//   return false;
-}
+// }
 
 const onLogin = () => router.push({ path: "/login" });
 
@@ -325,14 +359,14 @@ onBeforeMount(async () => {
   // if (tm !== undefined) formData.country = tm.id
 
   // get recaptcha token
-  await recaptcha();
+  // await recaptcha();
-  console.log("recaptcha token: " + formData.recaptchaToken);
+  // console.log("recaptcha token: " + formData.recaptchaToken);
-  recaptchaInstance.value.showBadge();
+  // recaptchaInstance.value.showBadge();
 });
 
-onBeforeUnmount(async () => {
+// onBeforeUnmount(async () => {
-  recaptchaInstance.value.hideBadge();
+//   recaptchaInstance.value.hideBadge();
-});
+// });
 </script>
 
 <style scoped>