Features
Contact
Supaplate에는 유저가 애플리케이션 소유자에게 메시지를 보낼 수 있는 /contact-us 경로가 있습니다.
대부분의 애플리케이션에는 이런 기능이 필요하지 않으므로 기능을 삭제할 가능성이 높지만, 이 기능을 포함시킨 이유는 스팸을 방지하기 위해 hCaptcha 및 Cloudflare Turnstile을 설정하고 사용하는 방법을 보여주기 위해서입니다.
hCaptcha vs Cloudflare Turnstile
hCaptcha와 Cloudflare Turnstile은 스팸 방지라는 동일한 기능을 제공하지만 서로 다른 서비스입니다.
둘 다 무료로 사용할 수 있지만, 둘을 함께 사용하지 마세요. 저는 Cloudflare Turnstile을 더 선호하지만, 여러분이 원하는 대로 사용하면 됩니다.
hCaptcha 설정
- hCaptcha로 이동하여 계정을 만듭니다.
- 새로운 사이트를 만들고 애플리케이션에 연결된 도메인을 추가합니다.
sitekey와secretkey를 복사하여.env파일에 각각VITE_HCAPTCHA_SITEKEY와HCAPTCHA_SECRETKEY로 저장합니다.
Cloudflare Turnstile 설정
이 가이드를 따라 Turnstile sitekey 및 secretkey를 받으세요.
sitekey와 secretkey를 복사하여 .env 파일에 각각 VITE_TURNSTILE_SITEKEY와 TURNSTILE_SECRETKEY로 저장합니다.
Sitekey 와 Secretkey
hCaptcha와 Cloudflare Turnstile 모두 sitekey는 공개이며, 모든 사람이 볼 수 있습니다. secretkey는 비공개이며 누구와도 공유해서는 안 됩니다.
그렇기 때문에 환경 변수에 VITE_ 접두사를 사용해야 합니다.
hCaptcha 및 Cloudflare Turnstile 플로우(flow)
hCaptcha 와 Cloudflare Turnstile 플로우(flow)는 모두 동일합니다.
- 유저가 페이지를 로드합니다.
- hCaptcha 위젯 또는 Cloudflare Turnstile React 컴포넌트가 표시됩니다.
- 유저가 내용을 작성합니다.
- 위젯이 토큰을 사용하여 콜백 함수를 호출합니다.
- 토큰을 양식 데이터에 저장합니다.
- 유저가 양식을 제출합니다.
- 양식 데이터가 서버로 전송됩니다.
- 서버가 'secretkey'를 사용하여 hCaptcha 토큰 또는 Cloudflare Turnstile 토큰을 확인합니다.
- 토큰이 유효하면 양식 데이터가 애플리케이션 소유자에게 전송됩니다.
결론
앞서 말했듯이 대부분의 애플리케이션에는 ‘문의하기(Contact)’ 페이지가 필요하지 않지만, 위 내용은 스팸을 방지하기 위해 hCaptcha 및 Cloudflare Turnstile을 사용하는 방법을 보여주는 좋은 예시입니다.
이 예시를 사용하여 로그인 양식, 댓글 양식, 뉴스레터 신청 양식 등 애플리케이션의 모든 양식을 보호하세요.