site_logiciels/components/Layout/Captcha.vue

<template>
  <div class="d-flex flex-column">
    <vue-hcaptcha
      :sitekey="siteKey"
      @verify="onVerify"
      @expired="onExpire"
      @challenge-expired="onChallengeExpire"
      @error="onError"
    />
    <v-checkbox
      v-model="honeyPotChecked"
      :rules="[validateCaptchaState]"
      class="hidden-ctrl"
    />
  </div>
</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éder à 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>