계정과 첫 사이트 키 만들기

세 개의 짧은 레슨 중 첫 번째입니다. 셋을 함께 따라가면 빈 계정에서 시작해 라이브 폼을 지키는 진짜 게임 챌린지에 이르게 됩니다.

당신은 BananaSeed에서 일하고 있는데, 사이트의 문의 폼이 스팸에 잠겨 있습니다. 봇과 스크립트로 움직이는 AI 에이전트가 하루 종일 쓰레기 제출을 쏟아붓습니다. 당신은 그 폼 앞에 Caputchin을 세워, 진짜 사람만 통과시키고 싶습니다.

Caputchin이 그 일을 하는 방식은 이렇습니다. 누군가 당신의 문의 폼을 열면, Caputchin은 브라우저 안에서 짧은 챌린지(간단한 체크박스 또는 짧은 게임)를 건넵니다. 그것을 풀면 일회용 토큰을 얻고, 페이지는 그 토큰을 제출과 함께 보냅니다. 그러면 당신의 서버는 요청을 신뢰하기 전에 그 토큰을 Caputchin으로 확인합니다. 당신의 엔드포인트로 곧장 POST하는 봇은 챌린지를 푼 적이 없으니 유효한 토큰이 없고, 당신의 서버는 그것을 돌려보냅니다.

BananaSeed의 사이트는 Express로 돌아가는 Node.js 백엔드를 둔 React 프런트엔드라, 다음 두 레슨은 바로 그 스택에 맞는 동작하는 코드를 건넵니다. 같은 단계가 어떤 프레임워크나 언어로도 옮겨지며, 문법만 달라집니다.

먼저 BananaSeed에는 계정과 사이트 키가 필요합니다. 약 2분, 신용카드 불필요, 아직 설치할 것도 없습니다.

끝나면 갖게 되는 것

Caputchin 계정 하나.
사이트 키 하나, 사실은 한 쌍의 값입니다:
- 페이지에 들어가는 공개 키(cpt_pub_...),
- 서버에만 머무는 시크릿(cpt_sec_...).

1. 로그인하기 (이것이 계정도 만듭니다)

caputchin.com/login으로 가세요. 별도의 가입 단계는 없습니다. 이메일로 처음 로그인하는 것이 곧 계정을 만드는 일입니다. 편한 방식을 고르세요:

이메일로 로그인 링크 받기, 그다음 이메일의 링크를 클릭, 또는
GitHub로 계속하기, 또는
Google로 계속하기.

우리는 언제나 당신의 확인된 이메일 주소만 읽습니다.

들어오고 나면, 주소 표시줄이 /app/troops를 가리키는 것을 보세요. Caputchin은 당신을 곧바로 팀 안으로 데려다 놓습니다.

2. 개인 팀 열기

사이트 키를 만들기 전에, 그것이 어디에 사는지 알아 두면 도움이 됩니다. Caputchin의 거의 모든 것은 팀 안에 자리합니다. 팀은 작업 공간이며, 당신의 사이트 키, 그 키들이 공유하는 게임 맞춤화, 그리고 (유료 요금제에서는) 함께 관리하도록 초대하는 팀원을 소유하는 바로 그것입니다. Caputchin은 일부러 팀을 중심으로 지어졌습니다. 사이트 키는 늘 팀에 속하지 계정에 직접 속하지 않으며, 바로 그것이 나중에 로그인을 공유하지 않고도 팀 전체가 같은 키를 관리하도록 해 줍니다. 결제와 좌석은 팀들 위, 계정 수준에 자리하지 그중 한 팀 안에 있지 않습니다.

모든 계정은 당신만으로 이루어진 Personal이라는 팀 하나로 시작합니다. 이 가이드에는 그것이면 충분합니다. 그걸 넘어설 만큼 커지면 공유 팀을 만들고 멤버를 초대하지만, 아래의 어떤 것도 달라지지 않습니다.

Personal을 클릭해 여세요. 팀은 곧바로 사이트 키로 열리므로, 거기에 도착합니다. 주소 표시줄을 보세요: /app/troops/<id>/site-keys. 당신이 곧 만들 키는 팀 아래에 중첩되며, 방금 설명한 바로 그 소유 관계입니다.

3. 첫 사이트 키 만들기

사이트 키 만들기를 클릭하고, My site 같은 이름을 주고, 만들기를 클릭하세요. 이름 말고는 요구하지 않습니다.

Caputchin이 두 값을 보여 줍니다:

값	생김새	들어가는 곳
공개 키	`cpt_pub_...`	페이지의 위젯 요소에. 브라우저로 보내도 안전합니다.
시크릿	`cpt_sec_...`	서버에만. 절대 클라이언트 측 코드에 넣지 마세요.

배너를 보세요: "지금 시크릿을 복사하세요. 다시는 보여 드리지 않습니다." 시크릿을 복사해 서버가 읽을 수 있는 곳(환경 변수, 시크릿 매니저)에 보관하세요. 공개 키는 키의 Integration 페이지에서 언제든 다시 볼 수 있지만, 시크릿은 딱 한 번 표시됩니다. 잃어버리면 복구가 아니라 교체합니다.

갓 만든 키에는 아직 오리진 제한이 없으며, 바로 그것이 다음 레슨에서 당신의 테스트 페이지가 로컬에서 동작하게 해 줍니다. 키의 설정에 대해서는 사이트 키에서 더 보세요.

방금 일어난 일

단계	어디서	결과
첫 로그인	브라우저	계정이 만들어지고 개인 팀이 준비됩니다.
사이트 키 만들기	대시보드	페이지용 공개 키와 서버용 시크릿.

계정과 첫 사이트 키를 갖췄습니다. 나머지 모든 것이 그 위에 쌓이는 토대입니다. 잘하셨어요. 🎉

키를 손에 넣었습니다. 이제 위젯을 페이지에 올리고 진짜 검증이 일어나는 것을 지켜볼 차례입니다.

당신의 사이트에 위젯 추가하기로 계속하세요.