TIL. Firebase를 이용한 소셜 로그인 구현(2)

ichbinmin2·2021년 2월 17일
0

React

목록 보기
19/25
post-thumbnail

👩🏻‍💻 Toy Project(Teta Card Maker)의 진행 기록 : 소셜 로그인, 실시간 데이타베이스를 구현하기 위해서 처음으로 firebase를 사용해볼 생각이다. 오늘은 firebase 를 이용하기 위해서 미리 설정해야 하는 것들을 살펴보고 차례대로 설정한 뒤에 소셜 로그인 기능을 구현해보고자 한다.

TIL. Firebase를 이용한 소셜 로그인 구현(1)

이번에는 firebase의 서비스를 본격적으로 사용하기 위해 필요한 기초 세팅을 해보고, 소셜 인증 서비스까지 구현 해볼 생각이다.

가장 먼저 firebase에서 제공하는 서비스를 사용하기 전 firebase 전체 API를 받아와야 한다. firebase의 공식문서로 이동하여 firebase 추가하기(웹) 부분을 참고하여 Firebase를 설치했다. 참고로, 이 모든 과정은 Firebase 서비스를 사용하기 전에 진행해야 한다. (중요)

  1. 해당 프로젝트의 터미널에서 Firebase 자바스크립트 SDK를 설치한다.
yarn add firebase
  1. 설치가 끝나면, firebase 계정의 콘솔로 돌아와, 해당 프로젝트의 '프로젝트 설정' 메뉴로 들어오면 일반 메뉴에서 내 프로젝트의 정보(프로젝트 이름, 프로젝트 ID, 프로젝트 번호, 웹 API Key)를 확인할 수 있다. 아래의 웹앱 메뉴의 Firebase SDK snippet 에서 모든 서비스에 내 정보가 담겨서 사용 설정된 (구성 객체의 형식으로 제공된) 코드를 그대로 복사해온다.

가능한 Comoponent를 기능별로 세분화하고 역할 별로 단순화하여 만드는 것(Dependency Injection)을 지향하기로 하였으므로, firebase API 또한 자체적으로 service 폴더 안에 firbase.js 파일을 만들어 이 안에서 해당 네트워크 통신을 위한 작업을 진행하였다. 또한, firebase의 Authentication 서비스만 담당하는 class component 도 생성할 것이므로, service라는 폴더 안에 auth_service.js도 추가로 생성해주었다. 이 class component에서는 해당 Authentication service의 업무만 처리해줄 것이다.

firbase.js로 돌아와 앞에서 복사한 코드를 붙여넣기를 하고, 내가 사용하고자 하는 서비스만 정리해주었다. 필요한 key는 apiKey, authDomain, databaseURL, projectId 이므로 불필요한 나머지는 삭제해주고 해당 key와 값만 남겨두었다. 또한, 민감한 퍼스널 API나 ID 같은 값들은 .env 파일을 통해서 설정한 뒤 받아오는 형식을 취했다.

import firebase from 'firebase';

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DB_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
};

// Initialize Firebase
const firebaseApp = firebase.initializeApp(firebaseConfig);
export default firebaseApp;

소셜 로그인 서비스를 사용하기 전, 미리 원하는 소셜 서비스를 설정해주기 위해 해당 프로젝트의 대시보드의 Authentication 메뉴로 이동한다. 나는 Github을 이용한 소셜 로그인을 구현해볼 것이기 때문에 Github의 소셜 로그인을 사용하겠다는 사용 설정을 해주어야 했다.

아래의 승인 콜백 URL을 복사해준다. 그리고 (당연하게도!) Github 계정에서도 해당 인증 URL를 사용하겠다는 설정을 해야한다. Github에서 Setting(설정) 페이지 -> Developer settings 순서로 이동하여 Resister a new OAuth Application 페이지로 가보자.

Resister a new OAuth Application 페이지에서 작성해야 되는 순서대로 작성(firebase의 승인 콜백 URL을 붙여넣기) 한 뒤, 완료 버튼을 누른다. 그리고 해당 프로젝트 페이지로 이동한다.

해당 프로젝트에서 설정해준 **Client ID ** 와 Client secrets 번호를 둘다 복사해서 메모장에 넣어두었다. 그리고 다시 Github 승인 콜백 URL이 있던 (Firebase/Authentication) 메뉴로 돌아와 Github 페이지에서 복사해둔 클라이언트 ID(Client ID) 와 클라이언트 보안 비밀번호(secrets 번호)를 각각 붙여넣기 해준다.

이제 소셜 로그인 서비스를 사용할 수 있는 설정이 모두 끝났다! (길다..)
앞서 service 폴더 안에 생성해둔 auth_service.js 파일로 이동하여 소셜 로그인 부분만 담당하는 class 로직을 작성하려고 한다. AuthService 라는 class component 를 만들고 이 안에서 login의 일만 담당하는 login() 함수를 작성해줄 것이다.


import firebase from 'firebase';
import firebaseApp from './firebase';

class AuthService {
  login() {
  }
}
export default AuthService;

이때는 firebase : github 로그인 하는 방법 공식문서를 참조하여, Firebase 자바스크립트 SDK로 로그인 과정을 처리하기 위한 단계를 진행했다.

  1. GitHub 제공업체 객체의 인스턴스를 생성한다.
var provider = new firebase.auth.GithubAuthProvider();
  1. GitHub 제공업체 객체를 사용해 Firebase 인증을 진행한다. 이때, 팝업 창을 띄우거나 로그인 페이지로 리디렉션하여 사용자가 GitHub 계정에 로그인하도록 유도할 수 있다. (공식문서에서는 휴대기기의 경우 리디렉션을 사용할 것을 권장했다.) 나는 팝업 창을 사용할 것이기 때문에 .signInWithPopup을 호출 했다.

import firebase from 'firebase';
import firebaseApp from './firebase';

class AuthService {
  login() {
    const authProvider 
    = new firebase
    	.auth
    	.GithubAuthProvider();
    
    return 
    	firebaseApp
      	.auth()
      	.signInWithPopup(authProvider);
  }
}
export default AuthService;

이제 소셜 로그인을 구현할 수 있는 단계가 왔다. 마지막으로 login의 기능을 구현하는 Component인 MainBoard으로 이동하여 onLogin 이라는 콜백 함수를 작성하고 Login 버튼이 담긴 Component에 props로 authService와 그것을 이용하는 onLogin 콜백 함수를 전달해주었다.

MainBoard Component

const MainBoard = ({ authService }) => {

  const onLogin = () => {
    authService //
      .login()
      .then(console.log);
  };

  return (
    <section className={styles.background}>
      <div className={styles.mainBox}>
        <Nav authService={authService} />
        <div className={styles.container}>
            <Login onLogin={onLogin} />
            <CardMaker />
        </div>
        <Footer />
      </div>
    </section>
  );
};

export default MainBoard;

Login Component


const Login = ({ onLogin }) => {
  return (
    <section className={styles.loginBox}>
      <div className={styles.textBox}>
        <span className={styles.text}>Welcome</span>
      </div>
      <ul className={styles.btnBox}>
        <li>
          <button className={styles.btn} onClick={onLogin}>
            Google
          </button>
        </li>
        <li>
          <button className={styles.btn} onClick={onLogin}>
            Github
          </button>
        </li>
      </ul>
    </section>
  );
};

export default Login;

**실행 결과 **

Github 버튼을 onClick하면 onLogin 콜백함수가 실행되면서 정상적으로 해당 Github 소셜 로그인 팝업창이 뜨는 것을 확인 할 수 있다.

onLogin()의 .then(console.log)의 결과값은 console에서 확인할 수 있다. console에서 받아온 User라는 오브젝트 안에는 Uid라는 유니크한 id 가 존재하는데 이 Uid를 이용하여 데이터 베이스를 사용하자마자 해당하는 데이터를 만들어서 보관할 수 있는 저장소를 만들 예정이다.


참조
공식문서 : firebase 시작하기(웹)
공식문서 : 인증(웹) : Github로 인증하기

profile
N개월차 프론트엔드 개발자, Teta Min

0개의 댓글