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

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

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

始める前に

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

Firebase 匿名認証を行う

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

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

    Web version 9

    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 version 8

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

    Web version 9

    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/firebase.User
    const uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
    auth_state_listener.js

    Web version 8

    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/firebase.User
    var uid = user.uid;
    // ...
  } else {
    // User is signed out
    // ...
  }
});
    index.js

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

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

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

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

    Google ログイン

    Web version 9

    import { GoogleAuthProvider } from "firebase/auth";

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

    Web version 8

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

    Web version 9

    import { FacebookAuthProvider } from "firebase/auth";

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

    Web version 8

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

    Web version 9

    import { EmailAuthProvider } from "firebase/auth";

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

    Web version 8

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

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

    Web version 9

    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 version 8

    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 データにアクセスできるようになります。

自動クリーンアップ

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

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

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

次のステップ

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