구글 파이어베이스 CRUD (1) Create Post & 관리자 등록하기

구글로 인증하는 부분까지 끝냈다면, 본격적으로 CRUD(Create, Read, Update, Delete) 서비스를 만들어 볼 때다. 일단 CRUD를 위해서는 firebase-tools를 설치해야 한다. 윈도우라면, 명령프롬프트, 맥이라면 터미널로 가서 현재 작업하고 있는 프로젝트 폴더를 지정한다. 그리고 아래와 같이 firebase-tools를 설치한다.

npm install firebase-tools -g 

firebase-tools를 설치하고나면 본격적으로 자신의 프로젝트를 firebase 클라우드로 올릴 수 있다. 이와 동시에 서버 프로그래밍을 작성하기 위해서 firebase function 기능을 설치한다. 

firebase init functions

firebase functions를 설치할 때, firebase클라우드에 사용할 폴더와 생성한 프로젝트를 지정한다. 위의 명령어를 실행하면 functions폴더가 생성되고, firebase에 올라가는 index.js파일이 자동으로 지정된다. 또, 아래처럼 index.html파일(api-key가 있는)에서 firebase-functions.js를 cdn으로 지정한다.

functions변수를 만들어서 firebase.functions()기능을 선언하는 것으로 functions의 사용준비는 끝난다.

1 auth.js 

auth.js파일에 createPost 이벤트 함수를 추가한다. 

index.html의 '포스트 작성하기'버튼의 id는 'create-form'이다. createPost변수에 해당 폼을 담고, submit이벤트가 발생하면 fs(firestore)의 collection(firebase에서 생성된)에 .add()메서드를 실행한다. 위의 코드에서 가장 핵심적인 부분은 .add()부분이다. 나머지 프로미스 구문(then())은 버튼이 사라지고, 화면이 reset되는 기능을 넣었다.(로그인 폼과 같음)

그리고 user가 있을 경우, firestore데이터를 받아오는 get().then()을 onSnapshot으로 변경한다.  

2 index.js 

현재, 포스팅이 하나도 없는 상태라면 아무런 화면이 뜨지 않는다. 텅빈 화면은 유저를 당황시킬 수 있기 때문에 '데이터'가 없는 경우를 알리는 메시지를 분기한다.

index.js 수정을 끝마치면, 아래와 같은 문구가 등장한다.

포스트를 작성해보자. 포스트를 작성과 관련한 createPost함수에서 add({title:title, content:content})라고 지정했기 때문에 화면을 보여주는 index.js의 setupPosts의 `${cgSources.title}`과 같은 형식이 되어야 한다. 여기서 cgSources는 collection이름이다.

3 firebase functions설치

CRUD기능과 별도로 관리자 기능과 같은 서버쪽 프로그래밍을 위한 firebase functions을 설치할 필요가 있다. 위에서 firebase functions설치를 마쳤다면, 현재 폴더구조는 아래와 같다. 

*폴더구조

*functions폴더

4 관리자 가입 설정

firebase functions은 서버로 전달된 데이터를 활용해서 특정한 기능을 실행한다. 만일 회원가입을 하는 아이디 중에서 관리자 email이 있다면 이를 관리자로 저장하는 기능을 만들고자 한다면, functions 폴더에 있는 index.js파일에서 특정 기능을 만들고 서버에 알리면 된다. 

관리자 기능을 위해서 functions폴더에 있는 index.js파일에서 관리자 기능을 추가해보자.

exports는 모듈을 내보내는 명령어다. makeAdmin메서드를 모듈로 내보내고, makeAdmin요청이 들어왔을 때(functions.https.onCall(data)) admin.auth().getUserByEmail(data)이란 auth기능을 실행한다. getUserByEmail()에 전달되는 값은 객체값이며, email키가 있다. 해당 부분은 auth.js에 있는 회원가입 이벤트함수와 로그인 이벤트 함수에 추가할 예정이다. 또한 message를 만들어서 프로미스 구문(then)으로 콜벡한다.

5 auth.js 수정하기

이제 auth.js파일에서 functions으로 전달할 makeAdmin함수를 만들어보자. 기존의 signUpForm이벤트 함수에서 아래 빨간부분을 추가한다. 

makeAdmin함수는 사용자가 회원가입하는 email값을 httpsCallable('makeAdmin')이란 firebase functions의 makeAdmin을 요청하는 역할을 한다. 즉, 사용자가 입력한 email값을 firebase functions로 전달하는 역할이다. 

회원가입 뿐만 아니라 로그인 부분에도 관리자 아이디인지 검증을 요청하는 makeAdmin함수를 넣어보자.

로 전달된 데이터를 서버에서 진행하고 있는 폴더로 이동한 뒤에 아래와 같은 명령어를 연속으로 입력하여 firebase-functions를 설치해보자.그리고 cmd창에서 아래 명령어를 실행하여 firebase서버에 makeAdmin functions를 등록한다. 

firebase deploy --only functions

웹에서 관리자로 등록한 이메일 아이디를 회원으로 가입하고, 로그인을 진행하면 아래처럼 makeAdmin functions에서 지정했던 관련 메시지를 볼 수 있다.

6 관리자 쓰기 설정하기

현재 작업하고 있는 프로젝트는 일종의 "회원가입 + 개인블로그"다. 이는 Web 2.0이전의 회원이 콘텐츠를 열람만 가능한 폐쇄형 사이트구조다. 따라서 관리자만 글을 쓸 수 있다. 일반 회원은 로그인 했을 때, 'Create Post'가 보이지 않고, 글을 삭제하거나 수정할 수 없다. 그리고 파이어베이스는 DB의 규칙을 이용한 권한을 조절할 수 있다. 관리자만 '수정', '삭제' ,'작성'을 할 수 있게끔 설정하려면 아래처럼 규칙을 수정한다. 

위의 규칙을 적용하면, 회원은 읽는 것만 허용하고, 관리자만이 쓰기를 할 수 있다.

7 포스트 UI수정

현 프로젝트에서는 DB규칙과 더불어 일반 유저에게 '글쓰기'항목이 외부에 노출되면 안 된다. 이를 위해서 index.html의 'Create Post'부분을 보이지 않도록 설정한다.

"display:none"으로 설정해주면, Create Post 리스트 태그가 보이지 않게 된다. 해당 태그는 관리자로 접속해야만 볼 수 있다. index.js파일로 가서 loginCheck함수를 아래처럼 설정해보자.

adminLinks변수는 'admin클래스'를 받고, loginCheck(인수) 인수부분에 user가 있을 경우에는 user.getIdTokenResult()메서드를 실행하고, 프로미스 구문으로 idTokenResult값에 있는 admin유무를 if구문으로 검사한다. 만일 admin값이 true일 경우, adminLinks에 해당하는 admin클래스의 display값을 "block"으로 설정하고, loginCheck()의 user인자값이 없는 경우에는 admin클래스의 display값을 'none'으로 설정한다.