카카오 API

김파란·2024년 7월 28일

목록 보기

1/2

1. Kakao Develpoers

kakao develpoers에 애플리케이션만 등록해놓으면 간편로그인, 지도, 카카오 메시지까지 가능한 걸로 보인다
플랫폼에 도메인 등록하고, 앱 키 등을 활용해 내 서비스에서 사용하면 된다
https://developers.kakao.com/

2. 간편로그인

카카오 로그인을 통해 Redirect URI를 등록한다
사업자로 등록하지 않으면 닉네임, 프로필 사진밖에 못쓴다

#kakao registration
spring.security.oauth2.client.registration.kakao.client-name=kakao
spring.security.oauth2.client.registration.kakao.client-id=앱 키 REST API 키
spring.security.oauth2.client.registration.kakao.client-secret=카카오 로그인에 있는 보안 코드
spring.security.oauth2.client.registration.kakao.redirect-uri=http://localhost:8081/login/oauth2/code/kakao
spring.security.oauth2.client.registration.kakao.authorization-grant-type=authorization_code
spring.security.oauth2.client.registration.kakao.client-authentication-method=client_secret_post
spring.security.oauth2.client.registration.kakao.scope=profile_nickname

#kakao provider
spring.security.oauth2.client.provider.kakao.authorization-uri=https://kauth.kakao.com/oauth/authorize
spring.security.oauth2.client.provider.kakao.token-uri=https://kauth.kakao.com/oauth/token
spring.security.oauth2.client.provider.kakao.user-info-uri=https://kapi.kakao.com/v2/user/me
spring.security.oauth2.client.provider.kakao.user-name-attribute=id

3. 지도 API

1). 지도 API

지도로만 사용가능한 API, 지도간의 이동이라던지, 좌표를 통한 지도 마커표시 밖에 없다
지도안에서의 기능밖에 없다
하지만 기본 API로써 이걸 통해서 검색도 가능하게 만든다던지 할 수 있다
좌표도 JS를 활용한 것이기 때문에 다루기는 쉽지않다
https://apis.map.kakao.com/web/guide/

2). 검색 API

검색만 가능한 API
이 검색 API와 지도 API를 통해 서로 연동하면서 검색한 좌표가 지도에 나타나게 할 수 있다
https://postcode.map.daum.net/guide#usage

<html xmlns:sec="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
    <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트 앱 키"></script>

</head>
<body>

<form th:action="@{/signup}" method="post">
    <input type="text" id="sample5_zipcode" placeholder="우편번호" name="zipcode">
    <input type="button" onclick="sample5_execDaumPostcode()" value="우편번호 찾기"><br>
    <input type="text" id="sample5_address" placeholder="주소" name="address"> <br>
    <input type="text"id="sample5_detailAddress"  placeholder="상세주소" name="detailAddress">
    <input type="submit" value="제출">

</form>

<div id="map" style="width:300px;height:300px;margin-top:10px;display:none"></div>


<script>
    var mapContainer = document.getElementById('map'), // 지도를 표시할 div
        mapOption = {
            center: new daum.maps.LatLng(37.537187, 127.005476), // 지도의 중심좌표
            level: 5 // 지도의 확대 레벨
        };

    //지도를 미리 생성
    var map = new daum.maps.Map(mapContainer, mapOption);
    //주소-좌표 변환 객체를 생성
    var geocoder = new daum.maps.services.Geocoder();
    //마커를 미리 생성
    var marker = new daum.maps.Marker({
        position: new daum.maps.LatLng(37.537187, 127.005476),
        map: map
    });


    function sample5_execDaumPostcode() {
        new daum.Postcode({
            oncomplete: function(data) {
                var zipcode = data.zonecode; // 우편번호
                var address = data.address;

                // 주소 정보를 해당 필드에 넣는다.
                document.getElementById("sample5_zipcode").value = zipcode;
                document.getElementById("sample5_address").value = address;
                // 주소로 상세 정보를 검색
                geocoder.addressSearch(data.address, function(results, status) {
                    // 정상적으로 검색이 완료됐으면
                    if (status === daum.maps.services.Status.OK) {

                        var result = results[0]; //첫번째 결과의 값을 활용

                        // 해당 주소에 대한 좌표를 받아서
                        var coords = new daum.maps.LatLng(result.y, result.x);
                        // 지도를 보여준다.
                        mapContainer.style.display = "block";
                        map.relayout();
                        // 지도 중심을 변경한다.
                        map.setCenter(coords);
                        // 마커를 결과값으로 받은 위치로 옮긴다.
                        marker.setPosition(coords)
                    }
                });
            }
        }).open();
    }
</script>
</body>
</html>

김파란

다음 포스트

카카오 API

API

1. Kakao Develpoers

2. 간편로그인

3. 지도 API

1). 지도 API

2). 검색 API

스프링 결제

0개의 댓글