Kakao login / map api

1. 로그인

Kakao Developers 셋팅

로그인 > 내 애플리케이션 > 애플리케이션 추가하기로 앱 추가

요약 정보 > JavaScript 키 기록

플랫폼 > 사이트 도메인 등록(http://localhost 가능)

카카오 로그인 > 활성화 설정 ON 변경

동의항목 > 닉네임 필수 동의

 

Kakao Developers

 

 

 

2. 로그아웃

kakaoLogout() {
  window.Kakao.API.request({
    url: '/v1/user/unlink',
  })
    .then(function(response) {
      console.log(response);
    })
    .catch(function(error) {
      console.log(error);
    });
},

 

Kakao Developers

 

 

 

 

3. Vue.js에서 로그인API 사용하기

- index.html

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script><!-- 카카오 로그인 -->
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 api key"></script><!-- 카카오 지도 -->

- Kakao.vue

<template>
  <div class="kakao">
    <h1>Kakao</h1>
    <div id="custom-login-btn" @click="kakaoLogin()">
      <button type="button" class="kakaoBtn">
        <font-awesome-icon icon="fa-solid fa-comments"/>
        카카오 로그인
      </button>
      <button type="button"
              @click="kakaoLogout()"
              class="kakaoLogout kakaoBtn ml-1"> 로그아웃
      </button>
    </div>

    <div class="kakaoMap">
      <div id="map"></div>
    </div>
  </div><!--// kakao -->
</template>

<script>
window.Kakao.init('발급받은 api key')

export default {
  name: 'KakaoLogin',
  mounted() {
    if (window.kakao && window.kakao.maps) {
      this.initMap()
    } else {
      const script = document.createElement('script')
      script.onload = () => kakao.maps.load(this.initMap)
      script.src = 'http://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=발급받은 api key'
      document.head.appendChild(script)
    }
  },
  methods: {
    kakaoLogin() {
      window.Kakao.Auth.login({
        scope: 'profile_nickname, account_email',
        success: this.getKakaoAccount
      })
    },
    getKakaoAccount() {
      window.Kakao.API.request({
        url: '/v2/user/me',
        success: res => {
          const kakao_account = res.kakao_account
          const nickname = kakao_account.profile.nickname
          const email = kakao_account.email
          console.log('nickname', nickname)
          console.log('email', email)
          console.log('로그인 성공!')
        },
        fail: error => {
          console.log(error)
        }
      })
    },
    kakaoLogout() {
      window.Kakao.Auth.logout((res) => {
        console.log(res)
      })
    },
    initMap() {
      const mapContainer = document.getElementById('map'),
        mapOption = {
          center: new kakao.maps.LatLng(37.564343, 126.947613),
          level: 3
        }
      const map = new kakao.maps.Map(mapContainer, mapOption)
    }
  }
}
</script>

<style>
@import "/css/style.css";
</style>

 

 

 

 

4. Vue.js에서 카카오맵API 사용하기

- package.json

"eslintConfig": {
  "globals": {
    "kakao": false
  }
}

- KakaoLogin.vue

mounted() {
  if (window.kakao && window.kakao.maps) {
    this.initMap();
  } else {
    const script = document.createElement('script');
    /* global kakao */
    script.onload = () => kakao.maps.load(this.initMap);
    script.src =
      'http://dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=카카오API_KEY';
    document.head.appendChild(script);
  }
},
methods: {
  initMap() {
    const mapContainer = document.getElementById('map'), // 지도를 표시할 div
        mapOption = {
          center: new kakao.maps.LatLng(37.564343, 126.947613), // 지도의 중심좌표
          level: 3, // 지도의 확대 레벨
        };

    const map = new kakao.maps.Map(mapContainer, mapOption);

Vue.js에서 카카오맵API 사용하기

 

 

 

next.js

Script 컴포넌트에서 strategy="beforeInteractive" 속성을 사용하고 있기 때문입니다.

beforeInteractive 전략은 이 코드가 자바스크립트 코드를 로드하고 실행하기 전에 실행된다고 가정합니다.

그러나 Kakao 지도 SDK는 비동기로 로드되므로, SDK가 완전히 로드된 후에 지도를 초기화해야 합니다.

따라서 Script 컴포넌트의 strategy 속성을 변경하여 afterInteractive로 설정하거나,

next/script의 onLoad prop을 활용하여 스크립트 로드 후의 동작을 지정할 수 있습니다.

import React, { useState } from 'react'
import Script from 'next/script';
import { Map, MapMarker } from 'react-kakao-maps-sdk'


const NEXT_PUBLIC_KAKAO_APP_JS_KEY = '027752efeea8c0a8d04e4403ef6043f8'
const KAKAO_SDK_URL = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${NEXT_PUBLIC_KAKAO_APP_JS_KEY}&autoload=false`;
const kaKaoMap = () => {
  const [scriptLoaded, setScriptLoaded] = useState(false);

  const handleScriptLoad = () => {
    setScriptLoaded(true)
  }

  return (
    <>
      <Script
        type='text/javascript'
        src={KAKAO_SDK_URL}
        onLoad={handleScriptLoad}
      />
      {scriptLoaded && (
        <Map
          center={{ lat: 33.450701, lng: 126.570667 }}
          style={{ width: '500px', height: '500px' }}
          level={3}>
          <MapMarker position={{ lat: 33.450701, lng: 126.570667 }}>
            <div style={{ color: "#000" }}>Hello World!</div>
          </MapMarker>
        </Map>
      )}
    </>
  )
}

export default kaKaoMap;

느린 개발자

2가지 방법이 있는데, 그냥 Rest Api 가 나은것같다...

• REST API 
• react-kakao-login