구글 리캡차
- 로봇이 아님을 인증하는 서비스
npm install react-google-recaptcha
//layout.tsx
import Script from 'next/script'
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
<html>
<Script
src={`https://www.google.com/recaptcha/api.js?render=${process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}`}
async
defer
></Script>
<body className={notoSansKr.className}>{children}</body>
</html>
)
}
//recaptcha.tsx
import ReCAPTCHA from 'react-google-recaptcha'
export const Recaptcha = () =>{
const [recaptchaResponse, setRecaptchaResponse] = useState<string | null>(null)
const onSubmit = async (event: any) => {
if (!recaptchaResponse) return alert('로봇판별 체크를 해주세요')
if (recaptchaResponse !== '') {
await axios
.post(`${API_URL}/common/support/affiliate-send/event/mail`, {
...event,
recaptcha: recaptchaResponse,
})
.then((res) => {
console.log(res)
})
.catch((error) => {
console.log({ error })
})
}
}
return(
//나머지 코드는 생략
<form onSubmit={onSubmit}>
<div>
<ReCAPTCHA
sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY as string}
onChange={(token: string | null) => setRecaptchaResponse(token)}
/>
</div>
</form>
)
}
:D