- 소개
- 게임 결과 활용
- 커스터마이징
- 시작하기
- Plans
- Documentation
- 게임 화면 임베딩
- Web
- React Native
- 게임 결과 수신
- Web
- React Native
- 게임 재시작
- Web
- React Native
- 게임 결과 검증
- 스낵게임 Biz 공개키
- QnA
- Q. 수신된 게임 결과를 믿어도 되나요?
소개
스낵게임 Biz는 스낵게임의 게임들을 코드 한 줄로 간편하게 임베딩할 수 있는 서비스입니다.
게임 결과 활용
게임 결과를 비즈니스에 알맞게 활용할 수 있습니다 🙂
이미 검증 시스템을 통과했으니까요!
커스터마이징
리소스 이미지, 색상, 게임결과 팝업 여부 …
커스터마이징이 가능한 백오피스를 제공합니다.
개발 리소스 없이 게임을 운영해보세요.
시작하기
비즈니스 임팩트에 더 집중해보세요!
게임 운영은 스낵게임이 할게요 💪🏻
Plans
Documentation
게임 화면 임베딩
게임 화면을 임베딩합니다
Web
iframe
태그를 사용합니다
<iframe src="https://biz.snackga.me/snack-game"/>
React Native
react-native-webview
를 사용합니다
<WebView source={{ uri: 'https://biz.snackga.me/snack-game' }} />
게임 결과 수신
게임 결과를 메시지로 수신합니다.
{
"type": "snackgameresult",
"payload": {
"original": {
"metadata": {
"gameId": 4,
"localizedName": "스낵게임 Biz"
},
"ownerId": 801,
"sessionId": 70,
"state": "EXPIRED",
"score": 0,
"createdAt": "2024-10-09T11:27:29.054329",
"percentile": 64
},
"signed": "eyJraWQiOiItMTUzNzE1OTU2MyIsImFsZyI6IlJTMjU2In0.eyJtZXRhZGF0YSI6eyJnYW1lSWQiOjQsImxvY2FsaXplZE5hbWUiOiLsiqTrgrXqsozsnoQgQml6In0sIm93bmVySWQiOjgwMSwic2Vzc2lvbklkIjo3MCwic3RhdGUiOiJFWFBJUkVEIiwic2NvcmUiOjAsImNyZWF0ZWRBdCI6IjIwMjQtMTAtMDlUMTE6Mjc6MjkuMDU0MzI5IiwicGVyY2VudGlsZSI6NjR9.T46CtaO_9m5u_tugKYe_SXp1oLqHKqgd1DnoF0S9k-1FFEb4xY-Jg5pb_GunP5_WFoDgNmWtIwiXTamFZ9au96SmHPEs9XhfhRjPjnAsUNXeANlZR_mbq3iMOh_XgWtAT6z-Po0JP3uligIs34uMySBhhC4DcdudQlH7kWHhYYxVlqhHFVpyBLY1PfYUcos0_ka9OAArQdab7yKdW2w1DkCCp8t3rzGot5Hg5Clvvd3TEurXc3z4Yq_YI6DRkmyK8WnunJk4TLpqcSG_fedKO0Qh4uew703RpiBlbCjdR5oFn0Us2NZVLgzkF6V6KHbn1F6j1YCaQ11nVm09Rq2yEQ"
}
}
Web
message
이벤트 리스너를 등록합니다.
const handleMessage = (event) => {
if (!event.data.type?.startsWith("snackgame")) return;
switch (event.data.type) {
case "snackgameresult":
alert(`got score ${event.data.payload.original.score} from snackgame`);
break;
}
};
window.addEventListener("message", handleMessage);
React Native
WebView
컴포넌트에 onMessage
핸들러를 전달합니다.
<WebView
...
onMessage={handleMessage}
/>
const handleMessage = (event) => {
const data = JSON.parse(event.nativeEvent.data);
if (!data.type?.startsWith('snackgame') return;
switch (data.type) {
case 'snackgameresult':
console.warn(`got score ${parsedData.payload.original.score} from snackgame`);
break;
}
};
게임 재시작
새 게임을 시작합니다.
* 로비 화면에서만 동작하는 기능입니다.
Web
iframe
에 접근합니다- 메시지를 발송합니다
const iframe = document.querySelector("iframe");
const iframeRef = useRef(null);
...
<iframe ref={iframeRef} />
const handleRestart = () => {
iframe.contentWindow.postMessage(
{ type: "snackgame-client-restart-invoked" }, "*"
);
};
React Native
WebView
에 접근합니다- 메시지를 발송합니다
const webViewRef = useRef(null);
...
<WebView ref={webViewRef} />
const handleRestart = () => {
const message = JSON.stringify({ type: "snackgame-client-restart-invoked" });
webViewRef.current.postMessage(message);
};
게임 결과 검증
2024. 10. 9. 부터 서명된 게임 결과가 전송됩니다.
{
"original": {
"metadata": {
"gameId": 4,
"localizedName": "스낵게임 Biz"
},
"ownerId": 801,
"sessionId": 70,
"state": "EXPIRED",
"score": 0,
"createdAt": "2024-10-09T11:27:29.054329",
"percentile": 64
},
"signed": "eyJraWQiOiItMTUzNzE1OTU2MyIsImFsZyI6IlJTMjU2In0.eyJtZXRhZGF0YSI6eyJnYW1lSWQiOjQsImxvY2FsaXplZE5hbWUiOiLsiqTrgrXqsozsnoQgQml6In0sIm93bmVySWQiOjgwMSwic2Vzc2lvbklkIjo3MCwic3RhdGUiOiJFWFBJUkVEIiwic2NvcmUiOjAsImNyZWF0ZWRBdCI6IjIwMjQtMTAtMDlUMTE6Mjc6MjkuMDU0MzI5IiwicGVyY2VudGlsZSI6NjR9.T46CtaO_9m5u_tugKYe_SXp1oLqHKqgd1DnoF0S9k-1FFEb4xY-Jg5pb_GunP5_WFoDgNmWtIwiXTamFZ9au96SmHPEs9XhfhRjPjnAsUNXeANlZR_mbq3iMOh_XgWtAT6z-Po0JP3uligIs34uMySBhhC4DcdudQlH7kWHhYYxVlqhHFVpyBLY1PfYUcos0_ka9OAArQdab7yKdW2w1DkCCp8t3rzGot5Hg5Clvvd3TEurXc3z4Yq_YI6DRkmyK8WnunJk4TLpqcSG_fedKO0Qh4uew703RpiBlbCjdR5oFn0Us2NZVLgzkF6V6KHbn1F6j1YCaQ11nVm09Rq2yEQ"
}
signed
필드에 서명된 게임 결과가 전달됩니다스낵게임 Biz 공개키로 서명된 게임 결과를 검증할 수 있으며, 두 가지가 보장됩니다.
- 스낵게임 Biz에서 발송하였음
- 발송 이후 누구도 결과를 조작하지 않았음
스낵게임 Biz 공개키
스낵게임 Biz의 공개키는 JWKS(JSON Web Key Set) 형태로 배포됩니다.
https://biz.snackga.me/jwks.json
kid로 적절한 공개키를 선택, 서명된 게임 결과를 검증할 수 있습니다.
QnA
‣