Vue.js Firebase 배포 개요

Firebase란?

Firebase 배포

프로젝트 만들기

Firebase 프로젝트 설정

아래 이미지의 ""부분을 선택합니다.

다음과 같이 프로젝트에 대한 구성 정보가 표시됩니다 (나중에 콘솔에서 확인 가능).

Vue.js 프로젝트에 적용

   npm install --save firebase

   import firebase from 'firebase'
   ...
   const config = {
       apiKey: 'YOUR_API_KEY',
       authDomain: 'YOUR_AUTH_DOMAIN',
       databaseURL: 'YOUR_DATABASE_URL',
       projectId: 'YOUR_PROJECT_ID',
       storageBucket: 'YOUR_STORAGE_BUCKET',
       messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
       appId: 'YOUR_APP_ID
   }
   firebase.initializeApp(config);

이메일 주소/비밀번호 인증 설정

Firebase 프로젝트

Vue.js 프로젝트

로그인 처리

<template>
    ...
    <input type="email" placeholder="Email" v-model="email">
    <input type="password" placeholder="Password" v-model="password">
    <button @click="signIn">Signin</button>
    ...
</template>

<script>
...
    methods: {
    signIn: function () {
      firebase.auth().signInWithEmailAndPassword(this.email, this.password).then(
          // 認証成功時の処理
        ).catch(error=> {
          // 認証失敗時の処理
        })
    }
    ...
  }
</script>

로그아웃 처리

<template>
...
<button @click="signOut">Sign Out</button>
...
</template>

<script>
...
    methods: {
      signOut: function () {
          firebase.auth().signOut().then(() => {
                // ログアウト成功時の処理
          })
      }   
  }
...
</script>

참고문헌