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

ユーザーがログインに成功したときに署名済みのカスタム トークンが生成されるように認証サーバーを変更することで、Firebase Authentication をカスタム認証システムと統合できます。アプリはこのトークンを受信して、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;
        // ...
      });

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

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

次のステップ

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

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

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

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

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

ウェブ モジュラー API

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

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

名前空間が指定されたウェブ API

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