Доброго времени суток.
Необходимо подключить google reCaptcha v3 на nuxt 3.
Подключить на всём сайте, например как указано в
гайде не является проблемой.
Хотя стоит учесть что в гайде скрыта иконка и это нарушает политику гугл и права человека что может, как минимум, привести к блокировке использования рекаптчи.
Не хотелось бы видеть иконку на каждой странице, да и сбор данных скриптом тоже не вызывает восторга.
Логичное решение - подключать рекаптчу только там, где она требуется.
Идём дальше, я написал композабл который имеет методы initReCaptcha и executeRecaptcha.
И всё работает, каптча подключается только на страницах где вызван метод initReCaptcha(), при переходе по ссылке каптча появляется только там, где нужно.
И казалось бы что всё идеально, но нет.
Когда мы
переходим на другую страницу с помощью navigateTo(), если рекаптчи небыло - она появляется,
но вот если она уже есть, куда бы мы не перешли она не исчезнет.
Я пытался полностью удалять данные о рекаптча перед переходом, но тогда при переходе через navigateTo() она переставала инициироваться.
В композабле мы имеем:
import {VueReCaptcha} from 'vue-recaptcha-v3';
import {useReCaptcha} from 'vue-recaptcha-v3';
export const useGoogleReCaptcha = () => {
const recaptchaInstance = ref(null);
const nuxtApp = useNuxtApp();
const runtimeConfig = useRuntimeConfig();
const initReCaptcha = () => {
if (process.client && !nuxtApp.$recaptcha) {
nuxtApp.vueApp.use(VueReCaptcha, {
siteKey: runtimeConfig.public.reCaptchaClientId,
});
}
recaptchaInstance.value = useReCaptcha();
};
/*
иной код
*/
return {initReCaptcha, executeRecaptcha, deactivateReCaptcha}
};
Инициация происходит в странице/компоненте:
onMounted(async () => {
await initReCaptcha();
});
Основной вопрос:
Как правильно полностью деактивировать рекаптчу, включая скрипт выполнения?
Так-же буду рад другим советам по данной теме.
Средний
