0220 ~ 0222 : 카카오 로그인 & 유저 프로필 & 암호화

히치키치·2022년 2월 22일
0

Book_Curly

목록 보기
6/8

fake-Store API를 통해 정상적인 로그인 요청과 회원가입은 성공했으나 DB가 없으니 실제 유저 정보까지 이용하는데 한계점이 있었다. 그와중에 카카오 소셜 로그인을 이용하면 어떨까 생각이 들어 사용해 봄

공식 문서를 따라 SDK 방식으로 진행해봄

   <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>

public/index.html에 넣음

로그인 페이지에 카카오 로그인 버튼 추가

data-type="login" 속성을 통해 이 버튼으로 로그인을 할지 로그아웃을 할지 명시했다.

import KakaoAuth from "./KakaoAuth";

(...)
 
  <button
      className="KakaoLogin_btn"
      data-type="login"
       onClick={KakaoAuth}>
       카카오계정으로 로그인
  </button>

KakaoAuth를 SDK를 한번만 initialize하도록 하며 AccessToken을 받아온다.
클릭한 button의 data 속성에 따라 login, logout 함수가 실행됨

const initKakao = (e) => {
  // 등록된 앱의 JavaScript key
  const KAKAO_CLIENT_ID = "17e19423194d296e3b3314276ed4ba08";

  // SDK는 한 번만 초기화해야 한다.
  // 중복되는 초기화를 막기 위해 isInitialized()로 SDK 초기화 여부를 판단한다.

  if (!window.Kakao.isInitialized()) {
    // JavaScript key를 인자로 주고 SDK 초기화
    window.Kakao.init(KAKAO_CLIENT_ID);
    // SDK 초기화 여부를 확인하자.
    console.log(window.Kakao.isInitialized());
  }

  const Auth = e.target.dataset.type;
  if (Auth === "login") {
    loginKakao();
  } else if (Auth === "logout") {
    logoutKaKao();
  }
  console.log(e.target.dataset.type);

  return <></>;
};

카카오 로그인 함수
AccessToken을 발급받은 상태이면 Kakao.Auth.login을 통해 로그인하고 받아올 계정의 정보를 scope를 통해 명시함
Kakao.API.request을 통해 유저 정보를 요청함
Promise로 pending 상태 이후 정상적 반환으로 콜백이 실행되면 해당 유저 정보가 반환되면 이를 localstorage에 저장됨...

const loginKakao = () => {
  if (window.Kakao.Auth.getAccessToken()) {
    alert("Already logged in");
    return;
  }
  try {
    return new Promise((resolve, reject) =>
      window.Kakao.Auth.login({
        scope:
          "profile_nickname,profile_image,account_email,gender,age_range,birthday",
        success: function (response) {
          console.log(response);
          window.Kakao.API.request({
            url: "/v2/user/me",
            success: (res) => {
              const kakao_account = res.kakao_account;
              localStorage.setItem("User", encrypt(kakao_account, "User"));

              window.location.href = "/book_curly";
            },
          });
        },
        fail: function (error) {
          console.log(error);
        },
      })
    );
  } catch (error) {
    console.log(error);
  }
};

백엔드가 없어 별도의 DB 저장이 없어 localStorage에 떡하니 개인정보가 담긴게 좀 아쉬워서 자바스크립트로 암호화할 수 있는 것을 찾아보았다.
crypto-js 라이브러리 활용 참고해 암호화/복호화 함수를 작성하고 localStorage에 암호화한 값을 저장하고 유저 개인 프로필 페이지에서 이를 다시 복호화해 화면에 렌더링 하고자 한다..!!!

import CryptoJS from "crypto-js";

export const encrypt = (data, key) => { //암호화 함수
  return CryptoJS.AES.encrypt(JSON.stringify(data), key).toString();
};

export const decrypt = (text, key) => { //복호화 함수
  try {
    const bytes = CryptoJS.AES.decrypt(text, key);
    return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
  } catch (err) {
    console.log(err);
    return;
  }
};

로그인하여 localStorage에 암호화된 유저 정보를 복호화해 유저이름을 받아와서 화면상단에 000님이 보이도록 함

//localStorage에 암호화된 유저 정보 복호화해 유저이름 받아오는 함수
const getUsername = () => {
  return decrypt(localStorage.getItem("User"), "User").profile.nickname;
};

헤더상단에 더이상 로그인/회원가입이 아닌 {유저이름}/내정보/로그아웃이 떠야한다.

   {localStorage.getItem("kakao_d13afba05b7222903cff5f3a2226caa2") && (
          <>
            <li className="UserMenu_List_name">{getUsername()}</li>
            <li className="UserMenu_List_profile">
              <Link to="/myprofile">내정보</Link>
            </li>
            <li
              className="UserMenu_List_logout"
              data-type="logout"
              onClick={KakaoAuth}
            >
              로그아웃
            </li>
          </>
        )}
        {!localStorage.getItem("kakao_d13afba05b7222903cff5f3a2226caa2") && (
          <>
            <li className="UserMenu_List_join">
              <Link to="/signup">회원가입</Link>
            </li>
            <li className="UserMenu_List_login">
              <Link to="/login">로그인</Link>
            </li>
          </>
        )}

0개의 댓글