Vue Recaptcha

Hi, In this write I want to give some examples about ‘How Google Recaptcha works’ and ‘How to make invisible or customizable recaptcha’
Step 1 — Let’s start with installing package. v2.0.1
npm i vue-recaptcha

You can prefer to install with or without package. (When I started with this I used vue-recaptchav2.0.1)

On, structural design I create a new component called reCaptcha. First start with Create a Google reCaptcha with using this link.
! Don’t forget to save client token after creation is completed in this page. Also, You can store this token to .env file as a VUE_APP_RECAPTCHAKEY.

Making a ReCaptcha Component (Google Iframe)

Choosing reCaptcha v2 supports iframe with provide as a Google service. Add this key to sitekey as a property of <vue-recaptcha> component. Also, create a function called verifyMethod(token). Add this function as a component property. The function verifyMethod is a callback function, called as a variable to access generated token. Find more details about Vue Recaptcha properties.

Making a reCaptcha Customizable Component

I started with adding a new html template for given design. Important thing is only invisible reCaptcha’s can be customizable for theme and reCaptcha v3 is for enterprise, use v2 instead.

Choose for customizable reCaptcha

<… Creating a Checkbox…>
<span> I'm not a Robot </span>
</div>
<! - Add VueRecaptcha Component as invisible inside of the container (You can hide with using css) - >
<VueRecaptcha
ref="recaptcha"
size="invisible"
:sitekey="recaptchaSiteKey"
@verify="verifyMethod"/>
</template>
<script>
import { VueRecaptcha } from "vue-recaptcha";
export default {
components: { VueRecaptcha },
setup() { 
const recaptchaSiteKey = process.env.VUE_APP_RECAPTCHAKEY 
}
methods: {
async triggerCaptcha() {
const {$refs: { recaptcha: captcha }} = this;
const { grecaptcha: recaptchaApi } = window;
const recaptcha = { …captcha };
await recaptchaApi.ready(() => recaptchaApi.execute(recaptcha.widgetId);
},
verifyMethod(token) {
if (token) {
this.defaultValue = true;
console.log(token)
}}

I started with adding a new checkbox component for given design. Checkbox onClick action must be triggerCaptcha() method. After survey is completed, captcha token received from google.com/recaptcha/api2/ response . verifyMethod is working as a request callback, you can access, store or mutate this given token inside of the verifyMethod.

I googled custom reCAPTCHA but I didn’t find a best practices. So I started to write about it, Hope this helps