🔗 인증 기능 구현하고 Firebase 서버 연결하기

🔓 서버 열기

1. Yustagram 프로젝트 폴더 경로 기준 functions 폴더 안 index.js 파일에 다음 내용 넣기

const functions = require("firebase-functions");

  exports.helloworld = functions.https.onRequest((request, response) => {
      functions.logger.info("Hello logs!", {
          structuredData: true
      });
      response.send("Hello from Firebase!");
  });

2. vscode 터미널에서 functions 파일로 경로 옮기고 다음을 입력해 파이어베이스 함수를 로컬에서 실행

firebase emulators:start --only functions

3. 로컬 호스트 서버 url이 열리면 열어서 Hello from Firebase! 가 출력됨을 확인하자.

🔑 파이어베이스에서 서비스키 받고 프로젝트에 적용하기

1. functions 폴더 안에 service 폴더를 만들고 serviceKey.json 파일 생성
2. 파이어베이스 콘솔 -> 프로젝트 설정 -> 서비스 계정 -> -> Firebase Admin SDK -> 새 비공개 키 생성 -> 다운받은 파일을 열어 내부를 복사하여 serviceKey.json 파일에 입력 후 저장
3. functions 폴더 안에 config 폴더를 만들고 firebaseModule.json 파일 생성
4. Firebase Admin SDK에서 Admin SDK 구성 스니펫(Node.js) 복사 후 firebaseModule.json 파일에 입력
5. 서비스키 위치 수정하고 제일 하단에 파이어베이스 내보내기 코드 작성 후 저장

var serviceAccount = require('../service/serviceKey.json');
  ...
  module.exports = admin

6. functions 폴더 안에 router 폴더를 만들고 그 안에 client.js 파일 생성

7. client.js 파일에 다음 내용 입력

const firebaseApp = requre('../config/firebaseModule')
  const express = require('express')
  const Fauth = firebaseApp.auth()
  const router = express.Router()

  module.exports = router

8. 터미널에서 ctrl+c로 서버 끊고 다음 코드 순서대로 실행

npm i cors

  firebase emulators:start --only functions

9. cors 예외상황을 등록하기 위해 client.js 파일을 다음과 같이 수정 후 저장

const firebaseApp = requre('../config/firebaseModule')
  const express = require('express')
  const cors = require('cors')
  const Fauth = firebaseApp.auth()

  const router = express.Router()
  router.use(cors())
  router.options('*',cors)

  module.exports = router

🧶 clientApi 만들기

1. functions 폴더 안 index.js 파일을 다시 열고 다음과 같이 수정 후 저장

const functions = require("firebase-functions");
  const clientApi = require('./router/client')

  exports.clientApi = functions.https.onRequest(clientApi);

2. 테스트를 위해 client.js 파일을 다음과 같이 수정 후 저장

const firebaseApp = requre('../config/firebaseModule')
  const express = require('express')
  const cors = require('cors')
  const Fauth = firebaseApp.auth()

  const router = express.Router()
  router.use(cors())
  router.options('*',cors)

  router.get('/helloworld', (req, res, next) => {
      res.json({
          msg: 'helloworld'
      })
  })

  module.exports = router

3. 서버 url 맨 뒤 helloworld를 지우고 clientApi/helloworld 입력 후 msg: 'helloworld' 나오는지 확인

이를 통해 회원가입이나 로그인 등의 인증 기능도 처리 가능하다.

🎮 임의로 회원가입 만들고 확인하기

1. 이메일과 비밀번호로 인증하기 위해 다음과 같이 수정 후 저장

const firebaseApp = requre('../config/firebaseModule')
  const express = require('express')
  const cors = require('cors')
  const Fauth = firebaseApp.auth()

  const router = express.Router()
  router.use(cors())
  router.options('*',cors)

  router.get('/helloworld', (req, res, next) => {

      const email = 'yuni@naver.com'
      const password = '12345678'

      Fauth.createUser({
          email : email,
          password : password
      }).then(credential => {
          const {uid} = credential

          console.log(uid)
      }).catch(err => {
          console.log(err)
      })
      res.json({
          msg: 'helloworld'
      })
  })

  module.exports = router

2. 서버 새로고침
   터미널에 uid가 나타남을 확인

3. 파이어베이스 콘솔 -> Authentication 새로고침
   유저가 등록되어 있음을 확인
   이제 이를 이용해서 실제 회원 만드는 서버를 세팅해보자

💻 실제 회원 만드는 서버 세팅

1. 이메일과 비밀번호로 인증하기 위해 다음과 같이 수정 후 저장

const firebaseApp = requre('../config/firebaseModule')
  const express = require('express')
  const cors = require('cors')
  const Fauth = firebaseApp.auth()

  const router = express.Router()
  router.use(cors())
  router.options('*',cors)

  router.post('/user/new', (req, res, next) => {
      const {email, password} = req, body

      Fauth.createUser({
          email : email,
          password : password
      }).then(credential => {
          const {uid} = credential
          //유저 프로필 데이터베이스를 만들고 데이터베이스에 저장
          res.status(200).json({
              msg: '유저가 생성됐습니다.'
          })
          console.log(uid)
      }).catch(err => {
          res.status(400).json({
              err
          })
      })
  })


  router.get('/helloworld', (req, res, next) => {
      res.json({
          msg: 'helloworld'
      })
  })

  module.exports = router