使用 JavaScript 匿名进行 Firebase 身份验证

您可以用 Firebase Authentication 创建和使用临时匿名帐号来进行 Firebase 身份验证。借助临时匿名帐号，尚未注册您应用的用户也可以使用受安全规则保护的数据。如果匿名用户决定注册您的应用，您可以将他们的登录凭据与匿名帐号关联，这样他们就可以在以后的会话中继续使用其受保护的数据。

准备工作

  1. 将 Firebase 添加到您的 JavaScript 项目。
  2. 如果您尚未将您的应用与 Firebase 项目关联，请在 Firebase 控制台中进行关联。
  3. 启用匿名身份验证：
    1. 在 Firebase 控制台中，打开身份验证部分。
    2. 在登录方法页面中，启用匿名登录方法。

匿名进行 Firebase 身份验证

要使未登录的用户能够使用那些需要进行 Firebase 身份验证的应用功能，您可以按以下步骤操作，让用户匿名登录：

  1. 调用 signInAnonymously 方法：

    Web 版本 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 版本 8

    firebase.auth().signInAnonymously()
  .then(() => {
    // Signed in..
  })
  .catch((error) => {
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
  });
    anonymous.js
    您还可以在此处捕捉并处理错误。如需获取错误代码列表，请参阅身份验证参考文档。
  2. 如果 signInAnonymously 方法顺利完成，且未出现任何错误，那么 onAuthStateChanged 中注册的观察者就会被触发，并且您可以从 User 对象中获取匿名用户的帐号数据：

    Web 版本 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 版本 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 版本 9

    import { GoogleAuthProvider } from "firebase/auth";

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

    Web 版本 8

    var credential = firebase.auth.GoogleAuthProvider.credential(
  googleUser.getAuthResponse().id_token);
    index.js
    Facebook 登录

    Web 版本 9

    import { FacebookAuthProvider } from "firebase/auth";

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

    Web 版本 8

    var credential = firebase.auth.FacebookAuthProvider.credential(
  response.authResponse.accessToken);
    index.js
    电子邮件地址与密码登录

    Web 版本 9

    import { EmailAuthProvider } from "firebase/auth";

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

    Web 版本 8

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

  3. 将 AuthCredential 对象传递给登录用户的 link 方法：

    Web 版本 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 版本 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 数据库的访问权限。