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

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

始める前に

  1. Firebase を JavaScript プロジェクトに追加します。
  2. アプリを Firebase プロジェクトに接続していない場合は、Firebase コンソールで接続します。
  3. 匿名認証を有効にします。
    1. Firebase コンソールで [Authentication] セクションを開きます。
    2. [ログイン方法] ページで [匿名] を有効にします。

Firebase 匿名認証を行う

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

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

    ウェブ バージョン 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

    ウェブ バージョン 8

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

    ウェブ バージョン 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

    ウェブ バージョン 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 ログイン

    ウェブ バージョン 9

    import { GoogleAuthProvider } from "firebase/auth";

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

    ウェブ バージョン 8

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

    ウェブ バージョン 9

    import { FacebookAuthProvider } from "firebase/auth";

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

    ウェブ バージョン 8

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

    ウェブ バージョン 9

    import { EmailAuthProvider } from "firebase/auth";

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

    ウェブ バージョン 8

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

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

    ウェブ バージョン 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

    ウェブ バージョン 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 データにアクセスできるようになります。

次のステップ

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