Vue 3 - Google reCaptcha implementeret på bare 2 minutter

Når vi bygger webapplikationer, har vi ofte brug for at beskytte vores applikationer mod bots og spam. Spammy bots, hackere og ondsindet injektionssoftware kan lave et rigtig grimt rod i vores applikationer, hvis vi ikke har den rette beskyttelse!

Hvordan forhindrer vi det? Ja... reCaptcha til undsætning!

Kort sagt er reCAPTCHA en gratis tjeneste fra Google, der hjælper med at beskytte webapplikationer mod spam og misbrug. Den kan hjælpe med at skelne mennesker fra bots, hvilket gør applikationer mere sikre. Det er en gratis tjeneste, som du kan tilmelde dig på få simple trin.

For at holde denne artikel kort og præcis, vil jeg ikke gå i dybden med hele tilmeldingsprocessen hos Google. Googles dokumentation vil hjælpe dig rigeligt med det.

Forudsætninger:

• Du skal have en Google-konto for at bruge reCaptcha
• API-nøgle - Du kan tilmelde dig her (https://developers.google.com/recaptcha/intro)
• En kørende Vue 3-applikation

Når du har tilmeldt dig og fået en API-nøgle, skal du muligvis tilføje dit domæne for at bruge den! Du kan tilføje dit domæne i admin-konsollen hos Google.

Vue 3 reCaptcha

Som artiklens titel antyder, kan vi nemt implementere dette i vores Vue 3-applikation. I dette eksempel bruger vi en pakke, der kan gøre arbejdet for os. Med den kan vi implementere reCaptcha-funktionaliteten på blot et par linjer kode.

I din terminal, kør følgende kommando:

Med Yarn: yarn add vue-recaptcha Med NPM: npm i vue-recaptcha

Når pakken er installeret, gå ind i dit IDE og Vue-projekt og opret en ny komponent. Med koden herunder har du et fungerende eksempel på en reCaptcha-komponent. Du skal bare tilføje din egen siteKey og selv håndtere, hvad der skal ske, når der opstår en fejl, og når captchaen er gyldig.

<template>
  <VueRecaptcha
    :sitekey="siteKey"
    :load-recaptcha-script="true"
    @verify="handleSuccess"
    @error="handleError"
  ></VueRecaptcha>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue';
import { VueRecaptcha } from 'vue-recaptcha';

export default defineComponent({
  name: 'ReCaptcha',
  components: {
    VueRecaptcha
  },
  setup() {
    const siteKey = computed(() => {
      return 'yourSiteAPIKey';
    });

    const handleError = () => {
      // Do some validation
    };

    const handleSuccess = (response: string) => {
     // Do some validation
    };

    return {
      handleSuccess,
      handleError,
      siteKey,
    };
  }
});
</script>

Der har du det - på blot et par linjer kode og ved at bruge den fantastiske pakke, kan du tilføje Google reCaptcha til din egen komponent. Dette er et meget basalt fungerende eksempel, men hvis du ønsker at ændre størrelse og stil, kommer den med nogle props, du kan sende til komponenten.

Gå over til dokumentationen for at lære mere om de props og metoder, du har til rådighed: https://github.com/DanSnow/vue-recaptcha#readme

Det var alt for nu!

Tak fordi du læste med, og jeg håber du kunne lide artiklen.