OAuth 로그인 개발환경 구성(with React, Express)

필자는 소셜 로그인을 자주 사용합니다.
실제로 구현해보며 얼마나 어려운지(?) 알아봅시다.

💡 REST API를 사용해서 구현해요. 언어는 Javascript 입니다. :)

알아보기 전에, 구성도와 개발환경 구성을 먼저 할게요!

OAuth 구성도

위와 같은 구성도를 토대로, OAuth를 사용하는 모든 서비스에 동일한 방법으로 구현합니다.

💡 간단 설명

1. 플랫폼(Kakao 등) 개발자 페이지에서 redirect uri 설정
   ex) http://localhost:3000/callback/kakao
2. Frontend에서 플랫폼 로그인 URL을 받아오는 API 요청
3. Frontend에서 URL을 받아 플랫폼 로그인 화면 제공
4. 플랫폼 로그인 후, redirect uri로 데이터 전달
5. 받은 데이터를 Backend로 로그인 API 요청
6. Backend에서 전달받은 데이터로 Kakao에 인증 후, 프론트엔드로 로그인 API 응답

백엔드 서버 구성

백엔드 먼저 서버 구성을 하겠습니다.

초기 구성

# 폴더 생성
$ mkdir backend

# 폴더 이동
$ cd backend

# npm 초기 설정
$ npm init -y

# 필요한 라이브러리 설치
$ npm i express axios nodemon dotenv
$ npm i -D @types/express

# 소스 폴더 생성
$ mkdir src

소스 파일 추가

src 하위에 아래 파일 두 개를 추가합니다.

// src/index.js
// 서버 실행 파일

import app from "./app.js";

const PORT = 3001;

app.listen(PORT, () => {
  console.log(`Listening on port ${PORT}`);
}); // 서버 실행

// src/app.js
// express 서버 구성 파일

import express from "express";
import cors from "cors";

const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cors());

export default app;

package.json 수정

package.json의 특정 부분을 수정합니다.

// package.json

{
  ...,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon -r dotenv/config src/index.js" // 👈 이 부분! (nodemon으로 서버 실행)
  },
  "type": "module", // 👈 이 부분! (node 13 이후부터는 import/export 사용 시 해당 설정으로 처리 가능, 13 이하라면 babel 설정 해야해요.)
  ...
}

실행

$ npm run start

서버 구성이 완료되었어요.😊

프론트엔드 구성

프론트엔드는 CRA(create-react-app)을 사용하기에, 비교적 간단합니다.

초기 구성

# frontend(CRA) 프로젝트 생성
$ npx create-react-app frontend

# 필요한 라이브러리 설치
$ npm i react-router-dom

불필요 파일 제거

src 하위 App.test.js, logo.svg, setupTests.js, reportWebVitals.js를 삭제합니다.

파일 추가 및 수정

App.js는 아래처럼 수정합니다.

// src/App.js

import "./App.css";

function App() {
  return <div className="App">{/* 추후 버튼 컴포넌트 */}</div>;
}

export default App;

App.css는 아래처럼 수정합니다. (필수는 아니예요.😁)

/* button style 초기화 */
button {
  background: inherit;
  border: none;
  box-shadow: none;
  border-radius: 10px;
  padding: 0;
  overflow: visible;
  cursor: pointer;
  width: 50%;
  height: 5%;
  background-color: #9ce8ee;
  border-color: #9ce8ee;
  color: #ffffff;
}

button:hover {
  background-color: #8be4eb;
  border-color: #8be4eb;
}

button:active {
  background-color: #7be0e8;
  border-color: #7be0e8;
}

/* 화면 구성 초기화 */
.App {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.App :not(style) {
  margin: 10px;
}

Main.js 파일을 추가합니다.
추후 로그인에 성공했을 때를 위한 컴포넌트입니다.

// src/Main.js

function Main() {
  return <div className="App">Success login!</div>;
}

export default Main;

마지막으로 index.js 파일을 수정합니다.
페이지 이동 시 처리하는 부분입니다.

// src/index.js

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import "./index.css";
import App from "./App";
import Main from "./Main";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
        <Route path="main" element={<Main />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

실행

$ npm run start

흰 화면만 나오면 정상이예요.😊
개발환경 구성은 완료했으니, 이 구성을 기반으로 소셜 로그인 기능을 해보겠습니다.

💡 전체 소스코드는 GitHub에 올려두었어요. :)

의견은 언제든 댓글로 남겨주세요. 🙂