CD
Cloudflare Developers•3mo ago
ldespe

Problem Recaptcha NuxtJs/Turnstile

I have tried to use a Turnstile with cloudfare on my portfolio with my contact form. I use NuxtJs (no Nextjs) and I have a warning on my console which says : "he resource was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally. " My validateTurnstile.ts : 
// server/api/validateTurnstile.ts

export default defineEventHandler(async (event) => {
  const { token } = await readBody(event)
  
  if (!token) {

    throw createError({
      statusCode: 422,
      statusMessage: 'Token not provided.',
    })
  }
  else{
    console.log(token)
  }

  return await verifyTurnstileToken(token)
})
// server/api/validateTurnstile.ts

export default defineEventHandler(async (event) => {
  const { token } = await readBody(event)
  
  if (!token) {

    throw createError({
      statusCode: 422,
      statusMessage: 'Token not provided.',
    })
  }
  else{
    console.log(token)
  }

  return await verifyTurnstileToken(token)
})
5 Replies
ldespe
ldespeOP•3mo ago
And i have forgotten one thing. A message appears on my recpatcha : " test only" My nuxt.config.ts : 
import { defineNuxtConfig } from 'nuxt/config';

export default defineNuxtConfig({
  modules: [
    "@nuxt/image", 
    '@vesp/nuxt-fontawesome', 
    'nuxt-swiper', 
    '@nuxtjs/turnstile',
    
  ],

  fontawesome: {
    icons: {
      solid: ['envelope', 'close', 'bars'],
      brands: ['instagram', 'linkedin', 'github']
    }
  },

  build: {
    transpile: ['@fortawesome/vue-fontawesome']
  },

  app: {
    head: {
      link: [
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;500&display=swap'
        }
      ]
    }
  },

  css: [
    '@/assets/scss/main.scss'
  ],

  plugins: [
    '@/plugins/fontawesome.ts',
    '@/plugins/email.ts'
  ],

  runtimeConfig: {
    public: {
      emailjsPublicKey: process.env.EMAILJS_PUBLIC_KEY,
      emailjsServiceId: process.env.EMAILJS_SERVICE_ID,
      emailjsTemplateId: process.env.EMAILJS_TEMPLATE_ID,
      turnstileSiteKey: process.env.TURNSTILE_SITE_KEY 
    },
    turnstileSecretKey: process.env.TURNSTILE_SECRET_KEY // clé secrète, côté serveur uniquement
  },
  turnstile:{
    secretKey:process.env.TURNSTILE_SECRET_KEY
  },

  compatibilityDate: '2024-09-01',
});
import { defineNuxtConfig } from 'nuxt/config';

export default defineNuxtConfig({
  modules: [
    "@nuxt/image", 
    '@vesp/nuxt-fontawesome', 
    'nuxt-swiper', 
    '@nuxtjs/turnstile',
    
  ],

  fontawesome: {
    icons: {
      solid: ['envelope', 'close', 'bars'],
      brands: ['instagram', 'linkedin', 'github']
    }
  },

  build: {
    transpile: ['@fortawesome/vue-fontawesome']
  },

  app: {
    head: {
      link: [
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;500&display=swap'
        }
      ]
    }
  },

  css: [
    '@/assets/scss/main.scss'
  ],

  plugins: [
    '@/plugins/fontawesome.ts',
    '@/plugins/email.ts'
  ],

  runtimeConfig: {
    public: {
      emailjsPublicKey: process.env.EMAILJS_PUBLIC_KEY,
      emailjsServiceId: process.env.EMAILJS_SERVICE_ID,
      emailjsTemplateId: process.env.EMAILJS_TEMPLATE_ID,
      turnstileSiteKey: process.env.TURNSTILE_SITE_KEY 
    },
    turnstileSecretKey: process.env.TURNSTILE_SECRET_KEY // clé secrète, côté serveur uniquement
  },
  turnstile:{
    secretKey:process.env.TURNSTILE_SECRET_KEY
  },

  compatibilityDate: '2024-09-01',
});
Chaika
Chaika•3mo ago
That's just a generic warning about preloading, wouldn't break anything. It's not directly in that code either, would have to share website url to see what exact resource it is, the dev console should directly tell you as well
ldespe
ldespeOP•3mo ago
For the moment, i develop the website in local
ldespe
ldespeOP•3mo ago
I can share my console
No description
ldespe
ldespeOP•3mo ago
Why replace the sitekey ? sorry for me it's difficult to understand the implicit because i speak french Pourtant les deux clés que j'utilise viennent de mon widget 
form class="footer--email" ref="form" @submit.prevent="sendF" method="POST">
            <h3>Pour me contacter</h3>
            <div class="container--email">
                <div class="email--nom--mail">
                    <InputsSimple :text="input1" type="text" name="from_name"/>
                    <InputsSimple :text="input2" type="text" name="email_id"/>
                </div>
                <textarea id="message" name="message" placeholder="Ecrivez votre message"></textarea>
            </div>
            <NuxtTurnstile  ref="turnstile" v-model="turnstile" />
            <button  id="send">Envoyer</button>
        </form>

        <p id="by">Made By ldesperrois</p>
    </footer>
</template>
form class="footer--email" ref="form" @submit.prevent="sendF" method="POST">
            <h3>Pour me contacter</h3>
            <div class="container--email">
                <div class="email--nom--mail">
                    <InputsSimple :text="input1" type="text" name="from_name"/>
                    <InputsSimple :text="input2" type="text" name="email_id"/>
                </div>
                <textarea id="message" name="message" placeholder="Ecrivez votre message"></textarea>
            </div>
            <NuxtTurnstile  ref="turnstile" v-model="turnstile" />
            <button  id="send">Envoyer</button>
        </form>

        <p id="by">Made By ldesperrois</p>
    </footer>
</template>
s 
<script lang="ts">
import { useRuntimeConfig } from '#app';
export default{
    name :"Footer",
    data(){
        const turnstile = ref()
        return{
            input1:"Nom",
            input2:"Email",
            numero:"+33 7 66 66 78 67",
            turnstile
        }
    },
    setup() {
    const config = useRuntimeConfig();
        return {
            config
        };

    },
   
    
    methods:{
        async sendEmail() {
            const form = this.$refs.form as HTMLFormElement;
                try {
                    await this.$emailjs.sendForm(
                        this.config.public.emailjsServiceId,
                        this.config.public.emailjsTemplateId,
                        form,
                        this.config.public.emailjsPublicKey,
                        );
                    }
                    catch (error) {
                        console.log('FAILED...', error);
                    }
        },
        async sendF() {
            const token = this.turnstile; // Assurez-vous que turnstile a une méthode pour obtenir le token
       if (!token) {
               console.error('Token not available');
              this.reset();
           return;
     }

   try {
    const response = await fetch('/api/validateTurnstile', {
    method: 'POST',
     headers: {
     'Content-Type': 'application/json',
    },
      body: JSON.stringify({ token }), // Envoyez le token correctement
                });if (response.ok) {
          const result = await response.json();
   console.log(response)
     await this.sendEmail();
  console.log("Success")
         } else {
           const result = await response.json();
         console.error(result)
    console.error('Validation failed:', result);
          this.reset();
      }   } catch (error) {          console.error('Request failed:', error);
             this.reset();
   }
    },    
        reset(){
            this.turnstile.value?.reset()
        }
    },
<script lang="ts">
import { useRuntimeConfig } from '#app';
export default{
    name :"Footer",
    data(){
        const turnstile = ref()
        return{
            input1:"Nom",
            input2:"Email",
            numero:"+33 7 66 66 78 67",
            turnstile
        }
    },
    setup() {
    const config = useRuntimeConfig();
        return {
            config
        };

    },
   
    
    methods:{
        async sendEmail() {
            const form = this.$refs.form as HTMLFormElement;
                try {
                    await this.$emailjs.sendForm(
                        this.config.public.emailjsServiceId,
                        this.config.public.emailjsTemplateId,
                        form,
                        this.config.public.emailjsPublicKey,
                        );
                    }
                    catch (error) {
                        console.log('FAILED...', error);
                    }
        },
        async sendF() {
            const token = this.turnstile; // Assurez-vous que turnstile a une méthode pour obtenir le token
       if (!token) {
               console.error('Token not available');
              this.reset();
           return;
     }

   try {
    const response = await fetch('/api/validateTurnstile', {
    method: 'POST',
     headers: {
     'Content-Type': 'application/json',
    },
      body: JSON.stringify({ token }), // Envoyez le token correctement
                });if (response.ok) {
          const result = await response.json();
   console.log(response)
     await this.sendEmail();
  console.log("Success")
         } else {
           const result = await response.json();
         console.error(result)
    console.error('Validation failed:', result);
          this.reset();
      }   } catch (error) {          console.error('Request failed:', error);
             this.reset();
   }
    },    
        reset(){
            this.turnstile.value?.reset()
        }
    },
However, the two keys I use come from my widget I have an impression that my key is replace in my code for a test key but where ? I want that the message "test only" disappear and be sur that my two keys are valid My problem is i don't know if serve key is a test key or if it's my site key which is a test key
Want results from more Discord servers?
Add your server