카카오 소셜 로그인 및 유저 프로필 변경

https://github.com/Daniel-Jeon/project1/commit/7b288ce88bae658e4143189d06b821b1b43494a7

export const startKakaoLogin = (req, res) => {
  const baseUrl = "https://kauth.kakao.com/oauth/authorize";
  const config = {
    client_id: process.env.KAKAO_API_KEY,
    redirect_uri: process.env.KAKAO_REDIRECT_URI,
    response_type: "code",
  };
  const parameters = new URLSearchParams(config).toString();
  return res.redirect(`${baseUrl}?${parameters}`);
};

export const finishKakaoLogin = async (req, res) => {
  const baseUrl = "https://kauth.kakao.com/oauth/token";
  const config = {
    grant_type: "authorization_code",
    client_id: process.env.KAKAO_API_KEY,
    redirect_uri: process.env.KAKAO_REDIRECT_URI,
    code: req.query.code,
  };
  const parameters = new URLSearchParams(config).toString();
  const token = await (
    await fetch(`${baseUrl}?${parameters}`, {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
      },
    })
  ).json();
  const userData = await (
    await fetch("https://kapi.kakao.com/v2/user/me", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${token.access_token}`,
        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
      },
    })
  ).json();
  const userEmail = userData.kakao_account.email;
  let user = await User.findOne({ email: userEmail });
  if (!user) {
    user = await User.create({
      email: userData.kakao_account.email,
      password: "",
      nickname: userData.kakao_account.profile.nickname,
      socialOnly: true,
    });
  }
  req.session.loggedIn = true;
  req.session.user = user;
  return res.redirect("/");
};

한국 사이트다 보니 가이드도 한글로 되어서 그나마 이해하기 쉬었다

소셜 로그인 구현을 혼자서 두번 해보고 나니 fetch / REST API / Promiss에 대해 많은 이해를 하게 되었다.

그리고 유저정보 변경을 구현했는데 요새는 기본 정보와 비밀번호 변경하는 화면을 구분해서 하기에 그렇게 만들었다.

기본 정보 변경시 findByIdAndUpdate를 해서 인풋으로 받은 정보를 업데이트 할 수 있는데 그냥 하면 변경되기전의 문서를 반환하는걸 이해해야 한다.

A.findByIdAndUpdate(id, update, options)에서 옵션에 new 파라미터를 넣어 변경된 문서를 가져와야 한다.

비밀번호를 변경할때 습관적으로 세션에 있는 비밀번호를 가져올수가 있는데 그럼 꼬일수가 있으니 _id를 통해 해당 유저정보를 가져오고 거기에 변경된 비밀번호를 업데이트 해야한다.

소셜 로그인의 경우 비밀번호 없이 로그인하므로 비밀번호 변경 페이지로 못가게 해야하므로 미들웨어를 하나 더 만들어서 socialOnly가 true일 경우는 돌아가게 만들었다.

https://github.com/Daniel-Jeon/project1/commit/7b288ce88bae658e4143189d06b821b1b43494a7

update user profile · Daniel-Jeon/project1@7b288ce