Vue.js CAPTCHA Plugin

The following tutorial will guide you on how to integrate the TrustCaptcha CAPTCHA solution into your Go backend to retrieve and evaluate the CAPTCHA verification result.

Preparation

You should have already completed the following steps before you start with CAPTCHA widget integration in your in Vue.js frontend.

Read the basic Information: For a basic overview, please read the get started guide. We also recommend that you familiarize yourself with the technical concept of TrustCaptcha.
Existing CAPTCHA: If you don’t have a CAPTCHA yet, sign in or create a new user account. Then create a new CAPTCHA.
Existing Vue.js website: You need a Vue.js website in which you want to integrate the TrustCaptcha CAPTCHA widget.

Follow the steps below to integrate the TrustCaptcha CAPTCHA widget into your Vue.js frontend

1. Add dependency

Add the CAPTCHA dependency to your Vue.js project.

npm i @trustcomponent/trustcaptcha-vue

2. Fix warnings

To prevent Vue warnings, you should add TrustCaptcha as a custom component.

export default defineConfig({
  ...
  plugins: [
    ...
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.includes('trustcaptcha'),
        }
      }
    }),
  ],
  ...
})

3. Add component

Add the TrustcaptchaComponent to the app.

import {TrustcaptchaComponent} from "@trustcomponent/trustcaptcha-vue";

createApp(App).use(TrustcaptchaComponent).mount('#app')

Insert the trustcaptcha-component into your HTML. It is important that the widget is located within a form element. Then set the required site-key. You can find this key in your CAPTCHA settings. Information on all other properties can be found in the CAPTCHA widget overview.

Important: Once the CAPTCHA has been solved, you will receive a so-called verification token. This is available as a hidden input field with the name tc-verification-token. You can also get the token via the JavaScript event captchaSolved of the trustcaptcha component. Then send the verification token to your backend and validate it there. You can find out more about this in result validation overview.

<form>

  <!-- your input fields -->

  <trustcaptcha-component
    sitekey="<your_site_key>"
    @captchaSolved="handleSuccess($event.detail)"
    @captchaFailed="handleError($event.detail)"
  ></trustcaptcha-component>

  <!-- further input fields / submit button -->

</form>

Example implementation

The following example shows a possible implementation of the TrustCaptcha CAPTCHA widget in a Vue.js frontend.

The complete example including source code can be found on Github.

App.vue
apiService.js

<script>

import ApiService from "./apiService";

export default {
  data() {
    return {
      verificationResult: null,
      form: {
        message: '',
        verificationToken: null
      }
    };
  },
  methods: {
    solved(verificationToken) {
      console.log(`Verification-token: ${verificationToken}`);
      this.form.verificationToken = verificationToken;
    },
    failed(error) {
      console.error(error.message);
    },
    handleSubmit() {
      ApiService.postApi(this.form.verificationToken).then(verificationResult => this.verificationResult = verificationResult);
    },
    resetCaptcha() {
      this.$refs.trustcaptchaRef.reset();
      this.form.message = '';
      this.verificationResult = null;
    }
  }
};

</script>

<template>
  <div class="flex py-24 justify-center h-screen">
    <div class="w-full max-w-lg space-y-4">

      <img alt="Vue logo" src="./assets/logo.svg" width="400" />
      <h1 class="text-3xl font-bold">Vue Sample</h1>
      Try Trustcaptcha.

      <br />

      <form class="space-y-4" @submit.prevent="handleSubmit">
        <div>
          <label for="message" class="block text-sm font-medium leading-6 text-gray-900">Message</label>
          <div class="mt-1">
            <textarea rows="4" name="message" id="message" placeholder="Write a message ..." v-model="form.message" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"></textarea>
          </div>
        </div>

        <trustcaptcha-component
            ref="trustcaptchaRef"
            sitekey="<your_site_key>"
            language="en"
            theme="light"
            @captchaSolved="solved($event.detail)"
            @captchaFailed="failed($event.detail)"
        ></trustcaptcha-component>

        <button type="submit" class="w-full rounded-md bg-green-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-green-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 disabled:opacity-60 disabled:hover:bg-green-500" :disabled="!form.verificationToken || verificationResult">Send message</button>
      </form>

      <div v-if="verificationResult" class="space-y-4">
        <div class="rounded-md bg-green-50 p-4 border border-green-500">
          <strong>Message: </strong>{{ form.message }}<br>
          <strong>Passed: </strong>{{ verificationResult.verificationPassed }}<br>
          <strong>Reason: </strong>{{ verificationResult.reason }}<br>
          <strong>Score: </strong>{{ verificationResult.score }}<br>
        </div>
        <button type="button" class="w-full rounded-md bg-blue-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500" @click="resetCaptcha">Reset captcha</button>
      </div>

    </div>
  </div>
</template>

export default {
    postApi(verificationToken) {
        const url = 'http://localhost:8080/api/example';
        const options = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ verificationToken }),
        };

        return fetch(url, options)
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            });
    },
};

Next steps

Once you have integrated the TrustCaptcha widget into your frontend, please remember to check the verification token on the server side and evaluate the CAPTCHA result. You can find more information on this in result validation overview. We also recommend that you familiarize yourself with the following topics:

Security rules: You can find many security settings for your CAPTCHA in the CAPTCHA settings. These include, for example, authorized websites, CAPTCHA bypass for specific IP addresses, bypass keys, IP based blocking, geoblocking, individual difficulty and duration of the CAPTCHA, and much more. Learn more about the security rules.
Privacy & GDPR compliance: Include a passage in your privacy policy that refers to the use of TrustCaptcha. We also recommend that you enter into a data processing agreement with us to stay GDPR-compliant. Learn more about data protection.
Accessibility & UX: Customize TrustCaptcha to your website so that your website is as accessible as possible and offers the best possible user experience. More about accessibility.
Testing: If you use automated testing, make sure that the CAPTCHA does not block it. Learn more about testing.