250213 포트폴리오 프로젝트(30)

geenee·2025년 2월 13일

nodejs portfolio reactjs

Portfolio

목록 보기

36/38

소셜 로그인(카카오)

카카오 로그인으로 토큰과 사용자 정보를 받아왔으니 이후 로직을 추가해줘야한다

user 테이블 속성 추가

소셜로그인인지 로컬로그인인지 구분하기 위해 mem_type 속성 추가
로컬로그인 시 필수 속성 : 아이디, 비밀번호, 이름, 이메일, 닉네임
개발자 모드에서는 카카오 필수 속성 : 닉네임 선택동의 : 이메일
아이디,비밀번호,닉네임은 임의 값 저장
이름,이메일은 필수 속성이라고 생각하고 이름은 임의 글자 저장, 이메일은 받은대로 저장

router.get("/kakaologin", async (req, res) => {
  const code = req.query.code;
  const KAKAO_OAUTH_TOKEN_API_URL = "https://kauth.kakao.com/oauth/token";
  const KAKAO_GRANT_TYPE = "authorization_code";
  const KAKAO_CLIENT_id = process.env.REACT_APP_KAKAO_RESTAPI_KEY;
  const KAKAO_REDIRECT_URL = process.env.REACT_APP_KAKAO_REDIRECT_URI;

  try {
    // 카카오 로그인 유저 토큰 요청
    const response = await axios.post(
      `${KAKAO_OAUTH_TOKEN_API_URL}?grant_type=${KAKAO_GRANT_TYPE}&client_id=${KAKAO_CLIENT_id}&redirect_uri=${KAKAO_REDIRECT_URL}&code=${code}`,
      {
        headers: {
          "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
        },
      }
    );

    const access_token = response.data.access_token;
    const refresh_token = response.data.refresh_token;

    // 카카오 사용자 정보 요청
    const userinfo = await axios.get(`https://kapi.kakao.com/v2/user/me`, {
      headers: {
        Authorization: `Bearer ${access_token}`,
      },
    });

    const user_email = userinfo.data.kakao_account.email;
    const user_nickname = String(userinfo.data.properties.nickname).slice(0, 5);
    //랜덤 코드 생성(7자리)
    let randomcode = String(Math.floor(Math.random() * 10000000)).padStart(
      7,
      "0"
    );

    // 유저 DB 조회
    let selectresult = await DB.runDB(
      `SELECT * FROM user WHERE mem_email = '${user_email}' AND mem_status = 'Y' AND mem_type = 'social_kakao'`
    );

    if (selectresult.length === 0) {
      // 유저 DB 추가
      const insertresult = await DB.runDB(
        `INSERT INTO user(mem_userid,mem_password,mem_username,mem_email,mem_nickname,mem_phone,mem_regtime,mem_type) VALUES ('kakao${randomcode}','','카카오','${user_email}','${user_nickname}','',NOW(),'social_kakao')`
      );
      // 유저 다시 조회
      selectresult = await DB.runDB(
        `SELECT * FROM user WHERE mem_email = '${user_email}' AND mem_status = 'Y' AND mem_type = 'social_kakao'`
      );
    }

    /**
     * 로그인 세션 저장
     */
    req.session.is_logined = true;
    req.session.idx = selectresult[0].mem_idx;
    req.session.type = selectresult[0].mem_type;
    req.session.access_token = access_token;
    req.session.refresh_token = refresh_token;
    req.session.save();

    // 메인 페이지로 이동
    res.redirect("http://localhost:3000/");
  } catch (e) {
    console.log(e);
    res.send(e);
  }
});

로그인 요청 부분에서는 이렇게 처리했다!

토큰 요청 > 사용자 정보 요청
사용자 정보로 DB 조회
사용자 정보가 없는 경우 DB에 추가
nodejs session에 필요한 값 저장

router.get("/logout", async (req, res) => {
  if (req.session.type === "social_kakao") {
    axios({
      method: "POST",
      url: "https://kapi.kakao.com/v1/user/logout",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
        Authorization: `Bearer ${req.session.access_token}`,
      },
    })
      .then(() => {})
      .catch((e) => {
        // 이미 만료된 토큰일 경우
        if (e.response.data.code === -401) {
          console.log(e);
        }
      });
  }

  req.session.destroy();
  res.send({ isLogin: false });
});