site_logiciels/components/Layout/Captcha.vue

<template>
  <vue-hcaptcha
    :sitekey="siteKey"
    @verify="onVerify"
    @expired="onExpire"
    @challenge-expired="onChallengeExpire"
    @error="onError"
  />
  <v-checkbox
    v-model="honeyPotChecked"
    :rules="[validateCaptchaState]"
    class="hidden-ctrl"
  />
</template>

<script setup lang="ts">
import VueHcaptcha from "@hcaptcha/vue3-hcaptcha";

const runtimeConfig = useRuntimeConfig()
const siteKey = runtimeConfig.public.hCaptchaSiteKey

const verified: Ref<boolean> = ref(false);
const expired: Ref<boolean> = ref(false);
const token: Ref<string> = ref("");
const eKey: Ref<string> = ref("");
const error: Ref<string> = ref("");

// La case étant masquée, si elle est cochée, alors on peut en déduire
// qu'on a affaire un robot (voir mécanisme du honey pot)
const honeyPotChecked: Ref<boolean> = ref(false)

const emit = defineEmits(['update'])

const validateCaptchaState = () =>
  verified.value && !honeyPotChecked.value ||
  "Veuillez procédez à la vérification";

function onVerify(tokenStr: string, ekey: string) {
  verified.value = true;
  token.value = tokenStr;
  eKey.value = ekey;
  emit('update', true)
}

function onExpire() {
  verified.value = false;
  token.value = '';
  eKey.value = '';
  expired.value = true;
}

function onChallengeExpire() {
  verified.value = false;
  token.value = '';
  eKey.value = '';
  expired.value = true;
}

function onError(err: string) {
  token.value = '';
  eKey.value = '';
  error.value = err;
  console.log(`Error: ${err}`);

  if (process.dev) {
    console.log('Dev mode: force captcha validation')
    verified.value = true;
  }
}
</script>

<style scoped lang="scss">
.hidden-ctrl {
  :deep(.v-input__control) {
    display: none;
  }
}
</style>