서론많은 웹사이트에서 악성 사용자를 막기 위해 캡챠를 사용하곤 한다. 대표적으로 ReCaptcha가 있다.하지만 ReCaptcha는 일정 사용량 이상(10,000건)부터는 과금이 이루어진다.하지만 많은 유용한 도구들은 대체제가 있기 마련이다. 내가 제시하는 대안은 Turnstile 이다.Turnstile의 장점은 다음과 같다.빠르다정확하다.저렴하다.Cloudflare에서 완전 무료를 선언한 Turnstile은 빠르고 정확하며 저렴하기까지 하다.ReCaptcha에서 넘어올 만 하지 않은가?본론사용법과 관련된 내용은 주로 Turnstile Documentation에서 가져온 내용이다.먼저 client 검증이다.script 태그와 div 태그를 적절히 조합하면 위의 gif처럼 캡챠를 시작하는 모습을 볼 수 있..

서론이전의 Nuxt3 google ReCaptcha 사용하기 글의 연장이다.맞춤법 검사기 를 구성하며 Nuxtjs 3와 FastAPI로 웹개발을 한 기록이다.이번 이야기는 Nuxt3에서 받아온 ReCaptcha Token을 FastAPI에서 검증하는 방법에 대한 이야기다. 같은 방법으로 Django나 Node.js 등 다양한 언어에서 적용이 가능하니 참고하기 바란다.  본론ChatGPT의 도움을 조금 받았다. (아니 사실 엄청 많이 받았다.)간단히 HTTP Request를 양식에 맞춰 보내는 것만으로도 ReCaptcha 토큰의 검증은 끝난다.아래는 FastAPI에서 실행시키기 위한 간단한 코드다.from fastapi import HTTPExceptionimport httpxasync def recapt..

서론맞춤법검사기를 만들면서 CSRF 인증 대신 더욱 안전한 ReCaptcha v3를 사용하기로 결정했다.이 글은 Nuxt3에서 ReCaptcha 인증을 하는 방법에 대해 설명한다.본론우선 ReCaptcha SITE_KEY와 SECRET_KEY를 발급받았다는 전제 하에 진행한다.ReCaptcha ADMIN CONSOLE에서 간단히 발급받을 수 있다.npm i -s vue-recaptcha 로 필요한 vue-recaptcha 라이브러리를 받아준다.Nuxtjs 3의 /plugins/recaptcha.ts 에 다음 코드를 작성한다. dev.to 의 글을 참고했다.import { defineNuxtPlugin} from "#app"import {VueReCaptcha} from "vue-recaptcha-v3";..