JavaScript を使用して Firebase 匿名認証を行う

Firebase Authentication で一時的な匿名アカウントを作成して使用することで、Firebase で認証できます。一時的な匿名アカウントを使用すると、アプリに登録していないユーザーが、セキュリティ ルールで保護されているデータを使用できるようになります。匿名ユーザーがアプリに登録する場合は、ログイン認証情報を匿名アカウントにリンクすると、それ以後のセッションでも引き続き、保護されているデータを使用できます。

始める前に

  1. Firebase を JavaScript プロジェクトに追加します。
  2. アプリを Firebase プロジェクトに接続していない場合は、Firebase コンソールで接続します。
  3. 匿名認証を有効にします。
    1. Firebase コンソールで [Auth] セクションを開きます。
    2. [Sign-in method] ページで [匿名] を有効にします。
    3. 省略可: プロジェクトを Firebase Authentication with Identity Platform にアップグレードした場合は、自動クリーンアップを有効にできます。この設定を有効にすると、30 日以上経過した匿名アカウントは自動的に削除されます。自動クリーンアップが有効になっているプロジェクトでは、匿名認証が使用量上限または請求の割り当てに対してカウントされなくなります。自動クリーンアップをご覧ください。

Firebase 匿名認証を行う

ログアウトしたユーザーが Firebase での認証が必要なアプリ機能を使用する場合は、次の手順に沿って匿名によるユーザーのログインを行います。

  1. signInAnonymously メソッドを呼び出します。

    Web

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

const auth = getAuth();
signInAnonymously(auth)
  .then(() => {
    // Signed in..
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ...
  });
    auth_anon_sign_in.js

    Web

    firebase.auth().signInAnonymously()
  .then(() => {
    // Signed in..
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
  });
    anonymous.js
    ここではエラーの検出と対応もできます。エラーコードのリストについては、Auth のリファレンス ドキュメントをご覧ください。
  2. エラーが発生せずに signInAnonymously メソッドが完了した場合、onAuthStateChanged に登録されたオブザーバーがトリガーされ、匿名ユーザーのアカウント データを User オブジェクトから取得できます。

    Web

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

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/auth.user
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
    auth_state_listener.js

    Web

    firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/v8/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
    index.js

匿名アカウントを永久アカウントに変換する

匿名ユーザーがアプリへ登録した後、新しいアカウントの下で引き続き従来の作業を行えるようにしなければならない場合があります。たとえば、アプリへの登録前にユーザーがショッピング カートに追加したアイテムを、新しいアカウントのショッピング カートにも入れておく、といったケースです。手順は次のとおりです。

  1. ユーザーがアプリに登録したら、ユーザーの認証プロバイダのログインフローを行います（ただし、いずれかの Auth.signInWith メソッドを呼び出す手前まで）。たとえば、ユーザーの Google ID トークン、Facebook アクセス トークン、メールアドレスとパスワードを取得します。

  2. 新しい認証プロバイダの AuthCredential を取得します。

    Google ログイン

    Web

    import { GoogleAuthProvider } from "firebase/auth";

const credential = GoogleAuthProvider.credential(
  googleUser.getAuthResponse().id_token);
    auth_make_google_credential.js

    Web

    var credential = firebase.auth.GoogleAuthProvider.credential(
  googleUser.getAuthResponse().id_token);
    index.js
    Facebook ログイン

    Web

    import { FacebookAuthProvider } from "firebase/auth";

const credential = FacebookAuthProvider.credential(
  response.authResponse.accessToken);
    auth_make_facebook_credential.js

    Web

    var credential = firebase.auth.FacebookAuthProvider.credential(
  response.authResponse.accessToken);
    index.js
    メールアドレスとパスワードによるログイン

    Web

    import { EmailAuthProvider } from "firebase/auth";

const credential = EmailAuthProvider.credential(email, password);
    auth_make_email_credential.js

    Web

    var credential = firebase.auth.EmailAuthProvider.credential(email, password);
    link-multiple-accounts.js

  3. ログイン ユーザーの link メソッドに AuthCredential オブジェクトを渡します。

    Web

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

const auth = getAuth();
linkWithCredential(auth.currentUser, credential)
  .then((usercred) => {
    const user = usercred.user;
    console.log("Anonymous account successfully upgraded", user);
  }).catch((error) => {
    console.log("Error upgrading anonymous account", error);
  });
    auth_anonymous_link.js

    Web

    auth.currentUser.linkWithCredential(credential)
  .then((usercred) => {
    var user = usercred.user;
    console.log("Anonymous account successfully upgraded", user);
  }).catch((error) => {
    console.log("Error upgrading anonymous account", error);
  });
    link-multiple-accounts.js

link の呼び出しが成功したら、ユーザーの新しいアカウントが匿名アカウントの Firebase データにアクセスできるようになります。

自動クリーンアップ

プロジェクトを Firebase Authentication with Identity Platform にアップグレードした場合は、Firebase コンソールで自動クリーンアップを有効にできます。この機能を有効にすると、Firebase では 30 日以上経過した匿名アカウントが自動的に削除されます。自動クリーンアップが有効になっているプロジェクトでは、匿名認証は使用量上限または請求の割り当てに対してカウントされません。

  • 自動クリーンアップを有効にしてから作成した匿名アカウントはすべて、作成後 30 日が経過すると自動的に削除されます。
  • 既存の匿名アカウントは、自動クリーンアップを有効にしてから 30 日後に自動削除の対象となります。
  • 自動クリーンアップをオフにしても、削除が予定されている匿名アカウントはすべて、削除予定のままになります。
  • 匿名アカウントを任意のログイン方法にリンクして「アップグレード」すれば、アカウントが自動的に削除されることはありません。

この機能を有効にする前に、影響を受けるユーザーの数を確認するには、プロジェクトを Firebase Authentication with Identity Platform にアップグレードした場合、is_anon（Cloud Logging 内）でフィルタできます。

次のステップ

これで、ユーザーが Firebase で認証できるようになったので、Firebase ルールを使用して、Firebase データベースのデータへのユーザー アクセスを管理できます。