개발자

react-google-recaptcha를 다루기가 너무 어려워요.

2023년 11월 29일조회 208

안녕하세요. 이번 프로젝트에서 reCaptcha를 사용하여 로그인을 구현을 하고 있습니다 :) 그래서 react-google-recaptcha라는 라이브러리를 활용하고 있는데, 2가지 정도의 난관이 있더라구요. 내용은 아래와 같습니다. 1. ReCAPTCHA 컴포넌트의 width값을 반응형으로 조절하기가 어렵습니다. 인라인 스타일, 상위에 래핑하여 width를 먹여도 그대로이며, ReCAPTCHA 컴포넌트의 속성인 size를 활용해도 더 나아지는 부분이 보이질 않습니다. 2. google reCaptcha에서 sitekey와 secretkey를 받고 아래와 같이 코드를 작성하였습니다. 그런데도 계속 다음과 같은 모습만 보이네요.. 잘 작동하는 key인데 말이죠. 저도 열심히 경험을 많이 쌓아서 다른 분들의 고민을 해결해주는 그런 사람이 되고 싶네요. 감사합니다 :) + 아, 참고로 개발환경은 React + Typescript + Vite입니다. 해당 라이브러리 주소 : https://www.npmjs.com/package/react-google-recaptcha

1import * as S from "./styled";
2import ReCAPTCHA from "react-google-recaptcha";
3import Button from "@/components/common/Button";
4import Input from "@/components/common/Input";
5import ContactBox from "@/components/common/ContactBox";
6
7const Captcha = () => {
8  const sitekey = import.meta.env.VITE_RECAPTCHA_SITE_KEY;
9
10  console.log(sitekey);
11  const onChange = (value: any) => {
12    console.log("captcha test : ", value);
13  };
14
15  return (
16    <S.ReCaptchaContainer>
17      <ReCAPTCHA sitekey={sitekey} size="normal" onChange={onChange} />
18    </S.ReCaptchaContainer>
19  );
20};
이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 0

답변이 없을 때 보이는 아이콘

첫 답변을 기다리고 있어요.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2023년 11월 29일

react-google-recaptcha 라이브러리의 기본적인 사용법에 대해 이해하신 것 같네요. 다만, 몇 가지 문제를 겪고 계신데, 그 부분에 대해 각각 말씀드리겠습니다. 1. react-google-recaptcha의 width는 기본적으로 고정된 크기를 가집니다. 따라서 반응형으로 스타일링을 원한다면, Google ReCAPTCHA가 제공하는 'Invisible reCAPTCHA' 버전을 사용해야 합니다. 2. 사이트 키와 비밀 키를 받아서 코드에 적용하셨지만 작동하지 않는다고 하시는데, 이 부분은 키가 올바르게 할당되었는지 확인해 보실 필요가 있어보입니다. 출력 로그를 확인하셨을 때 sitekey 값이 정상적으로 출력되나요? 만약 sitekey 값이 `undefined`로 나올 경우에는 `.env` 환경 변수 설정 문제일 가능성이 큽니다. 사이트 키값은 `import.meta.env.VITE_RECAPTCHA_SITE_KEY;`에서 얻어 오려고 하는데 이 값은 정의된 `.env` 파일 내부에 있는 `VITE_RECAPTCHA_SITE_KEY=your_site_key_here` 라인과 일치해야 합니다. .env 파일 및 해당 파일의 위치, 그리고 Vite가 해당 환경 변수를 읽을 수 있는지 확인 해 보세요. 참고로, ReCAPTCHA는 클라이언트 측에서 키를 받아와 실행시킵니다. 그러므로 사이트 키가 노출되면 안 되기 때문에, 공개 레파지토리에 push하기 전에 .env 파일을 .gitignore 파일에 추가하는 것을 잊지 마세요.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!