reCAPTCHA 2

react 리캡챠 오류시 초기화 하기 (react-google-recaptcha 사용)

문제상황 1. 폼 데이터 전체를 작성한 후 마지막에 리캡챠 검사 => 리캡챠 토큰을 폼 데이터에 같이 실어 서버 보낸다. 2. 이때 서버에서 모종의 이유로 오류가 나면, 리캡챠가 체크된 채로 남아있어 재시도를 진행할 수 없다. - 리캡챠 유효시간 만료, 로봇으로 판단 등 리캡챠 자체에서 만료시킨 경우는 재시도가 가능하다. 3. 이미 검증된 토큰은 재사용할 수 없어, 서버에서 리캡챠 오류가 발생한다. 위와 같은 특정 상황에서 리캡챠 토큰이 유효하지 않다고 판단되었을때 재시도 할 수 있게 만들어야 한다. 해결방법 *react-google-recaptcha, formik(form 라이브러리) 사용중 우선 useRef를 사용해 리캡챠 선택한다. /**리캡챠 설정 */ const recaptchaRef = use..

TIL 2024.02.14

리액트(React)에서 구글 리캡차(reCAPTCHA) 연결하기

1. reCAPTCHA 란? 투표를 하거나, 사이트에 새로 가입할 경우 이 "로봇이 아닙니다" 박스를 종종 보게 되는데, 이게 리캡차(reCAPTCHA)이다. reCAPTCHA(리캡차)는 구글에서 개발한 자동화된 프로그램이나 봇으로부터 웹사이트를 보호하기 위한 보안 기술 중 하나. 주로 웹 양식의 자동 제출을 방지하고, 스팸 댓글을 막는 등의 목적으로 사용된다. 즉, 사용자가 사람인지 봇인지를 판별해준다. 2. reCAPTCHA flow 플로우는 위의 사진에 적힌 순서대로 이루어진다. 화면에서 사용자가 어떤 동작을 했을때(회원가입, 글작성 등) 구글에 토큰을 요청한다. 구글에서 화면으로 토큰을 전달한다. 전달된 토큰을 백엔드 서버로 전송한다. 백엔드 서버는 구글서버에 토큰을 전달한다. 구글에서 사용자의 ..

JS/React.js 2023.11.26