TPS
/
birzha-legalizasia-frontend
5
0
Fork 0
Code Issues 4 Pull Requests Projects 1 Releases Wiki Activity

recaptcha v2

This commit is contained in:
saparatayev 2022-12-01 12:08:50 +05:00
parent 929dc304ff
commit e8aea0ece7
2 changed files with 63 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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"

90
src/views/register/Main.vue
View File

@ -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 reCaptchaKey = import.meta.env.VITE_RECAPTCHA_KEY;
// const reCaptchaSecret = import.meta.env.VITE_RECAPTCHA_SECRET;
// 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 () => {
recaptchaInstance.value = await load(reCaptchaKey);
formData.recaptchaToken = await recaptchaInstance.value.execute(RECAPTCHA_ACTION);
}
const handleError = (error) => {
console('recaptcha error');
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 === "") {
refreshInFiveSeconds();
}
// if(formData.recaptchaToken === "") {
// 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();
console.log("recaptcha token: " + formData.recaptchaToken);
recaptchaInstance.value.showBadge();
// await recaptcha();
// console.log("recaptcha token: " + formData.recaptchaToken);
// recaptchaInstance.value.showBadge();
});
onBeforeUnmount(async () => {
recaptchaInstance.value.hideBadge();
});
// onBeforeUnmount(async () => {
// recaptchaInstance.value.hideBadge();
// });
</script>
<style scoped>