Firebaseとionicで掲示板アプリを作成する⑤

nakaji

Firebaseを使ってスマホの掲示板を作成する

Firebaseを使ってサクッとリアルタイム掲示板を作っていきます。
現在の環境は以下の通り。

windows 10 64bit
Visual studio code 1.9.1
ionic 2.1.4
node.js 6.10.0
npm 4.2.0

今回は、ログインをしていない場合、掲示板が見れないようにしていきます。

Firebaseの設定変更

認証していないとデータの読み書きができないようにしていきます。

「Database」を選択します。

「ルール」を選択します。

ルールの内容を変更していきます。
今回は、読み取り書き込みともに認証していなければできないようにしていきます。

これで認証していなければ読み取りも書き込みもできなくなります。
その他のルールに関してはガイドを参考にしてください。

https://firebase.google.com/docs/database/security/

ionicプロジェクトを編集

認証している情報が残っているか確かめて残っていればそのまま掲示板へ、残っていなければログイン画面を表示して認証するようにしていきます。

ソースを編集

以下のモジュールに対して変更を行っていきます。

- src/pages/home/home.ts

認証しているかどうかを判断して、認証している場合はデータ取得、していない場合はログイン画面を表示する処理を記述します。

home.tsの編集

認証をしているかどうかを確かめていきます。

主にhome.tsへ以下のような変更をしていきます。

認証を実行（18行目）
認証情報の確認（21行目、27行目）
ログイン画面の表示（29～31行目）
ログイン後にデータ取得（30行目）

import { Component } from '@angular/core';

import { NavController,ModalController } from 'ionic-angular';
import { AngularFire, FirebaseListObservable, FirebaseAuthState } from 'angularfire2';
import { LoginPage } from '../login/login';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  talks: FirebaseListObservable<any>;
  content: string;
  private authState: FirebaseAuthState;

  constructor(public navCtrl: NavController, angularFire: AngularFire, public modalCtrl: ModalController) {
    // 認証
    angularFire.auth.subscribe((state : FirebaseAuthState) => {
      this.authState = state;

      if(this.authState != null) {
        // 認証情報がnullでない場合（認証できている場合） データを取得
        angularFire.database.list('/talks').subscribe(
          value => this.talks = angularFire.database.list('/talks'),
          error => console.log("error")
        );
      } else {
        // 認証情報がnullの場合（認証できていない場合） ログインしてからデータを取得
        let loginModal = this.modalCtrl.create(LoginPage,{},{"enableBackdropDismiss":false});
        loginModal.onDidDismiss(data=>this.talks = angularFire.database.list('/talks'));
        loginModal.present(); 
      }
    });
  }

  addTalk() {
    this.talks.push({
      name: "名無しさん",
      content: this.content
    });
    this.content = "";
  }

}