FirebaseはGoogleが提供しているモバイルアプリ開発向けバックエンドサービスです。前回は認証について紹介しましたが、今回はそれをベースに匿名認証を使ってみたいと思います。匿名認証はIDやパスワードの設定が必要ない、簡易的な認証です。

Firebaseの設定

Firabaseコンソールで、[Authentication]メニュー > [ログイン方法]タブを選択し、匿名ログインを有効化します。

テンプレートの修正

前回作成したVueのテンプレートを、以下のように変更します。

変更箇所は次の通りです。

まず匿名ユーザとしてログインするためのボタンを設置します。

前回はログイン後にメールアドレスを表示しましたが、匿名ユーザでログインした場合はメールアドレスがありません。そのためログインユーザの表示処理を変更します。匿名ユーザであることを表す user.isAnonymous (コードは後述)がtrueであれば「匿名ユーザ」と表示します。

JavaScriptの処理

次にデータの初期化についてです。匿名ユーザであることを表す isAnonymous を追加します。

isAnonymousはデフォルトではfalseに設定しています。

ログイン処理を実行すると、ユーザの認証状態変更を検知する firebase.auth().onAuthStateChanged が実行されます。Firebaseから返ってくるuserオブジェクトの中にisAnonymousが含まれており、匿名ユーザの場合はisAnonymousの値がtrueになります。

ログアウト時は変数userがnullになります。

匿名認証を行う

Vueのイベント処理の中に、匿名認証を行うイベントを追加します。匿名認証を行うにはFirebaseに用意されている firebase.auth().signInAnonymously() を実行します。

認証が完了すると認証ステータスが変化して、上記 firebase.auth().onAuthStateChanged が実行されます。

以上で匿名認証が完了です。アプリを実行すると、匿名ユーザが追加されていることがFirabaseコンソールで確認できます。

全体のソースコードは以下のようになります。


今回のコードはmoongift/monaca_firebase_anonymouse_authにアップロードしてあります。実装時の参考にしてください。

匿名ユーザは利用者にユーザ情報の入力を促さがなくても使えますので、ログイン機能を持たないアプリでも、ユーザ固有のデータをセキュアに保持する用途等で利用できるでしょう。

Firebase