웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
웹 개발을 하다 보면 리캡챠(reCAPTCHA)가 필요한 경우가 있습니다. 이번 포스팅에서는 리캡챠가 무엇인지 그런고 언제 어떻게 사용해야 하는지 알아보겠습니다.
reCAPTCHA는 웹사이트에 사용되는 보안 도구 중 하나로, 자동화된 스크립트나 봇에 의한 악의적인 활동(예: 스팸 메시지 전송, 무작위 가입 시도)을 방지하기 위해 사용됩니다. 이 기능을 사용하면 사용자가 실제 인간인지 확인하기 위한 검증 과정을 제공하여 판단하고 그 결과를 통해 스팸 여부를 확인 할 수 있습니다. 이런 이유로 웹사이트 보안을 위해 많은 곳에서 사용되고 있죠.
보통 reCAPTCHA를 사용하게 되면 비교적 간단한 체크박스를 제공하며 사용자로 하여금 클릭하도록 유도합니다. 그 다음 이 클릭 행동에 대하여 비교 분석하여 인간임을 확인하게 됩니다. 때로는 추가적인 이미지나 텍스트 기반의 퍼즐이 제공하기도 합니다. 즉 사용자가 클릭이나 간닪나 퍼즐 등을 해결하게 함으로써 인간임을 증명할 수 있는 간단한 시스템입니다.
참고로 구글은 무료로 사용 가능한 reCAPTCHA를 제공합니다. 물론 구글 이외의 여러 유사한 서비스 들이 존재하죠. 다른 대안들을 생각할 수 있지만 구글 reCAPTCHA를 사용하여도 충분히 원하는 결과를 얻을 수 있습니다.
@ [참고] 구글 이 외의 대안 서비스는 무엇이 있을까?
hCaptcha // 이것은 구글의 reCAPTCHA와 매우 유사한 서비스. 역시 간단한 퍼즐을 제공하여 봇과 인간을 구별
SimpleCaptcha // Java 기반 애플리케이션을 위한 캡챠 라이브러리임
Funcaptcha // 이미지가 아닌 3D 객체를 회전하는 등의 퍼즐 완성 방식을 제공함
참고로 구글은 계속해서 reCAPTCHA의 보안을 강화하며, 고급 분석과 기계 학습을 활용하여 최신의 봇 공격을 탐지하고 차단할 수 있습니다.
스크린샷) 구글 reCAPTCHA 웹사이트의 화면
그렇다면 실제로 reCAPTCHA를 내 웹사이트에 적용하는 방법을 간략히 알아보겠습니다. 우선 다음의 순서대로 과정이 필요합니다.
우선 구글 reCAPCHA에 접속해 가입을 완료해야 합니다. 이 때 새로운 사이트에 대하여 사이트 키와 시크릿 키가 제공됩니다. 이 키들은 리캡챠 사용을 위해서 반드시 필요하며 나중에 웹사이트에 리캡챠를 적용할 때 사용됩니다.
[ reCAPTCHA 공식 웹사이트 ]
https://www.google.com/recaptcha
다음으로 웹페이지에 코들르 추가해야 합니다. 먼저 간단한 스크립트 코드를 아래와 같이 추가하도록 합니다.
여기서 `YOUR_SITE_KEY` 부분은 앞서 받은 사이트 키로 대체해 주세요. 그 다음으로 사용자의 응답 결과를 서버에 전송해야 되겠죠. 응답 data 값을 아래와 같이 전송하면 됩니다. 만약 Fetch API를 사용한다면 아래의 예제코드처럼 작성 가능합니다. 만약 'https://webisfree.com/submit' 주소로 결과를 보내야한다면 아래와 같이 작성합니다.
다음으로 이제 사용자의 결과 response를 서버에서 전송 받아 확인하는 과정을 아래에서 알아봅니다.
사용자가 리캡챠를 완료하면, 구글 서버로부터 응답을 받게 됩니다. 이 응답을 서버에서 검증해야 합니다. 아래는 node.js와 express를 사용한 서버 환경의 예시 코드입니다. 서버 언어에 따라 필요한 코드를 추가해야 합니다.
먼저 필수 모듈이 없다면 설치가 필요합니다. 아래와 같이 body-parser와 node-fetch를 설치합니다.
다음으로 클라이언트에서 서버로 POST 요청을 보내면 이를 수행할 node.js 코드입니다.
위의 예제는 간단한 예제소스로 검증에 대하여 성공 및 실패를 확인할 수 있습니다. 여기까지 간단한 reCAPTCHA의 클라이언트 및 서버 구현 방법을 알아보았습니다.
현재 구글에reCAPTCHA는 v2와 v3 두 가지 주요 버전이 있는 데 이 두 버전은 다음과 같은 차이점이 있습니다.
개인적으로는 버전 v3가 사용자 경험이 더 좋습니다. 비교적 더 간편하고 단순하게 제공하죠. 다만 큰 차이는 없습니다.
여기까지 reCAPTCHA에 대하여 알아보고 구글 reCAPTCHA를 사용하고 구현하는 방법을 간략히 알아봤습니다. 사실 최근에는 웹서버 공격등이 과거에 비하면 많아졌습니다. 이런 공격에 대비하지 않는다면 무분별한 공격에 위험에 노출되거나 서버가 마비될 수 도 있죠. 만약 사이트에 인증과 관련된 기능들을 제공하는 경우라면 reCAPTCHA 또는 비슷한 보안 기능들을 제공하는 것이 바람직하다고 생각합니다.
리캡챠는 무엇인가?
reCAPTCHA는 웹사이트에 사용되는 보안 도구 중 하나로, 자동화된 스크립트나 봇에 의한 악의적인 활동(예: 스팸 메시지 전송, 무작위 가입 시도)을 방지하기 위해 사용됩니다. 이 기능을 사용하면 사용자가 실제 인간인지 확인하기 위한 검증 과정을 제공하여 판단하고 그 결과를 통해 스팸 여부를 확인 할 수 있습니다. 이런 이유로 웹사이트 보안을 위해 많은 곳에서 사용되고 있죠.
reCAPTCHA의 주요 기능 및 특징
보통 reCAPTCHA를 사용하게 되면 비교적 간단한 체크박스를 제공하며 사용자로 하여금 클릭하도록 유도합니다. 그 다음 이 클릭 행동에 대하여 비교 분석하여 인간임을 확인하게 됩니다. 때로는 추가적인 이미지나 텍스트 기반의 퍼즐이 제공하기도 합니다. 즉 사용자가 클릭이나 간닪나 퍼즐 등을 해결하게 함으로써 인간임을 증명할 수 있는 간단한 시스템입니다.
무료로 사용 가능한 구글 reCAPTCHA
참고로 구글은 무료로 사용 가능한 reCAPTCHA를 제공합니다. 물론 구글 이외의 여러 유사한 서비스 들이 존재하죠. 다른 대안들을 생각할 수 있지만 구글 reCAPTCHA를 사용하여도 충분히 원하는 결과를 얻을 수 있습니다.
@ [참고] 구글 이 외의 대안 서비스는 무엇이 있을까?
hCaptcha // 이것은 구글의 reCAPTCHA와 매우 유사한 서비스. 역시 간단한 퍼즐을 제공하여 봇과 인간을 구별
SimpleCaptcha // Java 기반 애플리케이션을 위한 캡챠 라이브러리임
Funcaptcha // 이미지가 아닌 3D 객체를 회전하는 등의 퍼즐 완성 방식을 제공함
참고로 구글은 계속해서 reCAPTCHA의 보안을 강화하며, 고급 분석과 기계 학습을 활용하여 최신의 봇 공격을 탐지하고 차단할 수 있습니다.
스크린샷) 구글 reCAPTCHA 웹사이트의 화면구글 리캡챠 (reCAPTCHA)를 웹사이트에 적용하는 방법 알아보기
그렇다면 실제로 reCAPTCHA를 내 웹사이트에 적용하는 방법을 간략히 알아보겠습니다. 우선 다음의 순서대로 과정이 필요합니다.
1. reCAPTCHA 서비스를 가입
우선 구글 reCAPCHA에 접속해 가입을 완료해야 합니다. 이 때 새로운 사이트에 대하여 사이트 키와 시크릿 키가 제공됩니다. 이 키들은 리캡챠 사용을 위해서 반드시 필요하며 나중에 웹사이트에 리캡챠를 적용할 때 사용됩니다.
[ reCAPTCHA 공식 웹사이트 ]
https://www.google.com/recaptcha
2. 웹 페이지에 코드 추가하기
다음으로 웹페이지에 코들르 추가해야 합니다. 먼저 간단한 스크립트 코드를 아래와 같이 추가하도록 합니다.
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
<div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
여기서 `YOUR_SITE_KEY` 부분은 앞서 받은 사이트 키로 대체해 주세요. 그 다음으로 사용자의 응답 결과를 서버에 전송해야 되겠죠. 응답 data 값을 아래와 같이 전송하면 됩니다. 만약 Fetch API를 사용한다면 아래의 예제코드처럼 작성 가능합니다. 만약 'https://webisfree.com/submit' 주소로 결과를 보내야한다면 아래와 같이 작성합니다.
fetch('https://webisfree.com/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
"recaptcha": "YOUR_RECAPTCHA_RESPONSE"
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
"recaptcha": "YOUR_RECAPTCHA_RESPONSE"
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
다음으로 이제 사용자의 결과 response를 서버에서 전송 받아 확인하는 과정을 아래에서 알아봅니다.
3. 서버 검증하기
사용자가 리캡챠를 완료하면, 구글 서버로부터 응답을 받게 됩니다. 이 응답을 서버에서 검증해야 합니다. 아래는 node.js와 express를 사용한 서버 환경의 예시 코드입니다. 서버 언어에 따라 필요한 코드를 추가해야 합니다.
먼저 필수 모듈이 없다면 설치가 필요합니다. 아래와 같이 body-parser와 node-fetch를 설치합니다.
npm install express body-parser node-fetch
다음으로 클라이언트에서 서버로 POST 요청을 보내면 이를 수행할 node.js 코드입니다.
const express = require('express');
const bodyParser = require('body-parser');
const fetch = require('node-fetch');
const app = express();
const SECRET_KEY = 'YOUR_SECRET_KEY';
app.use(bodyParser.urlencoded({ extended: false }));
app.post('/submit', async (req, res) => {
const token = req.body['g-recaptcha-response'];
if(!token) {
return res.status(400).send({ success: false, message: 'reCAPTCHA token missing.' });
}
const googleVerifyURL = `https://www.google.com/recaptcha/api/siteverify?secret=${SECRET_KEY}&response=${token}`;
const response = await fetch(googleVerifyURL, {
method: 'POST',
});
const json = await response.json();
if (json.success) { // Success
res.send({ success: true });
} else { // Failed
res.status(400).send({ success: false, message: 'reCAPTCHA verification failed.' });
}
});
const bodyParser = require('body-parser');
const fetch = require('node-fetch');
const app = express();
const SECRET_KEY = 'YOUR_SECRET_KEY';
app.use(bodyParser.urlencoded({ extended: false }));
app.post('/submit', async (req, res) => {
const token = req.body['g-recaptcha-response'];
if(!token) {
return res.status(400).send({ success: false, message: 'reCAPTCHA token missing.' });
}
const googleVerifyURL = `https://www.google.com/recaptcha/api/siteverify?secret=${SECRET_KEY}&response=${token}`;
const response = await fetch(googleVerifyURL, {
method: 'POST',
});
const json = await response.json();
if (json.success) { // Success
res.send({ success: true });
} else { // Failed
res.status(400).send({ success: false, message: 'reCAPTCHA verification failed.' });
}
});
위의 예제는 간단한 예제소스로 검증에 대하여 성공 및 실패를 확인할 수 있습니다. 여기까지 간단한 reCAPTCHA의 클라이언트 및 서버 구현 방법을 알아보았습니다.
reCAPTCHA v2와 v3의 차이점 알아보기
현재 구글에reCAPTCHA는 v2와 v3 두 가지 주요 버전이 있는 데 이 두 버전은 다음과 같은 차이점이 있습니다.
- 버전 v2 // 사용자에게 "나는 로봇이 아닙니다" 체크박스를 보여줌. 또한 필요한 경우 추가 이미지 퍼즐을 제공할 수 있음
- 버전 v3 // 사용자 인터페이스가 없고 간단함. 사용자의 상호작용을 분석해 스코어로 반환. 스코어 점수를 판단해 봇 여부를 확인
개인적으로는 버전 v3가 사용자 경험이 더 좋습니다. 비교적 더 간편하고 단순하게 제공하죠. 다만 큰 차이는 없습니다.
마치면서
여기까지 reCAPTCHA에 대하여 알아보고 구글 reCAPTCHA를 사용하고 구현하는 방법을 간략히 알아봤습니다. 사실 최근에는 웹서버 공격등이 과거에 비하면 많아졌습니다. 이런 공격에 대비하지 않는다면 무분별한 공격에 위험에 노출되거나 서버가 마비될 수 도 있죠. 만약 사이트에 인증과 관련된 기능들을 제공하는 경우라면 reCAPTCHA 또는 비슷한 보안 기능들을 제공하는 것이 바람직하다고 생각합니다.
아래의 글도 찾고 계시지 않나요?
