Developer Note/국비과정 수업내용 정리&저장

24년 11월 26일

DH_PARK 2024. 12. 5. 01:44

leafLet 마무리

어제 한 부분에서 오늘은 약간의 변경점이 있는데 , 특정 지역의 geojson 데이터를 받아와서

axios 를 사용해서 비동기로 특정 영역에 구역을 지정해주는 작업을 했다.

axios.get("/data/hangjeongdong.geojson")
     .then(resp=>{
        //console.log(resp);

        L.geoJSON(resp.data, {
            style: function (feature) {
                return {
                    color: 'blue',
                    fillColor: 'yellow',
                    fillOpacity: 0.5,
                    weight: 2
                };
            }
        }).bindPopup(function (layer) {
            return layer.feature.properties.description;
        }).addTo(map)

     })

기존 코드는 주석처리를 했다.

기존 코드는 동기방식이고 , 미리 위치 데이터를 함수안에 설정해놓았기 때문에 코드의 유연성이 떨어진다. 그래서 axios 를 사용해서 get 요청을 받을시에 특정 데이터를 서버에서 요청하기 때문에 쉽게 데이터를 바꿀 수 있어 코드 작성이 간편해진다.

이런식으로 특정 데이터에 있는 위치가 영역으로 구분이 된다.

 

카카오 맵 API

https://apis.map.kakao.com/web/sample/

카카오 맵 API 사이트.

카카오 맵API 를 활용해보기로 한다.

우선 API 를 사용하기 위해서는 키를 발급해야 하는데 카카오개발자센터에서

내 애플리케이션에서 애플리케이션을 하나 만들고 자바스크립트 앱키를 자바스크립트 함수를 사용할 때 appkey 에 매핑해준다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>마커에 클릭 이벤트 등록하기</title>

</head>
<body>
<div id="map" style="width:100%;height:100vh;"></div>
<p><em>마커를 클릭해주세요!</em></p>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=337a12732b24fa97055d9e02f1204788"></script>
<script>
    var mapContainer = document.getElementById('map'), // 지도를 표시할 div
        mapOption = {
            center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
            level: 3 // 지도의 확대 레벨
        };

    var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

    // 마커를 표시할 위치입니다
    var position =  new kakao.maps.LatLng(33.450701, 126.570667);

    // 마커를 생성합니다
    var marker = new kakao.maps.Marker({
      position: position, //특정 포지션을 기준으로 마커를 생성한다.
      clickable: true // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
    });

    // 아래 코드는 위의 마커를 생성하는 코드에서 clickable: true 와 같이
    // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
    // marker.setClickable(true);

    // 마커를 지도에 표시합니다.
    marker.setMap(map);

    // 마커를 클릭했을 때 마커 위에 표시할 인포윈도우를 생성합니다
    var iwContent = '<div style="padding:5px;">Hello World!</div>', // 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
        iwRemoveable = true; // removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다

    // 인포윈도우를 생성합니다
    var infowindow = new kakao.maps.InfoWindow({  
        content : iwContent,
        removable : iwRemoveable
    });

    // 마커에 클릭이벤트를 등록합니다
    kakao.maps.event.addListener(marker, 'mouseover', function() {
          // 마커 위에 인포윈도우를 표시합니다
          infowindow.open(map, marker);
    });
</script>
</body>
</html>

카카오 맵 소스코드.

카카오 로그인 API

오전 이후부터는 내내 로그인 API 에 대한 사용법을 배웠다.

어려웠음..

우선 API 를 사용하기 위해서는 키를 발급해야 하는데 카카오개발자센터에서

내 애플리케이션 탭을 들어가면 내가 사용할 계정 같은 나의 애플리케이션 목록이 나온다.

테스트용으로 사용하는 것이기 때문에 테스트 앱 생성을 해서 테스트 앱으로 수업을 진행하도록 한다.

설정

설정을 해야 하는 부분이 몇 군데 있는데 , 카카오 로그인 기능을 사용해보기 위해 카카오 로그인 탭에서 카카오 로그인을 활성 옵션으로 바꿔준다.

그리고 이 탭 가장 아래에 Redirect URI가 있는데 이 부분은 로그인을 했을 때 받아지는 인가 코드를 토큰 정보로 변환해서 사용해야 로그인이 되기 때문에 이 부분의 서블릿으로 매핑을 해준다.

내 경우에는

http://localhost:8090/kakao/callback

callback 이라는 이름의 함수로 매핑을 해주도록 했다. 이 함수가 실행이 되면 인가코드를 받아와서

(access_token=K4IWAeW7ksEZlH78CvzRhlG8EBJH21HmAAAAAQo8JJsAAAGTaNrNZn6MVWkGe_Nf, token_type=bearer, refresh_token=nYNSkwezEN2YiTeLQn1BTI_2qEi0enbYAAAAAgo8JJsAAAGTaNrNYn6MVWkGe_Nf, expires_in=21599, scope=account_email profile_image talk_message profile_nickname friends, refresh_token_expires_in=5183999),[Date:"Tue, 26 Nov 2024 14:23:10 GMT", Content-Type:"application/json;charset=utf-8", Transfer-Encoding:"chunked", Connection:"keep-alive", Cache-Control:"no-cache, no-store, max-age=0, must-revalidate", Pragma:"no-cache", Expires:"0", X-XSS-Protection:"1; mode=block", X-Frame-Options:"DENY", X-Content-Type-Options:"nosniff", Kakao:"Talk", Access-Control-Allow-Origin:"*", Access-Control-Allow-Methods:"GET, POST, OPTIONS", Access-Control-Allow-Headers:"Authorization, KA, Origin, X-Requested-With, Content-Type, Accept"]>

이런 기다란 길이의 토큰값 정보를 얻게 된다.

그리고 이 토큰정보를 KakaoResponse 객체에 매핑을 해주게 되고 메인페이지로 리다이렉팅 한다.

그리고 로그인을 하기 위해서는

사용을 하기 위해서는 카카오개발자센터에서 앱 키를 발급받아서 사용해야 한다.

테스트앱을 만들어서 사용할 수 있는데 지금 테스트 앱으로 수업듣는중

그리고 로그인을 했을 때 리다이렉팅이 되는 URI 를 지정해주기 위해 애플리케이션 설정에서 플랫폼 탭의 Web 사이트 도메인을 설정해준다.

설정은 이렇게 하면 된다.

  1. 나의 애플리케이션 만들기 (테스트 케이스로 추가)
  2. 카카오 로그인 탭에서 활성화 설정 on으로 체인지 (로그인이 성공하면 카카오 측에서 리다이렉팅을 해줄 URL을 지정)
    1. Redirect URI 추가. (현재 자신이 사용할 URI 주소)
    2. 내 경우는 8093포트를 써서
    3. http://localhost:8093/login/oauth2/code/kakao ,
    4. **http://localhost:8093/kakao/callback**
  3. 앱 권한 신청 탭에서 비즈 앱 신청 클릭.
    1. 이걸 신청해야 동의항목을 추가로 신청할 수 있게 돼있는것 같다.
  4. 웹 사이트 도메인 주소를 설정해준다.
    1. 제일 기본 주소인 http://localhost:8093 을 설정

로그인 기능 구현

        String REDIRECT_URI = "";
    String CLIENT_ID = "7d9934651d7f56d6d199b648ad4852c6";
    String RESPONSE_TYPE  ="code";
    
    @GetMapping("/login")
    public String getCode(){
        log.info("GET /kakao/getCode...");
        return "redirect:<https://kauth.kakao.com/oauth/authorize?client_id="+CLIENT_ID+"&redirect_uri="+REDIRECT_URI+"&response_type=>"+RESPONSE_TYPE;
    }

컨트롤러에서 우선 리디렉팅 URI , 권한을 얻기 위해 사용하는 앱키 , response_type 이건

카카오 API 문서에 나와있어서 일단 써놓음 .

login 컨트롤러 요청을 하게 되면 카카오에서 인가코드를 발급해준다.

하지만 인가코드만으로는 로그인이 완료되지 않기 때문에 토큰을 발급한 후에 받아야 카카오 로그인을 정상적으로 마칠 수 있게 된다.

  @GetMapping("/callback")
    public void callback(@RequestParam("code") String code){
        log.info("GET /kakao/callback..." + code);

        String url = "<https://kauth.kakao.com/oauth/token>";

        //HTTP 요청 헤더
        HttpHeaders headers = new HttpHeaders();
        headers.add("Content-Type","application/x-www-form-urlencoded;charset=utf-8");
        //HTTP 요청 파라미터
        MultiValueMap<string, string=""> params = new LinkedMultiValueMap<>();
        params.add("grant_type","authorization_code");
        params.add("client_id",CLIENT_ID);
        params.add("redirect_uri",REDIRECT_URI);
        params.add("code",code);

        //HTTP 엔티티(헤더 + 파라미터)
        HttpEntity< MultiValueMap<string, string=""> > entity = new HttpEntity<>(params, headers);

        //HTTP 요청 후 응답받기
        RestTemplate restTemplate = new RestTemplate();
        ResponseEntity response = restTemplate.exchange(url, HttpMethod.POST, entity, String.class);
        System.out.println(response.getBody());
//        this.kakaoResponse = response.getBody();
//        return "redirect:/kakao/main";
    }
</string,></string,>

login 요청을 하면 이 쪽으로 리다이렉팅이 되면서 토큰발급을 요청하게 되는데

파라미터에 필요한 정보들을 모아 카카오에 요청을 하면

(access_token=K4IWAeW7ksEZlH78CvzRhlG8EBJH21HmAAAAAQo8JJsAAAGTaNrNZn6MVWkGe_Nf, 
token_type=bearer, 
refresh_token=nYNSkwezEN2YiTeLQn1BTI_2qEi0enbYAAAAAgo8JJsAAAGTaNrNYn6MVWkGe_Nf,
expires_in=21599, 
scope=account_email profile_image talk_message profile_nickname friends, 
refresh_token_expires_in=5183999),[Date:"Tue, 26 Nov 2024 14:23:10 GMT",
Content-Type:"application/json;charset=utf-8", Transfer-Encoding:"chunked", Connection:"keep-alive", Cache-Control:"no-cache, no-store, max-age=0, must-revalidate", Pragma:"no-cache", Expires:"0", X-XSS-Protection:"1; mode=block", X-Frame-Options:"DENY", X-Content-Type-Options:"nosniff", Kakao:"Talk", Access-Control-Allow-Origin:"*", Access-Control-Allow-Methods:"GET, POST, OPTIONS", Access-Control-Allow-Headers:"Authorization, KA, Origin, X-Requested-With, Content-Type, Accept"]>

이런식의 토큰을 발급해준다.

이 토큰을 json to java 페이지로 가서 역직렬화를 해준다. (dto 변환)

일단 지금은 테스트만 해보는거기 때문에

    @Data
    private static class KakaoResponse{
        public String access_token;
        public String token_type;
        public String refresh_token;
        public int expires_in;
        public String scope;
        public int refresh_token_expires_in;
    }

이렇게 생성한 토큰 dto 정보를 넣어주고 위에 callback 컨트롤러에서 마지막부분에

ResponseEntity를 KakaoResponse타입으로 바꿔주고 요청에 response 정보를 전달해주면 로그인이 완료되게 된다.

근데 집에서 해보고 있는데 토큰 발급이 안됨.. 왜그럴까

로그아웃

카카오 로그아웃은 사용자의 액세스 토큰과 리프레시 토큰을 모두 만료시킨다.

  @GetMapping("/logout")
    @ResponseBody
    public void logout(){
        log.info("GET /kakao/logout");

        String url = "<https://kapi.kakao.com/v1/user/logout>";
        //HTTP 요청 헤더
        HttpHeaders headers = new HttpHeaders();
        headers.add("Authorization","Bearer "+kakaoResponse.getAccess_token());

        //HTTP 엔티티(헤더 + 파라미터)
        HttpEntity entity = new HttpEntity<>(headers);

        //HTTP 요청 후 응답받기
        RestTemplate restTemplate = new RestTemplate();
        ResponseEntity response = restTemplate.exchange(url,HttpMethod.POST,entity,String.class);
        System.out.println(response.getBody());

    }

웹에서 로그아웃을 요청하게 되면 필요한 파라미터인 액세스 토큰을 현재 존재하는

kakaoResponse에서 액세스 토큰을 받아온다.

카카오 API 문서를 보면 토큰값 외에 파라미터는 딱히 필요없기 때문에 이 정보만 담아 POST 방식으로 보내게 되면 로그아웃이 처리되게 된다.

구글링을 해보니 이런 방식외에도 다른 방식으로도 API 를 사용하는 방법이 굉장히 많았다.

하지만 살펴보면 일단은 이게 제일 깔끔하고 간단한 방법인것 같다.

API 가 나한테는 꽤나 어려운 부분이다. 쉽지않네..

저작자표시 비영리 변경금지

'Developer Note > 국비과정 수업내용 정리&저장' 카테고리의 다른 글

24년 11월 28일  (1) 2024.12.08
24년 11월 27일  (2) 2024.12.05
24년 11월 25일  (0) 2024.11.26
24년 11월 22일  (0) 2024.11.25
24년 11월 21일  (3) 2024.11.25

'Developer Note/국비과정 수업내용 정리&저장'의 다른글

  • 현재글24년 11월 26일

관련글

티스토리툴바