테스트 받은 편지함으로 호스팅 인증 설정하기

이 튜토리얼이 끝나면 당신은 제출이 Caputchin에 검증되어 웹훅으로 전달되는 동작하는 문의 폼을 갖게 되고, 검증된 제출이 당신이 들여다볼 수 있는 테스트 받은 편지함에 떨어지는 것을 지켜본 상태입니다. 우리는 먼저 webhook.site를 목적지로 쓰는데, 당신 자신의 엔드포인트로 정하기 전에 Caputchin이 보내는 정확한 페이로드를 보여 주기 때문입니다.

Alpha, Troop, 또는 Apex 요금제(호스팅 인증은 Solo에 없습니다), 사이트 키, 그리고 폼의 HTML을 편집할 수 있는 페이지가 필요합니다. 아직 페이지에 위젯을 더하지 않았다면, 먼저 위젯 추가를 하세요; 이 튜토리얼은 동작하는 <caputchin-widget>을 가정합니다.

1. 테스트 받은 편지함 얻기

새 탭에서 webhook.site를 여세요. 그것은 즉시 https://webhook.site/#!/<uuid> 같은 고유 URL과, https://webhook.site/<uuid> 형태의 짝 전달 URL을 줍니다. 전달 URL(#!/가 없는 것)을 복사하세요. 탭을 열어 두세요; 그것이 받는 모든 요청이 실시간으로 거기 나타납니다.

이 URL은 당신의 진짜 웹훅을 대신하는 것입니다. URL을 가진 누구든 도착하는 것을 읽을 수 있으니, 일회용으로 다루세요.

2. 호스팅 인증 켜기

대시보드에서 사이트 키를 열고 그 호스팅 인증 페이지로 가세요.

webhook.site 전달 URL을 webhook URL 필드에 붙여넣으세요.
email은 지금은 비워 두세요.
저장하세요.

아직 enabled 토글을 켤 필요는 없습니다. 다음 단계는 Test delivery를 쓰는데, 그것은 호스팅 인증이 켜졌든 아니든 저장된 목적지에서 동작하니, 라이브로 가기 전에 배선을 확인할 수 있습니다.

3. 테스트 전달 보내기

같은 페이지에서 Test delivery를 쓰세요. Caputchin이 게임을 돌리거나 토큰을 검증하지 않고 합성 제출을 곧장 당신의 목적지로 보내니, 그것은 목적지 배선의 순수한 확인입니다.

webhook.site 탭으로 전환하세요. 1, 2초 안에 새 POST가 나타납니다. 그 JSON 본문은 이렇게 생겼습니다:

{
  "caputchin": {
    "site_key": "cpt_pub_...",
    "session_id": "test_...",
    "game_id": null,
    "score": null,
    "duration_ms": null,
    "verified_at": 1748640000000,
    "test": true
  },
  "form": {
    "email": "test@example.com",
    "message": "Test submission from your Caputchin dashboard."
  }
}

"test": true 표식은 이것이 진짜 방문자가 아니라 대시보드 테스트였음을 당신의 핸들러에 알립니다; 그것은 진짜 제출에는 없습니다. 이 페이로드가 보이면, 목적지가 동작합니다. 아무것도 도착하지 않으면, 전달 URL(#!/ 뷰어 URL이 아니라)을 복사해 저장했는지 다시 확인하세요.

4. 폼을 포워더로 향하게 하기

이제 진짜 제출이 Caputchin을 거쳐 가게 하세요. 폼에 대한 유일한 변경은 그 action입니다: 당신 자신의 백엔드 대신, 사이트 키가 호스팅 인증 페이지에서 보여 주는 포워더 URL로 post합니다.

<form action="https://caputchin.com/api/forward/cpt_pub_..." method="POST">
  <input name="email" type="email" />
  <input name="message" />
  <caputchin-widget sitekey="cpt_pub_..."></caputchin-widget>
  <button type="submit">Send</button>
</form>

다른 것은 바뀌지 않습니다. 위젯은 방문자가 챌린지를 풀 때 여전히 숨겨진 caputchin-token 필드를 주입하고; 포워더는 그 필드를 읽고, 검증하고, 나머지를 당신의 목적지로 전달하기 전에 그것을 제거합니다.

5. 호스팅 인증 활성화하기

호스팅 인증 페이지로 돌아가, enabled 토글을 켜고 저장하세요. 포워더는 활성화되지 않은 사이트 키의 제출을 거부하니, 이 스위치가 4단계를 라이브로 만드는 것입니다.

6. 폼을 진짜로 제출하기

페이지를 로드하고, 폼을 채우고, 챌린지를 풀고, 제출하세요. webhook.site 탭을 지켜보세요: 두 번째 POST가, 이번에는 test 필드 없이 진짜 검증 메타데이터와 함께 도착합니다.

{
  "caputchin": {
    "site_key": "cpt_pub_...",
    "session_id": "...",
    "game_id": "caputchin/games/leaf-memory",
    "score": 847,
    "duration_ms": 4200,
    "verified_at": 1748640000000
  },
  "form": {
    "email": "visitor@example.com",
    "message": "Hello!"
  }
}

그것이 경로 전체입니다: 방문자가 제출하고, Caputchin이 검증하고, 당신의 목적지는 검증된 제출만 받습니다. 검증에 실패하는 제출(없거나, 만료됐거나, 재사용된 토큰)은 당신의 목적지에 전혀 닿지 않습니다.

caputchin 블록을 백엔드 판정처럼 다루세요: game_id, score, duration_ms는 당신의 분석용으로 클라이언트가 주장한 메타데이터이지, 신뢰 신호가 아닙니다. 신뢰 결정은 제출이 도착했다는 사실 그 자체입니다. 그 셋 중 어느 것이든 진짜 제출에서 null일 수 있으니(예를 들어 게임 없는 검증), 그것들을 읽기 전에 null을 막으세요.

7. 이메일 목적지도 해 보기

webhook.site는 각 받은 편지함에 이메일 주소도 주니, 같은 방식으로 이메일 전달을 테스트할 수 있습니다. webhook.site 페이지에서, 당신 받은 편지함의 고유 이메일 주소를 찾아 복사하세요; 작성 시점에는 <your-inbox-id>@emailhook.site처럼 보이지만, webhook.site가 그 세부를 소유하니 현재 형태는 페이지에서 확인하세요. 그다음:

호스팅 인증 페이지로 돌아가, 그 주소를 email 필드에 붙여넣으세요.
저장하고, Test delivery를 다시 쓰세요.

이메일이 요청들과 나란히 webhook.site 받은 편지함에 도착합니다: 폼 필드와 Caputchin이 제출을 검증했음을 알리는 푸터를 담은 평이한 메시지. 이메일은 Caputchin의 이메일 제공자를 통해 전달되니, 웹훅 POST보다 떨어지는 데 조금 더 걸릴 수 있습니다. 웹훅 URL과 이메일 주소를 둘 다 설정하면, 단일 제출이 둘로 펼쳐지고, 둘 중 하나만 성공해도 전달됨으로 셉니다.

8. 당신의 진짜 목적지로 바꾸기

테스트 받은 편지함이 무엇을 기대할지 보여 주면, 그것을 당신 자신의 것으로 바꾸세요:

당신 자신의 웹훅. 당신 엔드포인트의 URL을 webhook URL 필드에 넣으세요. 그것은 공개 https URL이어야 합니다; Caputchin은 사설, 루프백, 또는 클라우드 메타데이터 주소로 해소되는 URL을 거절하고, 리디렉션을 따라가지 않습니다. 당신의 핸들러는 위 JSON 모양을 정확히 받습니다. 전달은 서명되지 않으니, URL을 비밀로 두세요, 그 비밀성이 호출을 인증하는 것이기 때문입니다.
대신, 또는 더해 이메일. 위에서 테스트한 방식대로, 당신 자신의 주소를 email 필드에 넣으세요. 둘을 한 번에 돌릴 수 있습니다, 예를 들어 처리용 웹훅에 자신에게 보내는 이메일 복사본을 더해.

라이브 목적지를 상대로 진짜 제출을 한 번 더 보내 확인하면, 끝입니다.

다음에 갈 곳

호스팅 인증 통계: 시간에 따른 전달 건강 지켜보기.
호스팅 인증: 개념, 프라이버시 자세, 그리고 일부러 빠뜨린 것.
백엔드에서 검증하기: 나중에 서버를 더할 때의 대안.

테스트 받은 편지함으로 호스팅 인증 설정하기

이 페이지에서