카카오 로그인/로그아웃 기능 개발(REST API)

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

 

공식문서에 가면 튜토리얼이 잘 되어있지만 잘 모르겠어서 정~말 여기저기 도움을 많이 받은 기능.. ^^ 이다!

1. GET/ 카카오 인가코드받기
2. POST/ 인가코드 보내서 엑세스 토큰받기
3. GET/ 카카오 사용자 이름, 이메일 통해 데이터베이스(이번 플젝의 경우 prisma) 안에 정보 저장,
    인증 쿠키 발행하기

간단하게 이런 단계로 구성되어있고, 하나하나 과정에 대해 설명해보려 한다.

카카오 로그인을 사용하기 위해 선행으로 kakao developers 로그인해서 내 애플리케이션 등록하기, redirect uri 등록하기 등 여러 절차가 있는데 그건 카카오 공식 홈페이지를 보고 따라해도 충분해서 생략한다.

 

인가코드 받기

카카오 로그인 동의 화면을 호출하고, 사용자 동의를 거쳐 인가코드를 발급한다. 

router.get("/kakao", async (req, res, next) => {
  const kakaoLoginURL = `https://kauth.kakao.com/oauth/authorize?client_id=${process.env.CLIENT_ID}&redirect_uri=${process.env.REDIRECT_URL}&response_type=code`;

  return res.redirect(kakaoLoginURL);
});

client_id	앱 REST API 키 [내 애플리케이션] > [앱 키]
redirect_uri	인가코드를 전달받을 서비스 서버의 URI [내 애플리케이션] > [카카오 로그인] > [Redirect URI]에서 등록
response_type	code로 고정

 

 

만들어놓은 api키로 이동하면 카카오서비스의 계정로그인 동의창으로 이동한다.

사용자가 아이디 비밀번호를 입력하고 동의할시, 입력해 두었던 redirect URI로 인가코드가 발급된다.

 

액세스 토큰 받아 사용자 로그인 처리하기

router.get("/kakao/callback", async (req, res, next) => {
  const code = req.query.code;
  console.log(code);
  //   console.log("인가코드:", code); //인가코드가 담겨있음

//2. post/인가코드 보내서 토큰받기
  const tokenRequest = await axios.post(
    "https://kauth.kakao.com/oauth/token",
    {
      grant_type: "authorization_code",
      client_id: "e32eea1d3f336e14e405fa4fba361307",
      redirect_uri: process.env.REDIRECT_URL,
      code,
      client_secret: "EnmTbf4vrow68BmqehsT1RPzCUFe8iKW",
    },
    {
      headers: {
        "content-type": "application/x-www-form-urlencoded;charset=utf-8",
      },
    },
  );

  //3. 카카오사용자 이름, 이메일 통해 prisma users 안에 정보 저장하고 인증쿠키 발행하기
  const { access_token } = tokenRequest.data;
  console.log(access_token);
  const profileRequest = await axios({
    method: "GET",
    url: "https://kapi.kakao.com/v2/user/me",
    headers: {
      Authorization: `Bearer ${access_token}`,
    },
  });

  const { email, profile } = profileRequest.data.kakao_account;
  const name = profile.nickname;
  const users = await prisma.users.upsert({
    where: { email },
    update: { email },
    create: { email, password: "default" },
  });

  const userJWT = jwt.sign(
    { userId: users.userId },
    process.env.SESSION_SECRET_KEY,
  );
  res.cookie("authorization", `Bearer ${userJWT}`);

  return res.status(200).json({ message: "로그인 성공" });
});

2. 요청 구성요소

헤더
Content-type	Content-type: application/x-www-form-urlencoded;charset=utf-8
본문
grant_type	authorization_code로 고정
client_id	앱 REST API 키 [내 애플리케이션] > [앱 키]에서 확인
redirect_uri	인가 코드가 리다이렉트된 URI
code	인가 코드 받기 요청으로 얻은 인가 코드
client_secret	토큰 발급 시, 보안을 강화하기 위해 추가 확인하는 코드 [내 애플리케이션] > [보안]에서 설정 가능 ON 상태인 경우 필수 설정해야 함

 

 

 

3. 사용자 정보 가져오기(액세스토큰 방식)

URI	https://kapi.kakao.com/v2/user/me
헤더) Authorization	Authorization: Bearer ${ACCESS_TOKEN}

 

로그아웃 하기

로그아웃은 정말정말 간단하다!

router.get("/kakao/logout", async (req, res, next) => {
  const kakaoLoginout = `https://kauth.kakao.com/oauth/logout?client_id=${process.env.CLIENT_ID}&logout_redirect_uri=http://localhost:3018/api/kakao/logout/callback`;

  return res.redirect(kakaoLoginout);
});

인가코드 받아오는 과정과 거의 비슷하다.