Step 0. 카카오 Developer 등록 및 설정

아래 링크로 이동해 카카오 로그인 혹은 회원가입 진행한다.
Kakao Developers

내 애플리케이션으로 이동한다.

애플리케이션을 추가한다.

앱 이름과 사업자명을 입력하고 동의 항목에 체크를 한다.

생성한 애플리케이션을 클릭한다.

앱 설정 > 플랫폼으로 이동해서 Web 플랫폼 등록을 진행한다.

카카오 로그인을 사용할 서버 주소를 입력하고 저장한다.

제품 설정 > 카카오 로그인에서 카카오 로그인을 활성화 시킨다.


제품 설정 > 카카오 로그인에서 Redirect URI를 등록한다.

인가 코드를 받을 서버의 주소를 입력하고 저장한다.

앱 설정 > 앱키에서 REST API키를 확인하고 사용하기 위해 저장해 둔다.

제품 설정 > 카카오로그인 > 보안에서 Client Secret 코드 생성을 한다.

제품 설정 > 카카오로그인 > 보안에서 Client Secret을 활성화 시킨다.

카카오 로그인을 위한 준비는 끝났다.
로그인을 위한 코드를 작성하자.

Step 1. 인가 코드 받기

Frontend Server

npm init -y

npm install cookie-parser express nunjucks

const express = require("express");
const app = express();
const cookieParser = require("cookie-parser");
const nunjucks = require("nunjucks");

app.set("view engine", "html");
nunjucks.configure("views", {
  express: app,
});

app.use(cookieParser());
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.use((req, res, next) => {
  try {
    const { token } = req.cookies;
    const [header, payload, signature] = token.split(".");

    const result = JSON.parse(Buffer.from(payload, "base64url").toString("utf-8"));

    req.payload = result;
  } catch {
  } finally {
    next();
  }
});

app.get("/", (req, res) => {
  if (req.payload === undefined) return res.render("index.html");
  const { token } = req.cookies;
  const { userid } = req.payload;
  res.render("index.html", { userid, token });
});

const kakao = {
  host: `https://kauth.kakao.com`,
  restApiKey: `6f2dcdafd49934902135cc09af0be426`,
  redirectUri: `http://localhost:3000/oauth/kakao`,
};

app.get("/kakao/login", (req, res) => {
  const redirectURI = `${kakao.host}/oauth/authorize?client_id=${kakao.restApiKey}&redirect_uri=${kakao.redirectUri}&response_type=code`;
  res.redirect(redirectURI);
});

app.listen(3005, () => {
  console.log(`Front Server Start`);
});

메인 페이지에서 /kakao/login으로 요청을 날리면 kakao 서버로 리다이렉트를 날린다.
kakao 서버는 카카오 계정으로 로그인을 할 수 있는 페이지를 제공한다.
사용자가 카카오 계정으로 로그인에 성공하면 개인정보와 접근권한등에 동의할 수 있는 창이 뜨게 된다.
사용자가 동의를 완료하면 카카오 서버는 우리가 설정한 리다이렉트 URI로 인가 코드를 전달해준다.

Step 2. 토큰 받기

Backend Server

npm init -y

npm install axios cors express 

const express = require("express");
const app = express();
const axios = require("axios");
const cors = require("cors");
const qs = require("qs");
const JWT = require("./lib/jwt");
const crypto = require("crypto");

const jwt = new JWT({ crypto, salt: "cloudcoke" });

app.use(
  cors({
    origin: true,
    credentials: true,
  })
);
app.use(express.json());

const kakao = {
  host: "https://kauth.kakao.com",
  restApiKey: "6f2dcdafd49934902135cc09af0be426",
  redirectUri: "http://localhost:3000/oauth/kakao",
  clientSecret: "6wNAPIWhS0qeJlmPMdYOOT55nkP33yhq",
  adminKey: "f75373333223450115f25a14d763e906",
};

app.get("/oauth/kakao", async (req, res, next) => {
  const { code } = req.query;
  
  const host = `${kakao.host}/oauth/token`;
  const headers = {
    "Content-type": "application/x-www-form-urlencoded",
  };
  const body = qs.stringify({
    grant_type: "authorization_code",
    client_id: kakao.restApiKey,
    redirect_uri: kakao.redirectUri,
    code,
    client_secret: kakao.clientSecret,
  });

  const response = await axios.post(host, body, headers);
...

받은 인가 코드를 가지고 카카오 서버에 토큰 발급을 요청한다.

Step 3. 회원 정보 가져오기 및 로그인

try {
    const { access_token } = response.data;
    const host = `https://kapi.kakao.com/v2/user/me`;
    const user = await axios.post(host, null, {
      headers: {
        "Content-type": "application/x-www-form-urlencoded",
        Authorization: `Bearer ${access_token}`,
      },
    });
    const token = jwt.createToken({ userid: user.data.id });
    res.cookie("token", token);
  } catch (e) {
    next(e);
  }

  res.redirect("http://localhost:3005");
});

app.use((error, req, res, next) => {
  res.status(500).send(error.message);
});

app.listen(3000, () => {
  console.log(`Back Server Start`);
});

발급 받은 토큰 중 access token을 이용해 카카오 서버에 회원 정보를 요청한다.
회원 정보를 전달 받으면 백엔드 서버는 jwt 토큰을 생성해 쿠키로 전달한다.

전달 받은 회원 정보를 DB에 조회를 해 회원이 아니라면 DB에 저장을 하고 회원이라면 바로 토큰을 만들어 전달해 주어야 한다.