isoppp

Vue School の Vue+Firebase Authentication の メモ

  • Firebase
  • Learn
  • Vue

はじめに

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の説明

2 - Sign up, in, or out with Firebase Authentication 7:48

  • お試しでブラウザコンソールでの実演
  • 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の変更方法は上記( displayNamephotoURL ) とは違う

  • 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))
}
  • 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」を受講した