JavaScript でカスタム認証システムを使用して Firebase 認証を行う

始める前に

1. Firebase を JavaScript プロジェクトに追加します。
2. 次の操作を行って、プロジェクトのサーバーキーを取得します。
   1. プロジェクトの設定の [サービス アカウント] ページに移動します。
   2. [サービス アカウント] ページの [Firebase Admin SDK] セクションの一番下にある [新しい秘密鍵の生成] をクリックします。
   3. 新しいサービス アカウントの公開鍵 / 非公開鍵のペアが、お使いのパソコンに自動的に保存されます。認証サーバーにこのファイルをコピーします。

Firebase で認証する

1. ユーザーがアプリにログインしたら、そのユーザーのログイン認証情報（たとえば、ユーザー名とパスワード）を認証サーバーに送信します。サーバーにより認証情報が確認され、認証情報が有効な場合はカスタム トークンが返されます。
2. 認証サーバーからカスタム トークンを受信したら、signInWithCustomToken に渡してユーザーのログインを行います。

   ウェブ向けのモジュラー API

   import { getAuth, signInWithCustomToken } from "firebase/auth";
   
   const auth = getAuth();
   signInWithCustomToken(auth, token)
     .then((userCredential) => {
       // Signed in
       const user = userCredential.user;
       // ...
     })
     .catch((error) => {
       const errorCode = error.code;
       const errorMessage = error.message;
       // ...
     });
   auth_sign_in_custom.js

   ウェブ向けの名前空間付き API

   firebase.auth().signInWithCustomToken(token)
     .then((userCredential) => {
       // Signed in
       var user = userCredential.user;
       // ...
     })
     .catch((error) => {
       var errorCode = error.code;
       var errorMessage = error.message;
       // ...
     });
   custom.js

次のステップ

ユーザーが初めてログインすると、新しいユーザー アカウントが作成され、ユーザーがログイン時に使用した認証情報（ユーザー名とパスワード、電話番号、または認証プロバイダ情報）にアカウントがリンクされます。この新しいアカウントは Firebase プロジェクトの一部として保存され、ユーザーのログイン方法にかかわらず、プロジェクトのすべてのアプリでユーザーを識別するために使用できます。

• アプリでユーザーの認証ステータスを把握するには、Auth オブジェクトにオブザーバーを設定することをおすすめします。これによって、ユーザーの基本的なプロフィール情報を User オブジェクトから取得できます。ユーザーを管理するをご覧ください。

• Firebase Realtime Database と Cloud Storage のセキュリティ ルールでは、ログイン済みユーザーの一意のユーザー ID を auth 変数から取得し、それを使用して、ユーザーがアクセスできるデータを管理できます。

既存のユーザー アカウントに認証プロバイダの認証情報をリンクすることで、ユーザーは複数の認証プロバイダを使用してアプリにログインできるようになります。

ユーザーをログアウトするには、signOut を呼び出します。

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
auth_sign_out.js

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
index.js