React - reCAPTCHA(크롤러 및 자동화 봇 접근 방지)

해당 포스팅은 크롤링과 자동화 봇을 활용해
자원 고갈 및 많은 데이터 변경 및 조작을 방지하기 위해
찾아본 정보를 담은 포스팅

---

Google reCAPTCHA 설정 및 사용 방법

reCAPTCHA 사이트 등록:

• Google reCAPTCHA 사이트로 이동하여 사이트를 등록합니다.
• 사이트 등록 후, 사이트 키와 비밀 키를 받습니다.
• 세부 과정

1. reCAPTCHA 유형 선택: reCAPTCHA v2, Invisible reCAPTCHA, reCAPTCHA v3 중 하나를 선택합니다.
2. 도메인 추가: 사용하고자 하는 도메인(예: example.com)을 추가합니다.
3. 소유자: 이메일 주소를 입력합니다.
4. reCAPTCHA 약관 동의: 약관에 동의합니다.
5. 등록: 'Submit' 버튼을 클릭하여 사이트를 등록합니다.

 

React에 reCAPTCHA 설치:

• react-google-recaptcha 패키지를 설치합니다.
   

npm install react-google-recaptcha

 

reCAPTCHA 컴포넌트 사용:

• React 컴포넌트에서 react-google-recaptcha를 사용하여 reCAPTCHA를 추가합니다.

import React from 'react';
import ReCAPTCHA from 'react-google-recaptcha';

const App = () => {
  const handleRecaptcha = (value) => {
    console.log('Captcha value:', value);
    // value는 사용자 인증 토큰입니다. 이를 서버로 전송하여 유효성을 검증합니다.
  };

  return (
    <div>
      <h2>React Google reCAPTCHA Example</h2>
      <ReCAPTCHA
        sitekey="YOUR_SITE_KEY"
        onChange={handleRecaptcha}
      />
    </div>
  );
};

export default App;

 

서버에서 reCAPTCHA 유효성 검사:

• 사용자가 제출한 reCAPTCHA 토큰을 서버로 전송하여 유효성을 검사합니다.
• 예를 들어, Express.js 서버에서 다음과 같이 검사할 수 있습니다.

const express = require('express');
const axios = require('axios');
const app = express();
const PORT = process.env.PORT || 5000;

app.use(express.json());

app.post('/verify-recaptcha', async (req, res) => {
  const { token } = req.body;
  const secretKey = 'YOUR_SECRET_KEY';

  try {
    const response = await axios.post(`https://www.google.com/recaptcha/api/siteverify`, {}, {
      params: {
        secret: secretKey,
        response: token
      }
    });

    const { success } = response.data;
    if (success) {
      res.status(200).send('Human verified');
    } else {
      res.status(400).send('Verification failed');
    }
  } catch (error) {
    res.status(500).send('Server error');
  }
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

이와 같은 방식으로 Google reCAPTCHA를 사용하여 크롤러가 React로 개발된 웹사이트에 접근하는 것을 방지할 수 있습니다. 이를 통해 사람과 봇을 구분하여 크롤링을 막고, 웹사이트의 보안을 강화할 수 있습니다.