Cocos Creator を使って Firebase Authentication を実装する

いろいろややこしかったから、新たにまとめてみました。

Firebase プロジェクト作成

適当にプロジェクト名を決めます。

今回は使わないので、Google アナリティクスは有効にしません。

Web アプリを有効に

Web アプリから Firebase にアクセス出来るようにします。

適当にアプリ名を決めます。

あとで必要になるのので、firebaseConfig をメモします。

匿名認証を有効に

一番簡単な匿名認証で動作確認をするため、匿名認証を有効にします。

左メニューの開発項目から、Authentication を選択して、ログイン方法の匿名を有効にします。

Cocos Creator プロジェクト作成

TypeScript を選択してプロジェクト作成をします。

TypeScript を選んだ理由は、JavaScript の上位互換で、JavaScript には無かった型の定義出来るからです。

ミスの少ないコーデングが出来るようになります。

プロジェクトに Firebase パッケージを追加

npm を使って、プロジェクトに Firebase パッケージを追加します。

Windows PowerShell でプロジェクトフォルダを開き、下記コマンドを実行します。

npm install --save firebase

Firebase Authentication 処理作成

画面

キャンバスの中に、匿名認証をするボタンと、認証状態を取り消すログアウトボタンと、あと、ユーザー情報を表示するためのラベルを配置しました。

処理

「Helloworld.ts」ファイルの先頭で、Firebase をインポートします。

import * as firebase from 'firebase/app';
import "firebase/auth";

1行目は、Firebase を使う場合は必須です。
2行目は、認証を使う場合のみインポートさせます。

Firebase を初期化します。

const firebaseConfig = {
  // メモしたfirebaseConfig
};
firebase.initializeApp(firebaseConfig);

initializeApp に、firebaseConfig を設定し初期化します。

認証状態が変わったら、画面に反映させる。

firebase.auth().onAuthStateChanged(function (user) {
  let displayName = self.node.getChildByName("displayName").getComponent(cc.Label);
  let email = self.node.getChildByName("email").getComponent(cc.Label);
  let emailVerified = self.node.getChildByName("emailVerified").getComponent(cc.Label);
  let photoURL = self.node.getChildByName("photoURL").getComponent(cc.Label);
  let isAnonymous = self.node.getChildByName("isAnonymous").getComponent(cc.Label);
  let uid = self.node.getChildByName("uid").getComponent(cc.Label);
  let providerData = self.node.getChildByName("providerData").getComponent(cc.Label);
  if (user) {
    // User is signed in.
    displayName.string = "displayName: " + user.displayName;
    email.string = "email: " + user.email;
    emailVerified.string = "emailVerified: " + user.emailVerified;
    photoURL.string = "photoURL: " + user.photoURL;
    isAnonymous.string = "isAnonymous: " + user.isAnonymous;
    uid.string = "uid: " + user.uid;
    providerData.string = "providerData: " + user.providerData;
  } else {
    // User is signed out.
    displayName.string = "displayName: ";
    email.string = "email: ";
    emailVerified.string = "emailVerified: ";
    photoURL.string = "photoURL: ";
    isAnonymous.string = "isAnonymous: ";
    uid.string = "uid: ";
    providerData.string = "providerData: ";
  }
});

認証状態が変わると、onAuthStateChanged 関数が呼ばれます。

2行目から8行目で、画面に配置したラベルを取得しています。
11行目から17行目で、認証済み情報を画面に表示しています。
20行目から26行目で、未認証の時に画面を元に戻しています。

匿名認証ボタン

onClickSignInAnonymously() { 
  firebase.auth().signInAnonymously();
}

ログアウトボタン

onClickSignOut() {
  firebase.auth().signOut();
}

動作確認

ブラウザー

起動直後は認証前なので、uidなどは何も表示されていません。

匿名認証ボタンを押したら、signInAnonymously 関数が実行されて、Firebase に匿名認証されます。

ログアウトボタンを押したら、認証前の状態に戻ります。

Firebase Authentication に、認証情報が登録されます。

何回も、匿名認証とログアウトを繰り返すと、使い終わった認証情報が溜まっていきます。

Android アプリ

apkにビルドして、Android実機でも確認してみます。

問題なく動作しました。

まとめ

Firebase を使った認証処理が簡単に実装できました。

しかも、クロスプラットフォーム対応なので、ブラウザーで実行しようが、Androidアプリで実行しようが、同じ動作をします。

感動しました。

Cocos Creator には SDKBOX というライブラリが用意されており、その中で Firebase アナリティクス だけが使えるのですが、自前でインポートして使った方が簡単だと思います。

しかも未だに、Firebase アナリティクス しか使えなくて、認証や、データベースといった他の機能が実装されていないので、SDKBOX は今後一生使わないですね。

webビルドにも対応していませんでしたし。

ということで今後は、SDKBOX を使わないで、Firebase の機能を実装して行こうと思います。