Cloudflare Turnstile Invalid sitekey 오류

아래처럼 오류 났을때 이유랑 대처법 ↓

api.js:1 Uncaught TurnstileError: [Cloudflare Turnstile] Invalid or missing type for parameter "sitekey", expected "string", got "object".
    at g (api.js:1:11025)
    at Object.T [as render] (api.js:1:28190)
    at api.js:1:19527
    at NodeList.forEach (<anonymous>)
    at Ft (api.js:1:19497)
    at br (api.js:1:19680)
g	@	api.js:1
T	@	api.js:1
(anonymous)	@	api.js:1
Ft	@	api.js:1
br	@	api.js:1
setTimeout		
(anonymous)	@	api.js:1
(anonymous)	@	api.js:1

Turnstile 작동방식에 알맞는 스크립트를 로드하지 않아서 생기는 문제임.

턴스타일은 크게 2가지임, 하나는 html 에 직접 아래처럼 하드코딩해서

<div class="cf-turnstile" data-sitekey="<YOUR_SITE_KEY>"></div>

이렇게 쓰면, 사용자가 접속하자마자 즉시 즉발로 스크립트가 실행 됨, 이 때에는 api를 아래처럼 로드해야함.

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

다른 하나는 사용자가 액션을 취할때까지 기다렸다가 작동하는것, 버튼이나 입력폼 같은거를 발동했을 때 작동하길 원할때에는 위처럼 하면 안 됨.

액션 후에 작동하려면 아래처럼 프론트엔드에 sitekey를 적는게 아니라 아래처럼 코딩하고(실전에선 id넣고 핸들링)

<div class="cf-turnstile"></div>

그 다음 api를 로드할 때, 즉발하지 않도록 쿼리값 ?render=explicit를 붙여줘야함.

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit" async defer></script>

이 차이점 때문에 액션식으로 사용되게 js 코딩 해놓고 막상 api로드를 즉발식으로 로드하면, 서로 올바르게 연동된 사이트키 값이 없는데 api는 즉발해버리니까 Invalid sitekey오류가 뜨는 것. 간단해결.