[Toy Project - Omuk] 11. 카카오 로그인 API를 통한 로그인 구현

passport-kakao

패스포트에서는 간단하게 카카오 로그인 API를 통해 소셜 로그인을 구현할 수 있습니다.

 

먼저 카카오 디벨로퍼 사이트에서 앱을 등록시켜야 합니다.

https://developers.kakao.com/

Kakao Developers

 

카카오 디벨로퍼 사이트에서 카카오 계정으로 로그인한 후에 상단 바에 있는 내 어플리케이션을 클릭합니다.

 

그 이후 애플리케이션 추가하기를 클릭합니다. 저는 미리 만들어뒀습니다.

앱 이름과 사업자명을 원하는 대로 적고 애플리케이션을 만듭니다.

해당 애플리케이션을 클릭하여 좌측 네비게이션 바에 있는 플랫폼을 클릭합니다. 그 이후 가장 하단에 있는 Web 플랫폼 등록을 클릭합니다.

사이트 도메인에서는 로컬호스트와 익스프레스의 포트를 적습니다.

그 다음 카카오 로그인을 클릭하여 활성화 설정의 상태를 ON으로 전환합니다. 하단으로 내려가면 RedirectURI를 적는 항목이 있습니다. 아래와 같이 적습니다.

그리고 동의항목으로 이동합니다.

개인적으로 사용할 정보를 얻기 위해서 해당 정보들을 체크했습니다.

 

이제 앱키를 클릭하여 REST API 키를 복사합니다.

.env 파일에 KAKAO API 키를 저장해줍시다.

KAKAO_APIKEY=[카카오 REST API 키]

이제 카카오 로그인 전략을 세워야 합니다. 일단 패스포트-카카오 패키지를 설치합니다.

npm i passport-kakao

passport 폴더에서 kakaoStrategy.js 파일을 만듭니다.

import passport from "passport";
import { Strategy as KakaoStrategy } from "passport-kakao";

import User from "../models/user.js";

export default () => {
  passport.use(
    new KakaoStrategy(
      {
        clientID: process.env.KAKAO_APIKEY,
        callbackURL: "/auth/kakao/callback",
      },
      async (accessToken, refreshToken, profile, done) => {
        console.log("kakao profile", profile);
        try {
          const exUser = await User.findOne({
            where: { snsId: profile.id, provider: "kakao" },
          });
          if (exUser) {
            done(null, exUser);
          } else {
            const newUser = await User.create({
              email: profile._json && profile._json.kakao_account.email,
              nickname: profile.displayName,
              snsId: profile.id,
              provider: "kakao",
            });
            done(null, newUser);
          }
        } catch (err) {
          console.error(err);
          done(err);
        }
      }
    )
  );
};

passport.use로 카카오 전략을 사용하도록 작성합니다. 카카오 전략 설정에서 클라이언트 아이디와 콜백 url을 넣어줍니다. 

그 다음 콜백 함수를 정의합니다. 데이터베이스 쿼리를 수행할 것이기 때문에 비동기로 하면 안됩니다. 대부분의 설정은 로컬 로그인 전략과 유사합니다. 다른 점은, 데이터가 없어서 로그인할 수 없는 경우에 회원으로 등록하는 것입니다. 이때, 카카오에서 제공해주는 json 데이터를 확인하기 위해서 미리 콘솔창에 해당 정보를 출력하게 작성했습니다.

 

만약 회원 데이터가 없는 경우에는, 새로 멤버를 테이블에 넣어야 합니다.

 

이 다음에는 passport/index.js 파일에 코드를 추가로 작성합니다.

 

import kakao from "./kakaoStrategy.js";

export default () => {

  ...
  
  local();
  kakao();
};

이제 카카오 로그인에 사용할 라우트를 만들어야 합니다. auth 라우터로 이동하여 내용을 추가합니다.

/** 카카오 API */
router.get("/kakao", passport.authenticate("kakao"));

router.get(
  "/kakao/callback",
  passport.authenticate("kakao", {
    failureRedirect: "/",
  }),
  (req, res) => {
    res.redirect("/");
  }
);

이전의 로컬 전략 비슷합니다. 내부 과정은 카카오에서 다 처리하며, 만약 처리가 실패했을 경우에 failureRedirect의 경로로 리다이렉트됩니다.

 

이제 서버를 실행해서 테스트 해보겠습니다.

 

a태그로 만든 카카오를 눌러줍니다. a태그의 속성으로 href에 /auth/kakao를 작성했습니다.

 

위 화면으로 리다이렉트 되며, 동의한 후에는 라우트에서 정한 루트 경로로 리다이렉트 됩니다. 쿠키를 확인해보겠습니다.

 

이처럼 정상적으로 로그인 되어 세션 쿠키를 받았습니다. 이제 HTML과 CSS 만 어느 정도 다듬고 새로 가게 데이터 모델을 정의해볼 예정입니다.