早押しボタンweb

Firebase Authenticationの導入(匿名認証)

はじめに

Firebase Authentication は、アプリにユーザー認証機能を簡単に追加できるサービスです。さまざまな認証方法がありますが、ここでは匿名認証を中心に導入手順を解説します。また、Realtime Databaseと組み合わせた使い方についても紹介します。

1. Firebase Authenticationとは

Firebase Authentication は、次のような多様な認証方式をサポートしています。

この中で、匿名認証はユーザー登録やログイン操作なしで一意のユーザーIDを利用できる方法で、開発やプロトタイプ段階に適しています。

2. Firebase Authenticationの有効化(匿名認証)

3. Firebase SDKの準備

すでに Firebase を導入済みであれば、そのまま進められます。まだの場合は以下で導入します:

1npm install firebase

4. 匿名ログインの実装

匿名認証を使うことで、ログイン操作なしにユーザー識別が可能になります。

1import { getAuth, signInAnonymously, onAuthStateChanged } from 'firebase/auth';
2
3const auth = getAuth();
4
5signInAnonymously(auth)
6  .then(() => {
7    console.log('ログイン成功');
8  })
9  .catch((error) => {
10    console.error('ログイン失敗', error);
11  });
12
13onAuthStateChanged(auth, (user) => {
14  if (user) {
15    console.log('ログインユーザーID:', user.uid);
16  }
17});
18

5. Realtime Database との連携

匿名ログイン後に、ユーザーごとにデータを保存したり取得する場合、Realtime Database と連携します。

ユーザーごとにデータを保存する例

1import { getDatabase, ref, set } from 'firebase/database';
2import { getAuth } from 'firebase/auth';
3
4const db = getDatabase();
5const uid = getAuth().currentUser?.uid;
6
7set(ref(db, 'users/' + uid), {
8  score: 100,
9  timestamp: Date.now()
10});
11

セキュリティルールの設定

ユーザーごとにアクセスを制限するには、以下のようにセキュリティルールを設定します。

1{
2  "rules": {
3    "users": {
4      "$uid": {
5        ".read": "$uid === auth.uid",
6        ".write": "$uid === auth.uid"
7      }
8    }
9  }
10}
11

6. 他の認証方法について

Firebase Authentication では、Email/Password 認証や Google 認証なども簡単に導入できます。実運用を前提とする場合や、ユーザー情報の永続的管理が必要な場合は、匿名認証ではなくこれらの認証方式の利用が推奨されます。

まとめ

記事一覧へ戻る