Nuxt 3 e Cloudflare – ██FR█████ █INTELL███████████

This content originally appeared on DEV Community and was authored by Helton Carlos Brito Silva

O Cloudflare Turnstile é uma solução leve, sem CAPTCHA visual, projetada para validar formulários e proteger aplicações contra bots. No Nuxt 3, sua integração pode ser feita de forma simples por meio do módulo nuxt-turnstile.

1º Instalar o módulo

Execute no terminal dentro do projeto:

npm install nuxt-turnstile
ou
yarn add nuxt-turnstile

2º Configuração no cloudflare

Para gerar suas chaves, acesse o Cloudflare, crie uma conta gratuita e vá até a aba Turnstile. Clique em Adicionar Widget e, em seguida, será exibida a página de configuração do widget.

Adicione o nome do seu site ou projeto e, em seguida, clique em Adicionar nomes de host para cadastrar o domínio da sua aplicação.
Se você ainda não possui um domínio, pode criar um gratuitamente em um serviço de hospedagem e utilizá-lo apenas para testes. Após isso, insira o domínio no campo indicado e finalize clicando no botão Adicionar.

Exemplo:

Feito isso, irá gerar duas chaves:

3º Criando config no seu projeto

Crie um arquivo .env caso não tenha e adicione suas duas chaves.
Os valores a baixo serão apenas ilustrativos:

TURNSTILE_SITE_KEY = '1x00000000000000000000AA'
TURNSTILE_SECRET_KEY = '0x4XXXXXXXXXXXXXXS_aacaDSD'

Vá ate a arquivo nuxt.config.ts.

export default defineNuxtConfig({
  modules: ["@nuxtjs/turnstile"],

  runtimeConfig: {
    turnstile: {
      secretKey: process.env.TURNSTILE_SECRET_KEY, 
    },
    public: {
      turnstile: {
        siteKey: process.env.TURNSTILE_SITE_KEY, 
      }
    }
  }
})

Localize o componente no qual deseja integrar o Cloudflare Turnstile. Um exemplo comum é em formulários simples, como login ou cadastro:

<script setup lang="ts">
import { ref } from 'vue'

const form = ref({
  email: '',
  password: ''
})

const turnstileToken = ref('')

const handleSubmit = () => {
  if (!turnstileToken.value) {
    alert('Valide o Turnstile antes de enviar!')
    return
  }

  console.log('Formulário enviado:', {
    ...form.value,
    turnstileToken: turnstileToken.value
  })
}
</script>

<template>
  <form
    class="max-w-sm mx-auto space-y-6 p-6 border rounded-xl shadow-lg bg-white"
    @submit.prevent="handleSubmit"
  >
    <h2 class="text-2xl font-bold text-center">Login</h2>

    <div>
      <label class="block text-sm font-medium mb-1">Email</label>
      <input
        v-model="form.email"
        type="email"
        placeholder="E-mail"
        class="w-full px-3 py-2 border rounded-md focus:ring focus:ring-blue-400"
        required
      />
    </div>

    <div>
      <label class="block text-sm font-medium mb-1">Senha</label>
      <input
        v-model="form.password"
        type="password"
        placeholder="Password"
        class="w-full px-3 py-2 border rounded-md focus:ring focus:ring-blue-400"
        required
      />
    </div>

    <NuxtTurnstile
      v-model="turnstileToken"
      :options="{
        theme: 'auto',
        size: 'normal',
        action: 'login',
        language: 'pt-BR'
      }"
    />

    <button
      type="submit"
      class="w-full py-2 px-4 bg-blue-600 text-white font-semibold rounded-lg shadow hover:bg-blue-700 transition"
    >
      Entrar
    </button>
  </form>
</template>

Como deve aparecer:

Para validar o token recebido do front-end, você precisa da key secret no lado do seu projeto back-end.

Referência:

https://nuxt.com/modules/turnstile
https://github.com/nuxt-modules/turnstile

This content originally appeared on DEV Community and was authored by Helton Carlos Brito Silva