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

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"
/>

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

게임이 당신의 페이지에 어떻게 자리 잡는지(inline 패널, modal, 또는 fullscreen)와 얼마나 크게 렌더링되는지를 제어하려면, 크기와 레이아웃을 참고하세요.

5. 시험해 보기

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

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

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

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

방금 일어난 일

다음에 올 것

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

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