イノベーション エンジニアブログ


株式会社イノベーションのエンジニアたちの技術系ブログです。ITトレンド・List Finderの開発をベースに、業務外での技術研究などもブログとして発信していってます!


このエントリーをはてなブックマークに追加

Firebaseの匿名認証とFirestoreのリアルタイム更新で遊んでみたお話

涼しくなってきましたね。

koheです。

今回はFirebaseの 匿名認証 と リアルタイムデータ更新 機能をVueで遊んで見ました。

匿名認証

GoogleやTwitterの認証を使わずに、匿名の認証をし、UUIDを発行したい!!

firebase_2.png

まずfirebaseのコンソール画面から匿名ログインを有効にします。

 <button  label="Use without login"  @click="signupByAnonymous" color="primary" />

methods :{
    checkLogin () {
      firebase.auth().onAuthStateChanged((user) => {
        if (user) {
          this.setMyUID(user.uid)
          this.goScorePage()
        }
        this.isProgress = false
      })
    },

    signupByAnonymous () {
      this.isProgress = true
      firebase.auth().signInAnonymously().catch(function (error) {
        console.log(error.code)
        console.log(error.message)
        alert('匿名ログインに失敗しました')
        this.isProgress = false
      })
    },
 }

そしてこのメソッドを起動すると…

firebase_1.png

匿名ユーザができてる!!

匿名ユーザの情報をその後のGoogleAuthなどの認証に紐付けることもできるそう。 それはまた後ほど。

Firestoreリアルタイムデータ更新

  listenDataFromScoreDB () {
    const unsub = firebase.firestore().db.collection('koooohe').doc("bbb")
      .onSnapshot((doc) => {
      		this.Item = doc.Item
       }
      })
  },

kooooohe collection の bbb documentが変わるたびに、this.Itemに値が代入され続けます。

データの監視を止めるには unsub() を実行 ↑を適切なタイミングで行わないと悲惨なことになるので注意。

ちなみに
Swiftとかだと、こういった変更の種類に応じて、処理を変えれるのですが、NodeJSにはまだ対応していないため今回は断念。

db.collection("cities").whereField("state", isEqualTo: "CA")
    .addSnapshotListener { querySnapshot, error in
        guard let snapshot = querySnapshot else {
            print("Error fetching snapshots: \(error!)")
            return
        }
        snapshot.documentChanges.forEach { diff in
            if (diff.type == .added) {
                print("New city: \(diff.document.data())")
            }
            if (diff.type == .modified) {
                print("Modified city: \(diff.document.data())")
            }
            if (diff.type == .removed) {
                print("Removed city: \(diff.document.data())")
            }
        }
    }

弊社の遠山がすでにブログで公開しているが、こんなものが作れたりする

toyama swift gif.gif

THE END