Firebase v9 with Nuxt.js

개요

Firebasev9를 사용하여 간단한 필기 앱을 만들었다.이 프로그램은 Hosting, Authentication,Firestore를 사용하기 때문에 이 글에 이 프로그램과 코드에 대한 해설을 쓰고 싶습니다.

개시하다

Firebase는 Google에서 제공하는 모바일 및 웹 애플리케이션의 백엔드 서비스입니다.Firebase를 사용하면 백엔드에서 이동하는 서비스(데이터베이스, 사용자 인증, 호스트 등)를 제공할 수 있다.
더 자세히 알고 싶은 사람한테.
https://firebase.google.com/docs/auth
https://firebase.google.com/docs/firestore
https://firebase.google.com/docs/hosting

Firebase v8과 v9의 차이점

Firebasev8과 v9을 비교하는 코드는 다음과 같습니다.
v8에서는 다음과 같이 chaining 처리를 했지만 v9에서는 모듈러 형식으로 바뀌었다.
Firebase v8

// Add a new document in collection "cities"
db.collection("cities").doc("LA").set({
    name: "Los Angeles",
    state: "CA",
    country: "USA"
})
.then(() => {
    console.log("Document successfully written!");
})
.catch((error) => {
    console.error("Error writing document: ", error);
});

Firebase v9

import { doc, setDoc } from "firebase/firestore";

// Add a new document in collection "cities"
await setDoc(doc(db, "cities", "LA"), {
  name: "Los Angeles",
  state: "CA",
  country: "USA"
});

이루어지다

나는 여기서 설치된 코드를 구체적으로 보고 싶다.

Setting

Firebaseコンソールから該当のプロジェクトを選択->設定ボタン->プロジェクトの設定->全般 마이그레이션하면 Firebase를 사용할 때 필요한 설정값을 기술하기 때문에 사용합니다.
plugin/firebase.js

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app"
import { getAnalytics } from "firebase/analytics"
import { getFirestore } from "firebase/firestore"

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

const firebase = initializeApp(firebaseConfig)
const database = getFirestore(firebase)
const analytics = getAnalytics(firebase)

export default database

Hosting

Nuxt.jsnpm run generation에서 제작dist한 후 입력firebase deploy의 명령을 통해 Hosting을 완성합니다.이때 다음과 같은 firebase.json, hosting->public에서 dist를 설정해야 한다.
firebase.json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Auth

이번에 인증은 익명과 Google account 두 가지를 구현했습니다.또 페이지 재부팅을 하면 인증이 취소되기 때문에 로그인을 유지하기 위해 실시onAuth했다.또한 인증 상태의 지속성은 setPersistence에 설정되어 있다.상세한 상황은 아래의 보도를 참고하시오.
https://firebase.google.com/docs/auth/web/auth-state-persistence
Guest Account
store/index.js

  async loginGuest({ commit }) {
    console.log('guest login action')
    const auth = getAuth()

    await signInAnonymously(auth)
      .then((result) => {
        const user = result.user
        commit('setUserUid', user.uid)
        commit('setUserName', user.displayName)

        console.log('guest login success')
      }).catch((error) => {
        const errorCode = error.code
        const errorMessage = error.message

        console.log('guest login error: ', errorCode, errorMessage)
      })

    await setPersistence(auth, browserSessionPersistence)
      .then(() => {
        console.log('guest keeping state')
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log('guest keeping state error: ', errorCode, errorMessage)
      })
  },

Google Account
store/index.js

  async login({ commit }) {
    console.log('login action')
    const provider = new GoogleAuthProvider()
    const auth = getAuth()

    await signInWithPopup(auth, provider)
      .then((result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result)
        const token = credential.accessToken

        const user = result.user
        commit('setUserUid', user.uid)
        commit('setUserName', user.displayName)
        
        console.log('login success')
      }).catch((error) => {
        const errorCode = error.code
        const errorMessage = error.message

        const credential = GoogleAuthProvider.credentialFromError(error)

        console.log('login error: ', errorCode, errorMessage)
      })

    await setPersistence(auth, browserSessionPersistence)
      .then(() => {
        console.log('keeping state')
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log('keeping state error: ', errorCode, errorMessage)
      })
  },

store/index.js

  onAuth({ commit }) {
    const auth = getAuth()
    onAuthStateChanged(auth, (user) => {
      user = user ? user : {}
      commit('setUserUid', user.uid)
      commit('setUserName', user.displayName)
      commit('setLoginStatus', user.uid ? true : false)
      console.log('onAuth')
    })
  }

Firestore

다음 내용을 기술하면 uid 부분은 소장, String(this.num) 부분은 문서, which 및 memo 필드는Firestore에 데이터를 추가할 수 있습니다.
components/BaseBackground.vue

await setDoc(doc(database, uid, String(this.num)), {
  which: this.which,
  memo: this.memo
})

총결산

Firebase를 사용하기 때문에 인증과 데이터베이스를 스스로 실현해야 하는데 그걸 하지 않고 웹 애플리케이션을 간단하게 실현했다.또한Firebase를 사용할 때 공식 문서를 참고하면 가능하므로 추천합니다.

최후

끝까지 읽어주셔서 감사합니다.
다음 웹 응용 프로그램 URL 및 Giithub repository가 설치되어 있습니다.
참고가 됐으면 좋겠어요.
https://kanban-aeff4.web.app/
https://github.com/daiki328/kanban
그럼 좋은 Firebase life 주세요!

참고 자료

https://firebase.google.com/docs/build