Firebase에서 무료로 만드는 하이스코어DB(2) : 과금·인증을 생각한다

마지막까지 사막의 양

무료 프로그램 학습용 피코 피코 게임 사막의 양을 작성하면서 그 과정을 기사로 하고 있다.
현재는 하이스코어 실장편으로, DB를 firebase에 선정해 실장을 실시하고 있는 중이 된다.

청구에 관한 이것

읽기, 쓰기로 청구가 발생.
Spack 플랜의 무료 테두리는 이하.


처리
건수


쓰기
2만/일

읽기
5만/일


「회수」가 아니라 「건수」같기 때문에 주의.

하이 스코어 테이블이라고 하는 성질상, 상위의 스코어로서의 기입은 지극히 적은 하즈.
그래서 Functions를 이용하여 '쓰기 이벤트 시 상위 레코드를 집계하여 1 레코드로 정리하는 처리'를 만들고 싶었지만, Spark 플랜에서는 Functions를 이용할 수 없게 되었기 때문에 포기했다.
※좌절 기미의 샘플 코드는 리포지토리에 일단 커밋해 두었다.

현재 20건 정도의 더미 레코드를 이용해 조금 개발했을 뿐, 읽기 수가 680이 되었기 때문에 괜찮은 액세스가 있으면 순식간에 읽기 수 5만 건에 도달하는 것 같았다.

유저에게는 하이스코어 등록을 하고 있는 것을 알리기 위해, 퍼스트 뷰로 하이스코어의 표시를 실시하고 싶지만, Functions 를 움직일 수 없기 때문에, 1일 1회 하이스코어 갱신등의 구현에는 할 수 없다.
그래서 하이 스코어는 기동시에 캐시해, 하이 스코어에 「자신의 스코어」가 엔트리 하지 않는 한은 갱신되지 않아도 괜찮다고 해서, 취득한 하이 스코어보다 자신의 스코어가 상회했을 때만 하이 스코어를 갱신 하는 사양으로서 가능한 한 읽기 횟수를 줄이기로 했다.

DB 쓰기 정보

올드 게임답게 누구나 임의의 닉네임으로 하이스코어를 등록가능한 사양으로 할 예정이었다.
그러나 webapp의 경우, firebase의 databaseURL이 취득 가능하기 때문에, 「누구라도」등록 가능으로 했을 경우, 외부로부터 어떠한 방법으로 데이터 등록이 가능하게 되어 과금되는 것이 우려된다.

그 때문에 DB에 스코어 등록 가능하게 되는 것은 로그인 끝난 유저로 하기로 했다.firebase.auth.AuthUI() 를 사용하면 매우 쉽게 SNS 로그인을 구현할 수 있었다.

auth.js

var firebaseAuthUiConfig = {
  autoUpgradeAnonymousUsers: true,
  signInFlow: 'popup',
  signInOptions: [
    // ログイン可能としたいproviderを列挙
    // Facebook, Twitter, Github はそれぞれアプリ作成が必要
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    // firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    // firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    // firebase.auth.PhoneAuthProvider.PROVIDER_ID,
    firebaseui.auth.AnonymousAuthProvider.PROVIDER_ID
  ],
  tosUrl: './terms-of-service.html',
  privacyPolicyUrl: './privacy-policy.html',
  callbacks: {
    signInSuccessWithAuthResult: function(authResult, redirectUrl) {
      console.log('signed in')
      return false;
    }
  }
};

var firebaseAuthUi = new firebaseui.auth.AuthUI(firebase.auth());

game.js

// 指定したタグに対してログインUIを作成する
firebaseAuthUi.start('#firebaseui-auth-container', firebaseAuthUiConfig)

index.html

// firebaseによるログインUIが作成されるタグ
<div id="firebaseui-auth-container"></div>

다만, 무명의 게임으로 갑자기 회원등록을 요구하면 원래 플레이 받을 수 없다고 생각하기 때문에, 결과 화면에서 하이스코어가 갱신되었을 때만 로그인을 요구하는 실장으로 하기로 했다.

※로그인 UI. 로그인 방법을 선택하면 팝업이 표시됩니다.

결론

이번에는 하이스코어 처리를 완성할 예정이었지만, 인증 처리도 추가했기 때문에 완료하지 않았다.
하지만, firebase는 SNS 로그인도 빌어 먹기 쉽습니다.

작업중인 파일은 다음에 커밋됩니다.
htps : // 기주 b. 코 m / 카쿠 3 / 테 ぇ ぇ ぇ ㅇ