카카오톡 이름, 프로필 이미지 및 아이디 사용하기

카카오톡 이름, 프로필 이미지 및 아이디 사용하기

카카오 로그인에서 사용한 코드 중 일부분을 자세히 보자

https://dongho-kang.tistory.com/28

카카오톡 로그인 구현(with JavaScript)

function getInfo() {
        Kakao.API.request({
          url: "/v2/user/me",
          success: function (res) {
            console.log(res);
            var id = res.id;
            var profile_nickname = res.kakao_account.profile.nickname;
            var profile_image = res.kakao_account.profile.profile_image_url;
            localStorage.setItem("nickname", profile_nickname);
            localStorage.setItem("id", id);
            localStorage.setItem("profileImage", profile_image);
            console.log(profile_nickname);
            console.log(id);
            console.log(profile_image);

            window.location.href = "../index.html";
          },
          fail: function (error) {
            alert("카카오 로그인 실패" + JSON.stringify(error));
          },
        });
      }

이 함수를 통해 카카오 아이디, 프로필 닉네임 그리고 프로필 이미지 URL을 가져와서 localStorage에 저장할 수 있다.

localStroage에 저장한 결과

프로필 이미지 URL을 입력해보면 현재 내 카카오톡 프로필 사진이 뜨는것을 볼 수 확인할 수 있다.

그래서 이 URL을 img태그의 src에 넣으면 화면에 프로필 사진을 띄울 수 있다.

<link rel="stylesheet" href="../css/header_login.css" />
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script type="text/javascript" src="/js/apikey.js"></script>

<script>
  const profileImageValue = localStorage.getItem("profileImage");

    const profileImageElement = document.getElementById("profile_Image");
    const profileImgElement = document.getElementById("profile_Img");
    profileImageElement.src = profileImageValue;
    profileImgElement.src = profileImageValue;
  

  function kakaoLogOut() {
    const KaApiKey = KAKAO_API_KEY;
    //2. 카카오 초기화
    Kakao.init(KaApiKey);
    Kakao.Auth.logout(function (response) {
      localStorage.clear();
      location.href = "../index.html";
      console.log("yes");
    });
  }
</script>

<!-- logo를 inner에 같이 넣으면 logo가 항상 화면의 가운데로 올 수 없기 때문에 inner에 넣지 않음 -->
<div class="logo" onclick="location.href='../index.html'">BLUE MARVEL</div>
<div class="inner">
  <img
    class="back"
    onclick="go_back()"
    src="../image/back.png"
    alt="뒤로가기"
  />
  <ul class="user">
    <img src="/image/profileImage.jpg" alt="" id="profile_Image" />
    <li onclick="kakaoLogOut()">LOG OUT</li>
    <li onclick="location.href = '../index/all_char.html' ">CHARACTER</li>
  </ul>

  <!-- mobile로 보았을 때 드롭다운으로 표현되어야 하기 때문에 따로 다시 만들어줌 -->

  <div class="dropdown_contain">
    <button class="dropdown">
      <img class="list" src="../image/list.svg" />
    </button>
    <ul class="m_user" id="dp-content">
      <img src="/image/profileImage.jpg" alt="" id="profile_Img" />
      <li onclick="kakaoLogOut()">LOG OUT</li>
      <li onclick="location.href = '../index/all_char.html' ">CHARACTER</li>
    </ul>
  </div>
</div>

먼저, 프로필 URL을 localstorage에서 가져오고 document.getElementID를 통해 이미지 태그를 선택하여 src에 할당하면 밑에처럼 프로필 이미지가 뜨는것을 확인할 수 있다. 

---

이 과정을 통해 카카오 로그인을 사용하면 기본적인 카카오의 정보를 편리하게 사용할 수 있다는 것을 알게 되었고 사용자들도 새롭게 여러가지의 정보를 입력하지 않아도 되겠다는 생각이 들었다. 앞으로 카카오 SDK를 유용하게 사용할 것 이다. (DB를 사용하지 않아서 정보를 계속 저장하여 사용하지 못한게 조금 아쉽다...)