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

ユーザーがログインに成功したときに署名済みのカスタムトークンが生成されるように認証サーバーを変更することで、Firebase Authentication をカスタム認証システムと統合できます。アプリはこのトークンを受信して、Firebase での認証に使用します。

始める前に

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

Firebase で認証する

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

認証サーバーからカスタムトークンを受信したら、signInWithCustomToken に渡してユーザーのログインを行います。

Web

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

Web

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 を呼び出します。

Web

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

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

Web

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