Vue School の Vue+Firebase Authentication のメモ

はじめに

Vue SchoolのVue+Firebase Authenticationの受講記録です。

似たような物を既にやっていたりするので流れのメモと重要そうな所をメモしています。
Vueについては特に難しいことはしていないためメモを取っていません。
全体的に1HTMLの中でVue/Firebase共にscriptタグで読み込んで実装していきます。

教材的にはこの辺もVue、Firebase的に流し見はしたいなと思っています。
Vuex for Everyone / Vue.js + Firebase Realtime Database

英語は聞き取りづらいかもしれません。ただCCがいい感じに表示できていたことを考えると自分の耳を疑ったほうが良いのかもしれませんが…。

1 - Introduction to Firebase Authentication 1:35

コース/Firebaseの説明

お試しでブラウザコンソールでの実演
HTMLの中でVueを使いつつ実装を始める
email/passwordでの実装を行う
signUp実装
- firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
登録できるもののリアクションがないので登録状態の変更を検知する
- firebase.auth().onAuthStateChanged(user => {this.authUser = user})
登録したら this.authUser にemailが格納されて可視化される
signOutの実装
- firebase.autu().signOut()
signInの実装
- firebase.auth().signInWithEmailAndPassowrd(this.email, this.password)

3 - Firebase Authentication Error Handling 3:17

ログインに失敗した場合のエラーハンドリング等コールバックの取扱の説明
auth() のメソッドは全てPromiseを返す

実際に下記のようになる

firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
  .then(user => {this.authUser = user})
  .catch(error => alert(error.message))

firebase.auth().signInWithEmailAndPassowrd(this.email, this.password)
  .then(user => {this.authUser = user})
  .catch(error => alert(error.message))

firebase.auth().signOut()
  .then(() => {this.authUser = null})

上記実装を行うと2番の動画で行った onAuthStateChanged は不要になる。削除。

と思いきや、Observerでauthオブジェクトを管理するのがオススメとのことで、
上記の then 系の実装を削除して、消したばかりの onAuthStateChanged を復元する。

4 - Firebase Authentication via Third-Party Providers 3:37

Third-Partyアカウントを使った認証の説明
今回はGoogleを使う

const provider = new firebase.auth.GoogleAuthProvider()
firebase.auth().signInWithPopup(provider)
  .catch(error => alert(error.message))
  .then(data => console.log(data.user, data.credential.accessToken))

GoogleAuthProvider() の Google 部分を他のサービスにすると他のサービスとなる

Third-Partyアカウントからはプロフィール写真や名前も取り込む
authUser.photoURL authUser.displayName 等に格納されている

5 - Update Firebase Authentication User Profile 2:59

ユーザーのプロファイルを更新する
displayName の更新
photoURL の更新
ローカルに displayName photoURL 変数を作成して3番の動画で設定しているObserverにも変更するように登録
実際の更新方法

this.authUser.updateProfile({
  displayName: 'name',
  photoURL: 'URL'
})

6 - Update Firebase Authentication User Email and Password 3:28

emailとpasswordの変更方法は上記（ displayName 、 photoURL ) とは違う
5番の動画で行なったのと同じように email / password 変数を作成
更新方法（Email）

updateEmail () {
  this.authUser.updateEmail(this.email)
}

更新方法（Password）

updatePassword () {
  this.authUser.updatePassword(this.newPassword)
    .then(() => { this.newPassword = null}) // 成功したら新しい設定用のパスワードをクリア
    .catch(error => alert(error.message))
}

7 - Link Multiple Firebase Authentication Providers to One User Account 5:19

1つのアカウントに対しての複数のサービスの連携
Email/Password認証のアカウントGoogleアカウントを紐付ける
一旦Firebase Consoleでログイン系データを全部消す
linkWithPopup の実装部分 (signInWithPopup とかなり似ている)

const provider = new firebase.auth.GoogleAuthProvider()
this.authUser.linkWithhPopup(provider)
  .catch(error => alert(error.message))
  .then(data => console.log(data.user, data.credential.accessToken))

Email/Passwordでのログイン後上記を呼び出すようにすると連携される
連携情報は authUser.providerData (authUserはローカルで定義した名前の変数、今までの流れ的に）に配列で認証されているproviderの情報が入っている
認証中ユーザーが特定のproviderと連携しているかどうか（Google）

linkedGoogle() {
  return !!this.authUser.providerData.find(provider => provider.providerId === 'google.com')
}

認証中ユーザーが特定のproviderと連携しているかどうか（Email/Password）

linkedGoogle() {
  return !!this.authUser.providerData.find(provider => provider.providerId === 'password')
}

連携解除

unlinkGoogle() {
  this.authUser.unlink('google.com')
}

8 - Additional User Data and Firebase Authentication 4:19

ユーザーデータの追加
Firebaseのunique idを使用して他のDBと連携することで容易に実装が可能
realtime database を例にして試してみる
更新処理

updateCustomDetails() {
  firebase.database().ref('users').child(this.authUser.uid)
    .update({favoriteFood: this.favoriteFood})
}

ログインした時に取得する処理

firebase.auth().onAuthStateChanged(user => {
  this.authUser = user
  if (user) {
    this.displayName = user.displayName
    this.photoURL = user.photoURL
    this.email = user.email

    firebase.database().ref('users').child(user.uid).once('value', snapshot => {
      if (snapshot.val()) {
        this.favoriteFood = snapshot.val().favoriteFood
        Vue.set(this.authUser, 'favoriteFood', this.favoriteFood)
      }
    })
  }
})

おわりに

動画全体が短いのでさっくり学ぶには良さそうでした。
~~ただ今回の教材はぱっと見る限りでは完成のソースコードもなさそうですね…。~~

githubにあるようです。失礼致しました。

今回は特に実際にプロジェクトを作らず、ここが欲しかったorあとで参照するかもという所をメモするだけにしてみました。
人には伝わりづらくなったような、自分にはリファレンス性が高まったような…。まだ良いか悪いかはわかりません。

それでは！

参考

参考というかこの記事で知って受講しました。ありがとうございます
Firebase Authentication で「メール認証」と「Google 認証」を実装できる無料コース「Vue.js + Firebase Authentication」を受講した

Vue School の Vue+Firebase Authentication の メモ