はじめに
今回は, Firebase Auth を使って, 初めてページにアクセスした際に必ず匿名ログインする方法について紹介したいと思います.
私の会社でも Web アプリを複数開発しているんですが, ほとんどのサービスで匿名ログインを導入しています.
個人情報を入力することなく, サービスを体験してもらえるようになるので, ユーザーさんにサービスを触ってもらうハードルを劇的に下げられる便利な仕組みです!
機会があればぜひ導入してみてください.
匿名ログインとは？
匿名ログインとは, その名のとおり個人情報を入力することなくサービスを使えるようにする仕組みのことです.
ソーシャルゲームなんかでもよく使われてる仕組みで, ある程度のところまでは匿名ログインの状態で楽しんでもらって, 本格的にプレイしようってなったタイミングで email や twitter アカウントの連携を求められるあれですね.
コード
かなり短いですがこれだけで必ず匿名ログインにすることができます.
firebase.auth().onAuthStateChanged(async (user) => {
// 未ログイン時
if (!user) {
firebase.auth().signInAnonymously();
}
// ログイン時
else {
// TODO: ログインしているときにやる処理...
console.log(user);
}
});
解説
Firebase Console の Auth 設定で 匿名ログイン を有効にしよう
まずは設定を変更します.
Firebase プロジェクトを作った際, 匿名ログインはデフォルトでは無効になっています.
Firebase Console の Auth 設定画面に遷移し, 有効にしておきましょう.
これで匿名ログインするためのメソッド firebase.auth().signInAnonymously() を実行できるようになります.
ログイン情報初期化時のイベントに処理を登録しよう
ログイン情報の初期化時やログインの状態が変化した際に発火する firebase.auth().onAuthStateChanged() に関数を登録しましょう.
firebase.auth().onAuthStateChanged(async (user) => {
...
});
この中でユーザー情報を参照したり, ログインのチェックをすることができます.
ログインしていなければ匿名ログインしよう
これが今回の記事のキモとなる部分です.
firebase.auth().onAuthStateChanged() が発火すると user オブジェクトが渡ってくるんですが, 未ログイン時は null になっています.
なので以下のように null チェックをして null だったら未ログインということになるので, if 文の中で匿名ログインするメソッド firebase.auth().signInAnonymously() を実行します.
if (!user) {
firebase.auth().signInAnonymously();
}
こうすると匿名ログインした状態になります.
つまりログイン状態が変更されたことになるのでもう一度 firebase.auth().onAuthStateChanged() が発火します.
ただこの２度目の発火時は user オブジェクトに匿名ログイン後のユーザー情報が入っているので null チェックで false となり下の else 文の中が実行されます.
// ログイン時
else {
// TODO: ログインしているときにやる処理...
console.log(user);
}
これでページにアクセスした際に, 必ず匿名ログインした状態を担保することができるようになりました.
おわりに
今回は匿名ログインについて紹介しました.
メソッドを一個呼ぶだけで匿名ログインできるなんて一昔前までは考えられませんでした.
Firebase が普及したことで, ログイン周りはかなり楽になりましたね♪
ただ実は, 今回紹介した内容だけでは匿名ログインとして十分ではありません.
匿名ログインもある程度通常ログインと同じ振る舞いを求められるので, ユーザー情報を書き込むデータベースを作る必要があります.
その辺は, また別の記事にて Firestore を使った例を交えて解説できたらと思ってます.
Discussion