마켓플레이스에서 게임 추가하기

BananaSeed의 문의 폼에는 이전 레슨에서 이미 동작하는 위젯이 있습니다. 이 마지막 레슨에서는 수수한 체크박스를, 모든 방문자가 풀어야 하는 진짜 플레이 가능한 게임으로 바꿉니다.

체크박스가 이미 동작하는데 무엇 하러 수고할까요? 체크박스는 조용한 최소한입니다. 게임은 피할 수 없는 "당신이 사람임을 증명하라"의 순간을, 방문자가 견디는 대신 즐기는 무언가로 바꾸며, 정교한 공격자에게도 버티는 부분입니다. 오늘날의 AI는 체크박스를 클릭하고 이미지 격자를 풀 수 있지만, 진짜 게임은 그것이 속일 수 없는 단 하나의 챌린지입니다. 어떤 기계도 사람처럼 플레이하지 않기 때문입니다. 💪

이 레슨은 위젯을 올리는 것보다 조금 더 손이 갑니다: 게임을 고르고, 사이트 키에 설치하고, 그것을 필수로 만드는 게이트를 켭니다. 그 보상은 게임이 봇과 당신의 폼 사이에 서는 실제 대상이 된다는 것이지, 건너뛸 수 있는 장식이 아니라는 것입니다. 그 아래의 토큰 동작은 동일하니, 당신의 백엔드는 전혀 바뀌지 않습니다. 여기의 모든 것은 무료 요금제에서 동작합니다.

끝나면 갖게 되는 것

• 사이트 키에 설치된 마켓플레이스 게임 하나.
• 검증에 필수로 지정된 그 게임, 그래서 맨 체크박스만으로는 더 이상 통과하지 못합니다.
• 같은 문의 폼, 이제 게임이 지키며, 당신의 백엔드 확인은 그대로입니다.

1. 마켓플레이스에서 게임 고르기

마켓플레이스는 당신이 고르는 공개 카탈로그입니다. 그것을 열고 둘러보세요: 카테고리로, 또는 게임이 무엇을 지원하는지(터치, 키보드, 스크린 리더, 소리)로 걸러, 당신의 사용자층에 맞는 게임을 고르세요. 각 게임에는 미리보기와 caputchin/games/leaf-memory 같은 id를 둔 자체 페이지가 있습니다.

둘러보기는 열려 있고, 승인 대기열이 없습니다: 카탈로그의 모든 게임이 사용 준비가 되어 있습니다. 하나를 골라 그 id를 복사하세요. 이 레슨의 나머지에서는 Leaf Memory(caputchin/games/leaf-memory)를 사용합니다.

2. 사이트 키에 게임 설치하기

게임이 키를 지킬 수 있으려면, 먼저 그 키에 게임을 설치합니다. 설치는 Caputchin에게 게임의 고정된, 검증된 스냅샷을 잡으라고 지시하여, 당신의 방문자가 플레이하는 바로 그 버전이 Caputchin이 나중에 결과를 확인할 때 다시 실행할 수 있는 그것이 되게 합니다.

대시보드에서 팀을 열고, 사이트 키를 열고, 그 게임 페이지로 가세요. 게임 추가 패널의 마켓플레이스 게임 필드에서 게임을 검색해 목록에서 고르세요(또는 열기를 클릭).

Caputchin이 게임을 등록하고, 그 스냅샷을 잡고, 당신을 게임의 설정 페이지로 데려갑니다. 그 게임은 이제 게임 페이지로 돌아가 등록된 게임 아래에 나타나, 키를 지킬 준비가 됩니다. 거의 모든 마켓플레이스 게임은 등록하는 즉시 사용 준비가 되며, 자사 게임은 늘 그렇습니다. 드물게 어떤 게임이 여기서 재생 불가 배지를 보이면, 작성자가 재생 가능한 빌드를 낼 때까지 게이트할 수 없습니다.

게임은 하나 넘게 추가할 수 있습니다. 하나의 사이트 키에 추가하거나, 팀에 한 번 추가해 같은 묶음을 그 안의 모든 키에 공유하세요.

당신의 사이트 키에 이제 게임이 설치되고 검증되었습니다. 다음으로 그것을 필수로 만듭니다. 🎉

3. 검증에 게임 필수로 지정하기

게임을 설치하면 사용 가능해집니다. 그래도 아직 아무에게도 플레이하라고 강제하지는 않습니다. 그 일은 게이트가 합니다.

사이트 키에서 그 보안 페이지를 열고 검증에 게임 요구를 켜세요. 이제부터 이 키의 모든 방문자는 통과하려면 설치된 게임 중 하나를 플레이해야 하며, 맨 체크박스를 푸는 것만으로는 더 이상 충분하지 않습니다. (게임이 최소 하나 설치되기 전에는 게이트를 켤 수 없으며, 그래서 2단계가 먼저 옵니다.)

게이트가 켜지면 Caputchin이 각 방문자가 어떤 설치된 게임을 받을지 고르고, 일회용 서명 티켓을 통해 그것을 건넵니다. 방문자도, 봇도 게임을 고르거나, 건너뛰거나, 더 쉬운 것으로 바꿀 수 없습니다: 그 선택은 Caputchin 쪽에서, 매 세션마다 새로 합니다. 바로 그것이 게임을 그저 보기 좋은 덤이 아니라 진짜 보호로 만듭니다.

키 묶음 전체를 관리하나요? 팀에는 모든 사이트 키에 게임 요구가 있는 자체 보안 페이지가 있으며, 이것이 팀의 모든 키에 게이트를 한 번에 켭니다.

4. 요소 교체하기

이제 페이지입니다. 게임은 다른 요소, <caputchin-game>에 렌더링됩니다. 당신이 이미 더한 import "@caputchin/widget"가 그것도 등록하니, 새로 설치할 것은 없습니다. 키가 이제 게임을 요구하므로, 그 위의 체크박스 전용 <caputchin-widget>은 더 이상 통과하지 못하니, 이 교체가 마지막 필수 단계입니다.

문의 폼에서 그 한 줄을 바꾸세요:

// before
<caputchin-widget sitekey="cpt_pub_..." />

// after
<caputchin-game sitekey="cpt_pub_..." />

게임 id는 넘기지 않습니다. 키가 게임을 요구하므로, Caputchin이 당신의 설치된 게임 중 하나를 내며 방문마다 그것을 고릅니다. 특정한 것을 고정하거나 회전을 일부로 한정하고 싶으면, 그것을 이름으로 지정하세요(각각 키에 설치되어 있어야 합니다):

// always Leaf Memory
<caputchin-game sitekey="cpt_pub_..." game="caputchin/games/leaf-memory" />

// a random one of these two per visit
<caputchin-game
  sitekey="cpt_pub_..."
  games="caputchin/games/leaf-memory,caputchin/games/dino-runner"
/>

키에 설치되지 않은 게임을 이름으로 지정해도 그것을 로드하지 않습니다: 위젯은 방문자를 통과시키는 대신, 게이트에 그런 게임이 없다고 알립니다.

5. 시험해 보기

앱을 새로고침하세요. 체크박스는 사라졌습니다: 방문자는 이제 샌드박스된 iframe 안에서 게임을 플레이합니다. 그가 이기면 위젯은 폼에 똑같은 숨겨진 caputchin-token 필드를 더하니, 당신의 FormData 읽기와 백엔드 /siteverify 확인은 둘 다 이전 레슨에서 바뀌지 않은 채로 있습니다.

사이트 키의 통계를 열면, 세션이 이전과 같은 깔때기를 따라 흐르는 것을 봅니다. 전체 화면을 단일 게임으로 걸러, 하나를 다른 하나와 비교할 수 있습니다.

BananaSeed의 문의 폼은 이제 모든 방문자가 풀어야 하는 진짜 플레이 가능한 게임이 지키며, 모든 제출은 여전히 당신의 서버에서 검증됩니다. 출시했습니다. 🎉

당신은 빈 계정에서 검증되고 게임이 지키는 폼까지 왔습니다.

방금 일어난 일

다음에 올 것

여기서부터 당신이 가장 손을 뻗을 법한 영역들입니다:

• 게임 맞춤화하기: 게임의 언어, 스킨, 난이도를 설정하세요.
• 보안: 게임 게이트, proof-of-work 난이도, 오리진, 그리고 키 보호의 나머지.
• 통계와 세션: 깔때기를 읽고 하나의 게임을 다른 하나와 비교하세요.
• 계정 관리: 로그인, 액세스 토큰, 결제, 좌석.
• 팀: 사이트 키를 정리하고, 유료 요금제에서는 팀을 초대하세요.