firebaseとvueのログインとなりすまし防止を理解

firebaseとvueを使っているアプリで、

vue側でログイン→ログインしないとメッセージを投稿できないようにしている。

これは、vue側だけがログインによる制限をされている状態。

実は、firebase側は制限がない状態。

→ログインさえしていれば、書き込みできる状態。データベースに自由にメッセージ保存したり、ユーザー情報もなりすましたりできる状態。

→firebase側もログイン時にできることを制限する必要がある。

→firebase側でルールという設定があり、request.auth.uidを実行すると、現在ログインしているユーザーIDを取得できる。

→vue側でfirebaseのログイン状態を取得するためにonAuthStateChangedというメソッドがある。

→firebaseでログインされている状態だったら、firebaseのユーザー情報を記録するデータベースにvue側からユーザー情報を記録する。

→firebaseでログインしている→vue側でfirebaseのログインを検知→vue側からfirebaseのユーザー情報のデータベースにユーザー情報を記録

上記の、

vue側からfirebaseのユーザー情報のデータベースにユーザー情報を記録

の部分をもう少し詳しく見ていく。

firebaseのonAuthStateChangedメソッドにuserという引数を渡す。

userオブジェクトにユーザーのIDなど情報が入っている。

mounted () {
   firebase.auth().onAuthStateChanged((user) => {
     if (user) {
       this.setUser(user)
        db.collection('profiles').doc(user.uid).set({
          uid: user.uid,
          displayName: user.displayName,
          photoURL: user.photoURL
        })

firebaseから取得した、ログインしているユーザーの情報が入ったuserオブジェクトの情報をstateに渡しつつ、同時に、ログインしているユーザーのユーザー情報を、firebaseのprofilesというユーザー情報を保存するコレクションのドキュメントのid名に、ログインしているユーザーのuser.uidを指定して、ユーザー情報を保存する。

例）

profiles/user.uid というドキュメントに、uid、displayName、photoURLというフィールド名（カラム名）を付けて、情報が入っている。

uid: user.uid=hoge
displayName: user.displayName=のあ
photoURL: user.photoURL=hoge/のあ.png

だとすると、

ドキュメントIDはhogeで、

profiles/hogeとなる。

ドキュメントID＝hogeに保存されているものは下記。

・uidカラムにuser.uidすなわちhoge

が保存されている。

・displayNameカラムにuser.displayName=のあ 

が保存されている。

・photoURLカラムにuser.photoURL=hoge/のあ.png

が保存されている。

ログイン情報を元に、上記のように、データを保存する。

ユーザー毎のユーザー情報を保存するprofiles/user.uidのドキュメントを

vue側から作成するということ。

3人ユーザーがログインしていると、それぞれのユーザー情報を保存した３つの異なるprofiles/user.uidのドキュメントが作成されるということ。

次に、firebase側で、この情報を保存できるようにルールを書く。

rules_version = '2';
service cloud.firestore {
 match /databases/{database}/documents {
　   match /profiles/{profileId} {
　　    allow write: if request.auth.uid == profileId;		
　 　 }
  　・・・
 }
}

request.auth.uidでログインしているuserのuid、つまりuser.uidが取得できる。

ログインしているユーザーIDがhogeだとすると、

user.uid=hogeとなる。

・firebaseがrequest.auth.uidで現在ログインしているユーザーのuidを取得

・上記のuidと、vue側で保存をしようとした/profiles/{profileId}

を比較し、同じ文字列だったら保存できるようにしている。

もし、ログインしているのが、uid=hogeで、vue側から保存をしようとしている/profiles/{profileId}　が/profiles/hogeeee

とかだったら、hoge != hogeeeeなので、アンマッチなので、vue側からhoge以外の人物がhogeになりすまそうとしていることになり、ユーザー情報をfirebaseに保存させないようになっている。

ログインしているユーザーのuid　!= vue側から保存リクエストするuid

なので、vue側から保存しようとしているのはログインしているユーザーではないと判定。

// pfofileId = hogeeee, request.auth.uid = hogeだと下記はfalseなので
// vue側からきたリクエストである /profiles/hogeeee というユーザー情報の保存リクエストは拒否される
match /profiles/{profileId} {
　　    allow write: if request.auth.uid == profileId;