OAuth 구현 with Firebase

Goody·2021년 5월 8일

리액트 자바스크립트

자바스크립트

목록 보기

13/13

들어가며

프론트 단에서 OAuth 구현 방법을 설명한 글입니다.

Github와 Google 두 플랫폼을 통한 OAuth 로그인을 구현해보겠습니다.

참고한 학습자료 링크는 본문 맨 밑에 있습니다.

시작하기

OAuth 구현 방법을 순서대로 배워봅시다.

모듈 설치

콘솔에 다음과 같이 입력합니다.

npm i firebase

Firebase 프로젝트 생성

Firebase 에 접속하고, 시작하기 버튼을 누릅니다.

001

프로젝트 추가 버튼을 누릅니다.
002

원하는 프로젝트 명을 입력하고, 계속을 누릅니다.

003

프로젝트에 대한 여러 데이터 인사이트를 제공하는 구글 애널리틱스 기능을 사용할 것이냐고 묻는 창이 뜨는데,

어디까지나 옵션이기 때문에, 체크 하든 말든 상관 없을 것 같습니다.

004

프로젝트가 생성되었습니다.
005

앱 생성

프로젝트 창에서 웹 앱 생성 버튼을 누릅니다.

006

원하는 앱 이름을 입력하고, 등록합니다.

007

앱 등록을 마치면, 스크립트가 나오는데, 제가 선택한 부분만큼만 Ctrl+C 로 복사해 둡니다.

008

혹시나 스크립트를 다시 보고 싶으시다면, 프로젝트 메인 화면-프로젝트 설정 으로 들어가면 됩니다.

009

CRA로 만든 리액트 프로젝트를 켜고, src/config/firebase-config.js 를 생성합니다.

010

환경설정

firebase-config.js 파일에 아까 복사해둔 스크립트를 붙여넣고,

아래와 같이 import 구문과 export 구문을 추가해 모듈화 해줍니다.

// src/config/firbase-config.js

import firebase from 'firebase';

const firebaseConfig = {
  apiKey: '복사한내용',
  authDomain: '복사한내용',
  projectId: '복사한내용',
  storageBucket: '복사한내용',
  messagingSenderId: '복사한내용',
  appId: '복사한내용',
  measurementId: '복사한내용',
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();

export default firebase;

`src/config` 경로에 플랫폼(구글, 깃허브) 별로 Provider를 정의해 놓을 파일을 생성합니다.

012

// src/config/authMethods.js

import firebase from 'firebase';

export const facebookProvider = new firebase.auth.FacebookAuthProvider();
export const googleProvider = new firebase.auth.GoogleAuthProvider();
export const githubProvider = new firebase.auth.GithubAuthProvider();

OAuth 를 실행할 서비스 파일도 하나 만들어 둡니다.

011

// /src/service/auth.js

// firebase 는 node_modules 에서 불러오는게 아니라, config에서 셋업을 마친 firebase를 불러와야 합니다!
import firebase from '../config/firebase-config';

const socialMediaAuth = (provider) => {
  firebase
    .auth()
    .signInWithPopup(provider)
    .then((res) => res.user)
    .catch((er) => er);
};

export default socialMediaAuth;

이제 App.js 에 로그인 버튼을 넣어 봅시다.


// src/App.js

import { githubProvider, googleProvider } from './config/authMethods';
import socialMediaAuth from './service/auth';

function App() {
  const handleOnClick = async (provider) => {
    const res = await socialMediaAuth(provider);
    console.log(res);
  };
  return (
    <div className="App">
      <header className="App-header">
        <button onClick={() => handleOnClick(googleProvider)}>
          구글 로그인
        </button>
        <button onClick={() => handleOnClick(githubProvider)}>
          깃허브 로그인
        </button>
      </header>
    </div>
  );
}

export default App;

이제 앱을 실행해보면 버튼은 잘 뜨지만, 아직 로그인은 되지 않습니다.

아직 우리의 firebase 가 google 이나 github 플랫폼과 연결되지 않았기 때문입니다.
013

Firebase와 구글 로그인 연결

이전에 만들었던 Firebase 프로젝트 페이지로 가보면, Authentication 이라는 탭이 있습니다.

클릭하면 Firebase와 연동하여 로그인 기능을 제공하는 플랫폼 목록이 뜹니다.

구글을 먼저 클릭해 봅시다.

014

팝업 상단의 사용설정을 켜주고, 유저에게 보여주고 싶은 공개용 이름과, 본인의 이메일을 적고 저장을 누릅니다.

015

다시 우리의 홈페이지로 가서 구글 로그인 버튼을 클릭하면,
구글 계정으로 로그인을 하는 팝업 창이 뜹니다.

016

Firebase 와 깃허브 로그인 연결

이번엔 깃허브로 로그인 하는 기능을 추가해 보겠습니다.

구글 로그인 설정했을 때와 똑같이, Firebase 프로젝트의 Authentication 탭 페이지에서
Github 를 찾아 클릭합니다.

빨간펜으로 표시된 링크를 클립보드에 복사해둡니다.

017

본인의 깃허브 페이지로 접속해서, 프로필 사진을 클릭합니다.

018

계정 설정 페이지에서, Developer Settings 탭으로 들어갑니다.

019

New OAuth App 버튼을 클릭해 새로운 OAuth 앱을 등록합니다.

020

Application Name : 자신이 운영하는 앱의 이름

Homepage URL : 앱의 URL 주소 (아직 배포한 URL이 없다면 http://localhost:3000/)

Application description : 앱 설명 (Optional)

Authorization callback URL : 이전에 Firebase 의 Authentication 페이지에서 복사했던 주소를 붙여넣습니다.

021