네이버 short url로 통신해 보기

greenTea·2023년 5월 27일

🥳네이버 개발자 센터에 가면 API 서비스 중에 단축URL 서비스가 있습니다. 이를 활용하여 단축 URL 서비스를 만들어보겠습니다.

사전 준비

먼저 네이버 개발자 센터에서 어플리케이션을 등록하고 클라이언트 ID와 SECRET값을 가져와야 합니다.

요청 API

🫠요청을 할 주소는 [https://openapi.naver.com/v1/util/shorturl](https://openapi.naver.com/v1/util/shorturl) 이며 GET 또는 POST방식으로 보내면 됩니다. 아래는 HTTP Request입니다.

> POST /v1/util/shorturl HTTP/1.1
> Host: openapi.naver.com
> User-Agent: curl/7.49.1
> Accept: */*
> Content-Type: application/x-www-form-urlencoded; charset=UTF-8
> X-Naver-Client-Id: {애플리케이션 등록 시 발급받은 클라이언트 아이디 값}
> X-Naver-Client-Secret: {애플리케이션 등록 시 발급받은 클라이언트 시크릿 값}
> Content-Length: 42

헤더에 X-Naver-Client-Id와 X-Naver-Client-Secret을 넣어주고 여기에 해당 아이다와 시크릿 값을 넣어줍니다. 이때 단축시킬 url은 파라미터로 넣어주면 됩니다.

응답 API

아래는 응답 API입니다.

< HTTP/1.1 200 OK
< Server: nginx
< Date: Wed, 28 Sep 2016 08:05:41 GMT
< Content-Type: application/json;charset=utf-8
< Content-Length: 139
< Connection: keep-alive
< Keep-Alive: timeout=5
< Vary: Accept-Encoding
<
* Connection #0 to host openapi.naver.com left intact
{
    "message":"ok",
    "result": {
        "hash":"GyvykVAu",
        "url":"https://me2.do/GyvykVAu",
        "orgUrl":"http://d2.naver.com/helloworld/4874130"
    }
    ,"code":"200"
}

코드

😎이제 실제로 코드를 작성해보겠습니다. 방법은 restTemplate을 이용하여 작성 할 것입니다.

먼저 컨트롤러를 생성하겠습니다.

컨트롤러

@RequiredArgsConstructor
@Controller
public class MyController {

    private final MyService service;

    @GetMapping("/url")
    public String url() {
        return "url";
    }

    @ResponseBody
    @PostMapping("/url")
    public String url(String url) {
        return service.shortUrl(url);
    }
}

🫡/url 주소로 화면을 보여주고 요청을 받아서 처리할 것입니다. 이제 응답 dto와 서비스를 만들어 보겠습니다.

응답 DTO

@Data
@NoArgsConstructor
public class ResponseDto {
    private String message;
    private String code;
    private Result result;

    @Data
    static class Result {
        private String hash;
        private String url;
        private String orgUrl;
    }
}

응답 API에 맞춰서 DTO를 생성해주었습니다.

서비스

@Slf4j
@RequiredArgsConstructor
@Service
public class MyService {

    @Value("${my.naver.client-id}")
    private String clientId;

    @Value("${my.naver.client-secret}")
    private String clientSecret;

    private final RestTemplate restTemplate;

    public String shortUrl(String originalUrl) {

        URI url = UriComponentsBuilder.fromUriString("https://openapi.naver.com")
                .path("/v1/util/shorturl")
                .encode().build().toUri();

        RequestEntity<String> requestEntity = RequestEntity
                .post(url)
                .contentType(MediaType.APPLICATION_FORM_URLENCODED)
                .header("X-Naver-Client-Id", clientId)
                .header("X-Naver-Client-Secret", clientSecret)
                .body("url=" + originalUrl);

        log.info("originalUrl ={}", originalUrl);

        ResponseEntity<ResponseDto> response = restTemplate.exchange(requestEntity, ResponseDto.class);
        log.info("response = {}", response);
        log.info("shortUrl ={}", response.getBody().getResult().getUrl());

        if (response.getStatusCode() == HttpStatus.OK) {
            ResponseDto body = response.getBody();

            return body.getResult().getUrl();
        } else {
            throw new RuntimeException("oh my god");
        }

    }

}

🧐코드의 대해 설명하자면 Uri는 만드는 방법이 다양하지만 여기서는 UriComponentsBuilder를 통해서 만들어 주었습니다. 이후 RequestEntity를 통해 post요청을 보낼 객체를 만들어주고 여기에 클라이언트 ID와 시크릿값을 넣어주었습니다. 또한 post를 통해 보낼 것이므로 body에 값을 담아 보내주었는데 이때 형식은 “url=”형태로 넣어주었습니다.

🥳이후 restTemplate을 통해 요청을 보내주게 되면 ResponseEntity를 통해 값이 들어오게 됩니다. body에는 저희가 원하는 값이 들어있으므로 getbody를 통해서 값을 꺼내주면 단축 값을 알 수 있게 됩니다.

🫤if문은 statusCode를 확인하는 코드로 잘못된 경우 RuntimeException을 발생시키게 하였습니다.

view

view는 아주 간단하게 아래와 같이 작성하였습니다.

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <form name="myform" action="/url" method="post">
        <label for="url">url</label>
        <input name="url" id="url" type="text" placeholder="url을 입력하시오">
        <span></span>
        <button type="submit">제출</button>
    </form>
    <script src="/my.js">
    </script>
</body>

</html>

javascript

let myform = document.myform;
myform.addEventListener('submit', sendUrl);

function sendUrl(event) {

    event.preventDefault();

    let urlInput = document.querySelector("#url");
    let span = document.querySelector("span");
    let value = urlInput.value;

    const regex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#()?&//=]*)/;
    if (value.length < 14) {
        span.textContent = "너무짧습니다."
        return;
    } else if (!regex.test(value)) {
        span.textContent = "이메일 형식이 아닙니다. 다시 입력하시오!!";
        return;
    }

    let formData = new FormData();
    formData.append("url", value);

    fetch('http://localhost:8080/url', {
        method: "POST",
        // headers: {"Content-type": "application/json"},
        body: formData,
    }).then((result)=>{
        return result.text();
    })
        .then((result) => {
            console.log(result);
            span.textContent = result;
        }
    ).catch((e) =>
        console.log(e)
    );

}