【Nuxt.js】Firebase Auth × Cloud Firestore ログインアカウントの送信と取得を考える②

前置き

【Nuxt.js】Firebase Auth × Cloud Firestore ログインアカウントの送信と取得を考える

こちらの続きです。

ルール変更して安全な状態を作りたい❗️
ログインユーザーかつ
送信したデータ内のuidと
authで取得しているuidが
一致する場合のみ
読み書きしたい❗️

ということでやっていきます。

ルールの確認とコード修正

ルールの前提

条件を書かなければfalseです。
この場合はcitiesコレクション内の
全てのドキュメントの読み書きはできても
hogehogeコレクションなど
別のコレクションの読み書きは
一切できません。
安心💫☝️

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /cities/{city} {
      allow write: if true;
    }
  }
}

rules_version = '2';

service cloud.firestore {

match /databases/{database}/documents {

match /cities/{city} {

allow write: if true;

}

前回の物をチェック

💁‍♀️ルールは現在こらち

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /task/{uid} {
      allow read, write: if request.auth != null && request.auth.uid == resource.data.uid;
    }
  }
}

rules_version = '2';

service cloud.firestore {

match /databases/{database}/documents {

match /task/{uid} {

allow read, write: if request.auth != null && request.auth.uid == resource.data.uid;

}

前の記事の1番下、
修正コードが間違っていたので、
ルール変更前の成功コード②をそのまま使用

export const actions = {
  async getData({ commit }) {
    try {
      const user = this.$fire.auth.currentUser
      const querySnapshot = await this.$fire.firestore
        .collection('task')
        .where('uid', '==', user.uid)
        .get()
      const todos = []
      querySnapshot.forEach((doc) => {
        const data = doc.data()
        todos.push(data)
      })
      commit('setData', todos)
    } catch (error) {
       console.log(error)
    }
  },
}

export const actions = {

async getData({ commit }) {

try {

const user = this.$fire.auth.currentUser

const querySnapshot = await this.$fire.firestore

.collection('task')

.where('uid', '==', user.uid)

.get()

const todos = []

querySnapshot.forEach((doc) => {

const data = doc.data()

todos.push(data)

})

commit('setData', todos)

} catch (error) {

console.log(error)

}

これでルール変更前の取得ができました。

しかし❗️

書き込みで権限なしのエラーが起きました💥✍️
つまり取得のルールに問題はなさそう…

しかしここには読み取りの注意はあっても
書き込みについては何も書かれていない…
データを安全にクエリする

書き込みのみtrueにしてみる

試しに変更したら、
書き込みと読み取り
両方うまく行きました。

service cloud.firestore {
  match /databases/{database}/documents {
    match /task/{task} {
      allow read:  if request.auth != null && request.auth.uid == resource.data.uid;
      allow write: if true;
    }
  }
}

service cloud.firestore {

match /databases/{database}/documents {

match /task/{task} {

allow read: if request.auth != null && request.auth.uid == resource.data.uid;

allow write: if true;

}

まだ送信してないのに
resouce.data.uidと
一致しないから❓
と思いましたが、
公式のサンプルコードに
書いてますからねぇ…。

ワイルドカード、再帰ワイルドカード

そしてここの下の方を見ていくと…
readとwriteの指定場所が違う👀
データを安全にクエリする

rules_version = '2';
service cloud.firestore {

  match /databases/{database}/documents {
    // Authenticated users can query the posts collection group
    // Applies to collection queries, collection group queries, and
    // single document retrievals
    match /{path=**}/posts/{post} {
      allow read: if request.auth != null;
    }
    match /forums/{forumid}/posts/{postid} {
      // Only a post's author can write to a post
      allow write: if request.auth != null && request.auth.uid == resource.data.author;

    }
  }
}

rules_version = '2';

service cloud.firestore {

match /databases/{database}/documents {

// Authenticated users can query the posts collection group

// Applies to collection queries, collection group queries, and

// single document retrievals

match /{path=**}/posts/{post} {

allow read: if request.auth != null;

}

match /forums/{forumid}/posts/{postid} {

// Only a post's author can write to a post

allow write: if request.auth != null && request.auth.uid == resource.data.author;

}

{path=**}は再帰ワイルドカード、
バージョンによる注意も書いてあります。
任意の深い階層にも
適応されるというものです。

ワイルドカードと再帰ワイルドカードの違い

match/cities/{city}
citiesコレクションに一致する
全てのドキュメントに適応
/cities/SF
/cities/NYC
などなど

match/cities/{city}/{document=**}
citiesコレクション内の
全てのドキュメントの
全てのサブコレクションに適応。

この辺が参考になりそう…
と思って色々ためしたけども
ダメでした😯
つまり原因は他にある。
Firestore rules tips
CollectionGroupのFirebaseError: Missing or insufficient permissionsで躓いたときの対処法

request.resource.data

これを見て上手くいきました！！！
データの検証

書き込みの場合、
まだfirestoreにないデータを送るので
requestが必要ということみたいです。
なので、writeではrequestをつければ解決🙌💕

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /task/{task} {
      allow write: if request.auth != null && request.auth.uid == request.resource.data.uid;
      allow read: if request.auth != null && request.auth.uid == resource.data.uid;
    }
  }
}

rules_version = '2';

service cloud.firestore {

match /databases/{database}/documents {

match /task/{task} {

allow write: if request.auth != null && request.auth.uid == request.resource.data.uid;

allow read: if request.auth != null && request.auth.uid == resource.data.uid;

}

成功ルールとコード

firestoreのルールと
vuex actionsのコードはこちら

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /task/{task} {
      allow write: if request.auth != null && request.auth.uid == request.resource.data.uid;
      allow read: if request.auth != null && request.auth.uid == resource.data.uid;
    }
  }
}

rules_version = '2';

service cloud.firestore {

match /databases/{database}/documents {

match /task/{task} {

allow write: if request.auth != null && request.auth.uid == request.resource.data.uid;

allow read: if request.auth != null && request.auth.uid == resource.data.uid;

}

export const actions = {
  async getData({ commit }) {
    try {
      const user = this.$fire.auth.currentUser
      const querySnapshot = await this.$fire.firestore
        .collection('task')
        .where('uid', '==', user.uid)
        .get()
      const todos = []
      querySnapshot.forEach((doc) => {
        const data = doc.data()
        todos.push(data)
      })
      commit('setData', todos)
    } catch (error) {
       console.log(error)
    }
  },
}

export const actions = {

async getData({ commit }) {

try {

const user = this.$fire.auth.currentUser

const querySnapshot = await this.$fire.firestore

.collection('task')

.where('uid', '==', user.uid)

.get()

const todos = []

querySnapshot.forEach((doc) => {

const data = doc.data()

todos.push(data)

})

commit('setData', todos)

} catch (error) {

console.log(error)

}

index.vueで
getDataするようにして
実際表示するul>liのコンポーネントで
gettersで中身を表示

<script>
export default {
  async fetch({ store }) {
    await store.dispatch('getData')
  },
}
</script>

export default {

async fetch({ store }) {

await store.dispatch('getData')

}

</script>

<script>
export default {
  computed: {
    todos() {
      return this.$store.getters['todos']
    },
  },
}
</script>

export default {

computed: {

todos() {

return this.$store.getters['todos']

}

</script>

まとめ

取得で.whereを使うだけでも
セキュリティを高めることはできましたが、
やはりルールを設定して
強固にしていくことも必要ですよね🌟

ルールは難しそうと感じましたが、
これらを理解しておけば
簡単なルールは設定できます✨

firestoreへの送信データの構成
それに合わせたワイルドカードなど
用意されているrequest.authなどの変数