다국어 지원 웹, 파이어베이스 로그인까지 #3
이번장은 파이어베이스 관련 준비만 한다.
##1. 파이어베이스 프로젝트 생성 및 기본 설정
Firebase
Firebase is Google’s mobile platform that helps you quickly develop high-quality apps and grow your business.
firebase.google.com
파이어베이스 프로젝트를 생성한 후 첫 화면에 </> 아이콘을 통해 웹 앱을 등록할 수 있다.
또는 좌측 상단의 톱니 모양 아이콘의 프로젝트 설정을 통해서도 등록할 수 있다.
앱 등록을 하고 콘솔로 이동하기 버튼 또는 좌측 상단의 톱니 모양 아이콘을 통해 프로젝트 설정 화면으로 이동한다.
하단에 위와 같은 부분이 보일텐데 우리에게 필요한 부분은 구성이므로 구성을 선택하고 회색 박스 영역의 firebaseConfig를 복사하여 초기화 하는 코드를 추가한다.
main.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import store from './store'
import { i18n, loadLanguage } from './i18n'
import firebase from 'firebase/app'
Vue.config.productionTip = false;
loadLanguage("ko");
const firebaseConfig = {
//firebase 초기화 코드~
};
firebase.initializeApp(firebaseConfig);
new Vue({
router,
store,
i18n: i18n,
render: h => h(App)
}).$mount('#app')
|
기본 설정의 마지막 단계로 firebase 화면 좌측 상단에 Authentication->로그인 방법 메뉴에서 이메일/비밀번호의 상태를 사용 설정으로 바꾸고 저장해준다.
Google이나 Facebook 로그인도 사용할 수 있는데 우리는 일단 기본적인 이메일 로그인 방식으로 진행한다.
자바스크립트에서 Google 로그인으로 인증하기 | Firebase
앱에 Google 로그인을 통합하여 사용자가 Google 계정을 통해 Firebase에 인증하도록 할 수 있습니다. Google 로그인을 통합하려면 Firebase SDK를 사용해 로그인 과정을 진행해도 되고, Google 로그인 과정을 수동으로 진행하고 그 결과인 ID 토큰을 Firebase에 전달해도 됩니다. 시작하기 전에 자바스크립트 프로젝트에 Firebase를 추가합니다. Firebase 콘솔에서 Google 로그인을 사용 설정합니다. Fireba
firebase.google.com
# End.Code123 "다음 장은 내용이 좀 많을듯~"