ファランクス by ponta

Firebase : 基礎

docs : https://firebase.google.com/docs/storage/web/upload-files?hl=ja

  • Docs はどれも似たレイアウトだけど、firestore や auth, storage ごとに違う
  • テストモードは30日で期限がきれる ⇔ 本番モード

firebase

npm i firebase

共通している初期化

firebase.js

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

storageを使いたい場合の例 :

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

const app = initializeApp(firebaseConfig);
const storage = getStorage(app);

export default storage;

databaseに接続できない場合

true にする

authでエラーになる場合

https://firebase.google.com/docs/auth/web/start?hl=ja&authuser=0

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { GoogleAuthProvider } from "firebase/auth";

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const provider = new GoogleAuthProvider();

export {auth , provider};

⇒ ドメイン許可を設定しないと本番環境ではエラーになる

〇〇.com と www .com を追加したら機能する

  • profilerは
← Go home