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人ユーザーがログインしていると、それぞれのユーザー情報を保存した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;
この記事が気に入ったらサポートをしてみませんか?