はじめに
今回は, Firebase Auth と Firestore を連携してユーザー用のドキュメントデータを作る方法を紹介したいと思います.
Firebase Auth でログインしても, そのユーザーの情報を保存する DB がないとサービスとして成り立ちません.
そこで便利なのが Firestore です!
手軽にデータを書き込んだり, 読み込んだりできるのでぜひ参考に活用してみてください.
ちなみにこのエントリーは昨日紹介したエントリー
からの続きの内容になります.
匿名ログインの仕組みと組み合わせることで, ほぼ通常ログインしているユーザーと変わらない挙動を実現できます.
概要
今回紹介する処理の内容は, 以下の流れになります.
- Firebase Auth でログインする
- (onAuthStateChanged が発火する)
- ログインしていたらそのユーザーのドキュメントを Firestore から取得して存在チェック
- 存在しなければ新規で
usersコレクションに user.uid をキーとするドキュメントを作成する
コード
firebase.auth().onAuthStateChanged(async (user) => {
// 未ログイン時
if (!user) {
// 匿名ログインする
firebase.auth().signInAnonymously();
}
// ログイン時
else {
// ログイン済みのユーザー情報があるかをチェック
var userDoc = await firebase.firestore().collection('users').doc(user.uid).get();
if (!userDoc.exists) {
// Firestore にユーザー用のドキュメントが作られていなければ作る
await userDoc.ref.set({
screen_name: user.uid,
display_name: '名無しさん',
created_at: firebase.firestore.FieldValue.serverTimestamp(),
});
}
}
});
解説
ユーザーのドキュメントを取得して存在チェックしよう
まずはユーザーのデータを取得しましょう.
以下のコードで Firestore からログインしたユーザーに対応するデータを取得できます.
var userDoc = await firebase.firestore().collection('users').doc(user.uid).get();
ここで重要なのが doc の key に user.uid を指定していることです.
ユーザーID はユニークであることが Firebase Auth 上で担保されているので, この値を使うことで Firestore 側のデータでもユニーク性を担保できます.
また, ここで初めてログインしたユーザーの場合は, まだ Firestore 上にデータがない可能性があるのでデータの存在チェックをします.
存在チェックは取得したドキュメントの exists で判定できます.
if (!userDoc.exists) {
...
}
存在する場合は true, 存在しない場合は false が返ってきます.
今回は, 存在しないときにユーザードキュメントを作成するので false だったら処理を行うようにしています.
ユーザードキュメントを作ろう
まだユーザードキュメントがなかった場合, 新たにユーザードキュメントを作りましょう.
ドキュメントが持っている ref の set メソッドでデータを作成することができます.
// Firestore にユーザー用のドキュメントが作られていなければ作る
await userDoc.ref.set({
screen_name: user.uid,
display_name: '名無しさん',
created_at: firebase.firestore.FieldValue.serverTimestamp(),
});
今回は, screen_name に uid を, display_name にはとりあえず 名無しさん を設定しました.
このプログラムを実際に動かすと以下のように Firestore 上にデータが書き込まれます!
タイムスタンプは serverTimestamp を使おう
先程のコードにしれっと出てきた
firebase.firestore.FieldValue.serverTimestamp()
についても触れさせてください.
これは何かというと, Firestore に送るデータに使うことで時間の書き込みをサーバー時間で行ってくれるというスグレモノです!
つまり, 端末の時間が壊れてたり時差があったりしても良い感じのタイムスタンプを書き込んでくれます.
今回のケースだと created_at, つまり生成した時間として使っています.
クライアント側で Date.now() を投げるような仕組みにしちゃってると, ハックされてめちゃめちゃな時間入れられちゃったりするので, こういった便利な機能を使って対策しておきましょう!
さいごに
今回は Firebase Auth と Firestore を連携してユーザードキュメントを作る方法について紹介しました.
Firestore はベータ版のころから社内サービスで使ったりクライアントに無茶言って導入したりと, たくさん実績を積んできました.
本格的なサービスを作る場合は, しっかりセキュリティルールも書いていく必要がありますが, MVP 開発や内部で使うツールなんかには持ってこいなサービスです.
ぜひ色々と活用して, 便利な使い方等ありましたらコメントで教えて下さい!
これからも Firestore の便利さについてたくさん紹介していけたらと思います.
Discussion