본문 바로가기
업무 기록/API

카카오 API 를 통한 API 개발 및 웹 단 출력

by code2772 2023. 11. 28.

[ 목차 ]

    728x90
    반응형

    <들어가며>

    이번에는 카카오 API 를 통해 내가 만든 프로그램에서 등록한 내용을 카카오에 저장 후 웹단에 헤당 내용을 뿌려주는 예제이다.

    이를 사용하기 위해서는 먼저 허브파트너로 허용된 IP로 접근이 가능해야 해볼 수 있는 예제이다. Open API 와는 다른 내용이다. 그러므로 자세한 URL이나 코드 변수는 많이 변경되고 생략된 내용을 연습삼아 만들어본 관련없는 내용이다.

    많이 생략된 내용이지만 순전히 기억을 위해 작성을 하였다. 자세한 설명은 차 후 해보겠다. 

    먼저 API 규격서를 보고  postman을 이용해 해당 값이 잘 나오는지 확인을 하였다.

    <HTML>

    <tr>
    	<th scope="row" style="vertical-align : middle;">차단정보</th>
    	<td style="vertical-align : middle;"><label for="blockinfo"></label></td>
    </tr>


    웹단에 출력할 내용을 blockinfo로 정의하였다.

    <JS>

    window.fncChannelInfo = function(data) {
    	
        $("#tagToken").empty();  
    
        $.ajax({
    		url: "/KakaoDetailCategory",
    		type: "POST",
    		dataType : 'json',
    		data: {
    			_csrf: csrf,
    			send_key: data.send_key
    					.....
    					(생략)
    					.....			
    	 })
    	 .done(function(result){
                //console.log("result: ", result);
    			if(result.code == "200") {
                    popup_open('.kakao_channel_detail_popup');
    				
                    var status = "";
    				if(result.data.status == " ") {
    					.....
    					(생략)
    					.....
    				$("label[for='blockinfo']").text(result.data.blockinfo);
    
    
    			}else{
    				$("label[for='blockinfo']").text("");
    
    			    $.alert(result.message, {title: '알림'});
    			}  
    			
    	  }


    ajax 를 통해 KakaoDetailCategory에 send_key를 보낸다. 이 send_key에 해당하는 정보들 중 결과가 정상일 경우 카카오에 저장되어 있는 blockinfo의 값을 웹단에 출력해주는 것이다.

    function(req, res, next) {
    var send_key = (req.body.send_key == null) ? "": req.body.send_key;
    
    request({
    uri:`${common.serverKakaoUrl}/send?send_key=${send_key}`, 
    method: 'GET',
    timeout: time_out,
    headers: {
    'Authorization': `Bearer ${req.session.access_token}`,
    'Content-Type': 'application/json',
    },
    json:true
    },function(error, response, result) { 
    
    if(error){//throw error;
    	console.log(error);
    	res.json({code: "500", message: "조회에 실패했습니다."});
    }else{
    	if(result.code == "200") {
    		if(result.data.categoryCode) {
    			req.body.send_info = result.data;
    			next();
    		}else{
    			result.data.categoryName = "";
    			res.json({code: result.code, message: result.message, data: result.data});
    		}
    	}else{ 
    		res.json({code: result.code, message: result.message, data: ""});
    	}
    }
    }
    );
    },


    이제 KakaoDetailCategory에 보낸 내용을 규격에 맞게 자체 API를 개발하는 부분이다. 이는 Spring Boot로 작업하였다.

     


    <SPRING API 작업>

    @RequestMapping(value = "${kakao.proxy.uri}")
    public ResponseEntity<byte[]> proxy(HttpServletRequest request, HttpServletResponse response,
    			 @RequestBody(required = false) byte[] body)
    throws IOException, URISyntaxException {
    
    	String userId = ((UserDetails) SecurityContextHolder.getContext().
    		getAuthentication().getPrincipal()).getUsername();
    	
    	String apiAuthKey = authProxy.selectApiAuthKey(userId);
    	
    					.....
    					(생략)
    					.....
    
    String originReqURL = request.getRequestURI().replaceAll("^/" + uriPrefix, "");
    String originQueryString = request.getQueryString();
    String urlStr = centerApiHost +
    	originReqURL + (!StringUtils.hasText(originQueryString) ? "" : "?"+originQueryString);
    
    					.....
    					(생략)
    					.....
    	URI url = new URI(urlStr);
    	String originMethod = request.getMethod();
    	HttpMethod method = HttpMethod.valueOf(originMethod.toUpperCase());
    	Enumeration<String> headerNames = request.getHeaderNames();
    	MultiValueMap<String, String> headers = new LinkedMultiValueMap<>();
    	while(headerNames.hasMoreElements()) {
    		String headerName = headerNames.nextElement();
    		String headerValue = request.getHeader(headerName);
    
    		headers.add(headerName, headerValue);
    	} 
    	
    	headers.add("ApiKey", apiAuthKey );
    	
    	HttpEntity<byte[]> httpEntity = new HttpEntity<>(body, headers);
    	return restTemplate.exchange(url, method, httpEntity, byte[].class);
    }

     


     REST 컨트롤러의 메서드로 해당 메서드는 프록시로 전달하여 외부 API에 접근을 하였다. authProxy를 통해 해당 사용자의 apiAuthKey를 가져온다. 이 apiAuthKey는 외부 API에 대한 인증을 위한 키로 사용된다.
    RL 정보를 구성한다. originReqURL과 originQueryString을 기반으로 외부 API의 URL을 생성하고 생성된 URL 기반의 객체 생성한다. 요청의 헤더 정보를 가져와서 headers 객체에 apiAuthKey 추가 해서 URL, HTTP 메서드, 헤더, 요청 바디를 기반으로 HttpEntity를 생성 후 restTemplate을 사용하여 외부 API에 대한 요청을 보내고, 응답을 ResponseEntity<byte[]> 형식으로 반환한다. 


    이를 통해 API 를 통해 외부 API 즉 카카오에 저장된 내용을 웹에 뿌려준다. 생략되거나 빠진 부분이 많지만 내가 기억을 잘 못하는 부분 위주로 기록을 해둔 내용이다.

    반응형