如何用同一Firebase应用实现Android与Web认证及数据库共享展示

Hey there! Let's tackle your two Firebase questions one by one—they're super common when expanding apps across platforms, so great call asking about this.

Absolutely doable, and Firebase is built exactly for this kind of cross-platform setup. Here's a step-by-step breakdown:

• First, add your Web app to your existing Firebase project
  Head to your Firebase Console, select your existing Android project, then click the "Add app" button (the web icon </>). Follow the prompts to register your Web app—you'll get a firebaseConfig object (a snippet of JavaScript) that you'll need later.

• Initialize Firebase in your Web project
  Drop the firebaseConfig into your Web app's main JS file, then initialize Firebase along with the Auth module. For example:

  import { initializeApp } from "firebase/app";
  import { getAuth } from "firebase/auth";
  
  const firebaseConfig = {
    // Your config details here
  };
  
  const app = initializeApp(firebaseConfig);
  const auth = getAuth(app);
  

• Enable the same auth providers across both platforms
  Go to the "Authentication" section in your Firebase Console, then the "Sign-in method" tab. Make sure all the providers you're using on Android (like Email/Password, Google Sign-In, etc.) are enabled here too. The settings for these providers apply to the entire project, so your Android and Web apps will share the same auth rules.

• Implement auth logic on Web to match Android
  Use Firebase Auth's Web SDK methods to handle sign-in/sign-up, just like you did on Android. For example, if you're using Email/Password:

  import { signInWithEmailAndPassword } from "firebase/auth";
  
  // Sign in a user
  signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      const user = userCredential.user;
      // User is signed in, proceed with app logic
    })
    .catch((error) => {
      const errorCode = error.code;
      const errorMessage = error.message;
    });
  

  The best part? A user's UID will be identical across Android and Web, so you can seamlessly link their data between platforms.

• Double-check your Security Rules
  Ensure your Firebase Security Rules (for Auth, Database, Storage, etc.) allow authenticated users from both platforms to access the resources they need. For example, a basic Realtime Database rule might look like:

  {
    "rules": {
      ".read": "auth != null",
      ".write": "auth != null"
    }
  }
  

100% feasible—since Firebase databases (both Realtime Database and Firestore) are project-wide, your Web app can access the exact same data as your Android app. Here's how to set it up:

• Add your Web app to the existing Firebase project (if you haven't already)
  Same as step 1 in the auth question above—register your Web app in the Firebase Console to get your firebaseConfig.

• Initialize Firebase with the Database module
  Along with initializing Firebase, import and initialize the database module you're using (Realtime Database or Firestore). For Firestore, that would look like:

  import { initializeApp } from "firebase/app";
  import { getFirestore } from "firebase/firestore";
  
  const firebaseConfig = {
    // Your config details here
  };
  
  const app = initializeApp(firebaseConfig);
  const db = getFirestore(app);
  

  For Realtime Database:

  import { initializeApp } from "firebase/app";
  import { getDatabase } from "firebase/database";
  
  const app = initializeApp(firebaseConfig);
  const db = getDatabase(app);
  

• Adjust Security Rules (if needed)
  Take a look at your current database rules. If your Android app uses authenticated access, your Web app will need to follow the same rules—so make sure users are signed in (using the auth setup from the first question) before accessing data. If you need to allow public read access (for data that's safe to show to anyone), you can tweak the rules temporarily (but only if that's intentional!). For example, a public read rule for Firestore:

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /{document=**} {
        allow read: if true;
        allow write: if auth != null;
      }
    }
  }
  

• Fetch and display data in your Web app
  Use the Web SDK to query your database and render the data on your page. For example, fetching a collection from Firestore:

  import { collection, getDocs } from "firebase/firestore";
  
  async function getItems() {
    const querySnapshot = await getDocs(collection(db, "your-collection-name"));
    querySnapshot.forEach((doc) => {
      // Render each document's data to your Web page
      console.log(`${doc.id} => ${doc.data()}`);
      // Example: Append to a list in HTML
      document.getElementById("items-list").innerHTML += `<li>${doc.data().name}</li>`;
    });
  }
  
  // Call the function to load data
  getItems();
  

  For Realtime Database, listening for data changes would look like:

  import { ref, onValue } from "firebase/database";
  
  const itemsRef = ref(db, "your-data-path");
  onValue(itemsRef, (snapshot) => {
    const data = snapshot.val();
    // Update your Web UI with the data
    document.getElementById("items-container").textContent = JSON.stringify(data);
  });
  

  Since it's the same database, all the data your Android app has been writing will be instantly available to your Web app once you set this up.

内容的提问来源于stack exchange，提问作者MC Starters