프로젝트 생성시 주의할 점

딱히 유료 도메인이나 그런거 쓸때는 상관없을거 같은데 개인적으로 쓸때 다른 사람들이 쓸법한 이름을 사용하게 되면 거지같이 id가 붙는다.

예를들면 이런식임

프로젝트 이름이 ez-go 라면 프로젝트 아이디는 ez-go-1!q23 뭐 이렇게 되서 내 사이트로 접속할때 ez-go-1!q23.com 이렇게 접속해야 한다.

그래서 URL을 그냥 유니크하게 짓는게 좋을거같음... 여기서 제공하는거 쓸 이유 없으면 그냥 암거나 쓰고 아직은 내가 초보니까 모르는 설정같은게 있을수도 있따.

파이어베이스 준비

구글 파이어베이스 사이트로 접속하여 구글 계정으로 로그인
프로젝트 생성 (이름과 국가 설정)

Authentication

로그인방법

SNS 또는 이메일 인증을 통해 손쉽게 로그인을 할 수 있다.
승인된 도메인
- 해당 도메인에서만 로그인? 접근?이 가능하게 함
이메일당 계정 개수를 지정할 수 있다. 기본은 1

이메일 템플릿

이메일과 비밀번호를 이용해 로그인을 할때 인증 관련한 기능을 제공한다.
- 이메일 주소 인증
- 비밀번호 재설정
- 이메일 주소 변경
- SMS 인증

위에서 알아본 로그인 방법을 Google 계정으로 설정을 하자.

Database

실시간 클라우드 호스팅 데이터베이스
JSON
연결된 모든 클라이언트에 실시간 동기화
오프라인에서도 데이터를 디스크에 캐시 원활히 작동
오프라인에서 온라인으로 전환할때도 변경된 데이터를 수신하기 때문에 걱정 ㄴ

규칙

데이터베이스에 대한 CRUD 권한 설정이 가능
시뮬레이터 기능으로 제대로 적용이 되었는지 확인이 가능

사용량

실시간 데이터베이스로 전송된 데이터를 그래프로 표시

백업

하루에 한번 데이터베이스 백업
Blaze 요금제로 업그레이드해야 사용이 가능함...

로컬 개발 환경 설정

Install

nodejs
- 사이트에서 설치

firebase-cli

npm으로 설치가능

// 관리자 권한으로 하는게 편함
$ npm install firebase-tools -g

firebase-cli login
- 해당 컴퓨타와 파이어베이스를 연결하고, 엑세스 허용
```
$ firebase login
```
firebase list 로 프로젝트가 보여지면 계정과 연결 완료
프로젝트 초기화
- 프로젝트 생성
```
$ firebase init
```
- 데이터베이스와 호스팅 선택
- 프로젝트 선택
- 데이터베이스 파일 이름 정하기
- public 폴더 사용, index.html 리라이트

기본 디렉토리

실행

$ firebase serve

프로젝트에 파이어베이스 연결

위에서 자신의 프로젝트에 맞게 선택해서 추가

인증 기능 구현

Firebase JavaScript SDK로 로그인 흐름을 처리

Google 제공업체 개체의 인스턴스를 생성

var provider = new firebase.auth.GoogleAuthProvider();

Google 제공업체 개체를 사용해 Firebase에 인증
1. 팝업 창을 띄우거나 로그인 페이지로 리디렉션하여 사용자가 Google 계정에 로그인하도록 유도할 수 있다. 휴대기기의 경우 리디렉션이 바람직
2. 팝업 창을 사용해서 로그인하려면 다음과 같이 signInWithPopup 을 호출
```
firebase.auth().signInWithPopup(provider);
```

팝업 창에서 거부 또는 허용을 눌렀을 때 해당 함수에서 리턴되는 값을 통해서 서버에서 그에 맞은 결과를 보여줄 수 있다.

여기서는 가이드를 따라서 콜백 함수를 통해 user 정보를 확인하는 법을 아라보자

firebase.auth().signInWithPopup(provider).then(function(result) {
  // This gives you a Google Access Token. You can use it to access the Google API.
  var token = result.credential.accessToken;
  // The signed-in user info.
  var user = result.user;
  // ...
}).catch(function(error) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // The email of the user's account used.
  var email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  var credential = error.credential;
  // ...
});

로그인 흐름을 수동으로 처리하기 위해서는 ~ 아직은 하지말고 통합가이드 참고해서 나중에 해봐야지

Firebase