[React Native] 로그인 화면 구현 (백엔드) - 1. Firebase 회원가입

 

 

---

 

---

 

 

---

1. Firebase 프로젝트 생성

우선 firebase 웹사이트로 들어가자.

https://firebase.google.com/

Firebase

로그인을 진행해주고 시작하기를 누르고 프로젝트 추가를 눌러 새 firebase 프로젝트를 생성해준다.

프로젝트에 들어가면 왼쪽 상단의 햄버거 버튼을 눌러 인증 메뉴를 찾아 눌러준다. 그리고 sign-in method를 들어가 로그인 방법을 설정해준다. 이메일/비밀번호를 사용할 것이므로 이걸 설정해주자.

 

그리고 프로젝트 개요 메뉴를 찾아 태그 모양 버튼을 눌러주면 앱을 등록할 수 있다.

 

그리고 이번엔 오른쪽 상단을 보면 문서로 이동 버튼이 있다. 이걸 클릭하면 공식 문서로 이동한다. 참조 메뉴를 들어가면 왼쪽 메뉴에서 REST를 찾을 수 있다. 여기서 인증 및 사용자 관리를 들어가면 사용가능한 인증 방법이 쭉 나온다. 그 중 이메일/비밀번호로 가입을 눌러보자. 

 

그럼 회원가입/로그인 방법에서 POST 방식으로 뭘 요구하는지 자세히 확인 가능하다.

 

이제 이걸 바탕으로 본격적으로 백엔드 파트를 진행해보자.

---

2. Firebase 회원가입 연동

Firebase 프로젝트를 만들어 생성한 SDK를 그대로 사용할 건데 이걸 별도 파일로 저장하자.

app/utils 에 misc.js라는 파일을 만들자. 여기에서 각 값들을 const 변수에 할당해서 export 하고 다른 파일에서 import 해서 쓸 수 있게 할 것이다.

 

어떤 값들을 가져올지 보자!

Firebase 페이지에서 프로젝트 페이지에 들어가고 왼쪽 상단의 톱니바퀴를 클릭해주자. 그럼 메뉴가 여럿 뜨는데 그 중 프로젝트 설정을 눌러주자.

 

여기 있는 웹 API 키를 복사하고 misc.js 파일에 작성하자. 그리고 회원가입을 위한 end point도 추가해줘야 한다. 이 end point는 firebase 공식문서에서 찾을 수 있다. 

 

 

그리고 user_actions.js 로 가보자. 서버에 자료 요청을 하고 요청한 자료를 받을 수 있게 해주는 axio를 import 하자.

axio - 브라우저나 서버를 위한 http 클라이언트로 promise 형태

 

쉽게 말해 브라우저나 서버한테 어떤 정보를 달라고 request(요청)하기 위한 수단이다. 

promise 형태 - axio request로부터 어떤 결과값이 리턴되던지 간에 그건 Promise 객체가 되는 것이고, promise 객체이기 때문에 비동기 작업 후에 call back 함수를 다룬다. 첫 번째 콜백함수로부터 요청이 성공적이었을 경우를 다룰 수 있고, 두 번째 콜백함수로부터 요청이 실패했을 경우를 다룰 수 있다. 

 

데이터를 넘기는 방법은 2가지가 있다. get, post인데 2가지를 간략히 정리하면 다음과 같다.

get - data가 url로 넘어가서 보안에 취약.

post - data가 url로 넘어가지 않아 보안에 강함.

 

우리가 다룰 비밀번호는 보안에 강해야 하므로 post 방식을 이용할 것이다.

 

https://www.npmjs.com/package/axios

axios

 

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

공식 사이트를 보면 request를 하고나서 콜백함수를 어떻게 쓸지 설명이 위와 같이 나와있다.

request하고 나서 콜백함수로 requeest에 성공했을 때는 response라는 인자를 통해 요청했던 데이터를 받아오는 것이고 실패했다면 error라는 인자를 통해 어디에 문제가 있는지 inform을 받는다.

이 틀을 기억하면 된다.

 

 

그럼 이제 코드를 보자.

// /app/utils/misc.js
export const APIKEY = `AIzaSyC-D7xBF_pDDyJZSb0DpC6W-FUJu_UToL8`;
export const SIGNUP = `https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=${APIKEY}`;

// /app/store/actions/user_actions.js
import {SIGN_IN, SIGN_UP} from '../types';
import axios from 'axios';
import {SIGNUP} from '../../utils/misc';
export function signIn(data) {
  return {
    type: SIGN_IN,
    payload: {
      email: data.email,
      token: data.pasword,
    },
  };
}
export function signUp(data) {
  const request = axios({
    method: 'POST',
    url: SIGNUP,
    data: {
      email: data.email,
      password: data.password,
      returnSecureToken: true,
    },
    header: {
      'Content-Type': 'application/json',
    },
  })
    .then(response => {
      console.log(response.data);
      return response.data;
    })
    .catch(err => {
      alert('에러 발생');
      return false;
    });
  return {
    type: SIGN_UP,
    payload: request,
  };
}

// /app/store/reducers/user_reducer.js
import {SIGN_IN, SIGN_UP} from '../types';

export default function (state = {}, action) {
  switch (action.type) {
    case SIGN_IN:
      return {
        ...state,
        auth: {
          email: action.payload.email || false,
          token: action.payload.token || false,
        },
      };
    case SIGN_UP:
      return {
        ...state,
        auth: {
          userId: action.payload.localId || false,
          token: action.payload.idToken || false,
          refToken: action.payload.refreshToken || false,
        },
      };

    default:
      return state;
  }
}

---

참고 자료

https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EC%A4%91%EA%B8%89/dashboard

iOS/Android 앱 개발을 위한 실전 React Native - Intermediate - 인프런 | 강의