티스토리 API를 활용한 글작성(개발편)

참조한 문서.

티스토리 공식 API문서 가이드1
https://tistory.github.io/document-tistory-apis/

API 발급 페이지
https://www.tistory.com/guide/api/manage/register

과거 국내 상용서비스 API 연동을 했었는데 이때도 가이드 문서대로 따라했는데 되지 않아 되지 않는 이유를 메일로 보냈더니 API 제공업체에서 키값을 누락시켰던 경험이 있다.
그리고 문서가 2개가 제공 되었었는데 현재 API와 차이점이 꽤나 있어 애먹었던 기억이 있다.
물어볼 사람도 없고..

우선 페이지를 딱 열었을때 느낌은 국내 서비스 업체 답지 않게 API가 어느정도 되어있다는 느낌이였다.

API의 형태는 가지고 있는
발급받은 키값을 활용해 설정한 특정페이지에서 요청을 하고,

티스토리 계정으로 로그인을 하면 토큰이 발행되고 해당 토큰값이 콜백페이지에 리턴된다.
그리고 그 토큰값을 활용해 글 작성, 이미지 업로드 등에 접근할 수 있다.

개발시 난항을 겪었던 문제.

개인적으로 버튼 하나로 모든것을 해결하는것을 좋아한다.
API 특성상 토큰값을 가지고 있어야하고, 토큰 인증제한시간이 얼마나 되는지는 정확히 안나와있지만 구글링 결과 대략적으로 1시간이라 한다.

그럼 글 쓰는 도중, 수정 작업 도중 토큰 값이 날아간다면 상당히 귀찮아지기에 매 요청시마다 토큰값을 재 발급받거나, 토큰값이 유효하지 않다면
다시 발급을 받아야 한다.
근데 발급 받는 경우 위의 이미지처럼 해당 창을 봐야하고, 브라우저에서 자동로그인이 되어있지 않다면 로그인 해야한다.
즉 토큰값을 받으려면 API에서 제공받은 클라이언트키값, 시크릿값을 제외하고 요청한 브라우저에서 티스토리 계정에 로그인까지 해야한다는 것이다.

한마디로 버튼 하나로 토큰값을 발급 받으려면 이 티스토리 로그인과정까지 자동화해야한다는것이다.
문제는 이걸 하기 번거롭다는것이다.
로그인 과정중에 티스토리 고유계정의 경우 감쳐줘있는 히든값 fp이 있으며, 카카오의 경우 또 다른 Auth 로그인 인증 과정이기에 단순히 폼값을 전송 받고 로그인 권한에 관한 세션이나 토큰, 키값을 얻어내는 과정이 아니다.
이러한 것들은 관련 API문서나 공개되어있지 않으면 해결하기가 매우 어렵다.
파이썬 세레니움으로 자바스크립트 실행과정까지 모두 지켜본 후 마치 사용자가 입력하듯 할수도 있지만 이것 또한 매우 번거롭다.

그래서 결국 어느정도 타협을 보았는데,

상단에 API로그인이라는 간단한 버튼과 함꼐 팝업으로 에디터 작성 페이지에서 페이지 새로고침없이 토큰값을 계속 갱신할 수 있게 해두었다.

티스토리 API연동

API문서야 잘 안내가 되있다지만 실제로 연동하는 프로그램을 개발하는것은 상당히 귀찮다.
개발 과정 하나하나 정상 작동되는지 확인해봐야하며, 정상 동작되더라도 또 어느 상황에서는 오동작을 일으키기때문에 충분한 테스트가 필요하다.

그래서 혹시 미리 개발된것들이 있을까 검색해보았는데
두개가 깃헙에 공개되어있다.

Nodejs
https://github.com/ryan0822/tistory-api

php
https://github.com/yks118/Tistory-api-php

하나는 nodejs 하나는 php
php쪽이 좀 더 직관적이고, 소스가 보기 편한것 같아 php쪽으로 선택했다.

단순히 글 작성페이지이고 배포 목적이 없으니, 단순히 웹페이지 하나에 php를 하여서 백앤드와 프론트앤드를 나눌 필요는 없었지만,
vue, typescript에 익숙해지고자 괜히 프론트앤드는 vue, typescript를 선택한것은 글쓴이의 오기이다.
사실 vue3로 하려했으나 toast ui editor가 아직 vue3를 지원하지 않아 vue2로 개발했으니 의미가 반절 퇴색되기도 했다.

알고보니 적당히 개판인 API문서

php문서를 보니 개발자분께서 주석처리도 잘 해놓았고 소스도 이쁘게 잘 개발이 되어있었다.
API문서와 비교했을때 모든 부분을 다 개발되어있기도 했고(어차피 글쓰기만 사용할거라 다른부분은 필요 없었지만)

문제가 크게 2가지 있었는데,
하나는 주소를 글제목으로 사용시.
키는 과정도 직접 slogan이라는 값으로 전달해줘야했다는것이다.
일반적으로 글의 제목은 자유롭게 특수문자 및 공백이 들어가지만 주소의 경우 해당 부분이 들어가면 여러가지 귀찮아지는 점이 많기에
공백은 하이픈으로, 특수문자는 제거하는형식으로 주소에서는 즉 의미전달에 핵심적으로 필요한 한글이나 영어 부분만 쓰여지게 된다.
보통 이런것은 자동으로 처리해주기 마련인데.. 처리가 되어있지 않았다.

그리고 활용하려는 api php소스에서도.
그래서 이 부분을 별도로 개발해야했고,

뭐 이런 부분이야 오픈소스도 많고 참조할 부분도 많기에 어렵지 않지만
가장 큰 문제는 바로 이미지였다

이미지 업로드 문제

아래의 문서를 보자.

파일 첨부 API

POST https://www.tistory.com/apis/post/attach?access_token={access-token}&blogName={blog-name}

[uploadedfile]

기본 매개변수를 제외한 매개변수는 다음과 같습니다.

• blogName: Blog Name 입니다.
• uploadedfile: 업로드할 파일 (multipart/form-data)

응답

• url: 업로드한 파일의 url
• replacer: 업로드한 파일의 치환자

응답 예

{
    "tistory":{
    "status":"200",
    "url":"https://t1.daumcdn.net/cfile/tistory/1328CE504DB79F5932",
    "replacer":"%5b%23%23_1N%7ccfile6.uf%401328CE504DB79F5932B13F%7cwidth%3d\"500\"+height%3d\"300\"%7c_%23%23%5d"
    }
}

로 되어있는데
문제는 이렇게 업로드해서 리턴값을 받은 url로 그대로 글을 작성하면

이런식으로 이미지가 제대로 뜨지 않는다.

아 그래서 리플레이서라는 것을 준거구나. 이해했다.

티스토리 에디터에서 이미지를 업로드하고 html 태그를 보면 일반적인 이미지태그가 아닌 티스토리에서 사용하는 특정한 문법에 의한 처리가 되어있는것을 확인할 수 있다.

즉 이미지 업로드시 replacer로 업로드하게 되면 알아서 변환해주는구나 싶어서 해당 값을 사용해보았다.

아 열받는다 열받아.

심지어 기존 작성한 글을 불러왔을때 이미지가 포함된 글이라면 제대로 표시가 안된다.
이럴떈 그냥 하나하나 분석해서 원인이 무엇이고 어떤식으로 해결해야하는지 찾아봐야한다.
리턴값이 제대로 돌아오는것으로 보아 이미지는 업로드가 제대로 되는것으로 볼 수 있다.

우선 티스토리 에디터로 작성했을때를 보았다.
티스토리 에디터에서 HTML 태그로 해당 부분을 보니

##Image|kage@OAQVY/btqQ0P7Bin0/o8fKybljBCE6iINHRMEl01/img.gif|alignCenter|data-origin-width="0" data-origin-height="0" data-ke-mobilestyle="widthContent"|백코트 바이얼레이션||##

으로 되어있다.
위의 replacer 리턴값과 엇비슷하면서도 비슷하지 않다.
아마 티스토리가 API를 만들고 기존 에디터에서 새 에디터로 업그레이드를 한적이 있는데,
이때 에디터내의 문법이 바뀌었지만, api는 수정하지 않았던듯 하다.
다른 게시글과도 비교해보았는데 img.png 가장 전 부분인 0lPg37jFO4RTDJrlClAJ30 부분은 url 리턴값 마지막 부분과 동일하지만 kage@ 이후의 값이 다르고 리턴값에선 알 수 없는 값이다.
그럼 실제 작성된 이미지의 url은 어디일까. 작성된글에서 url을 처다보았다.

<img src="https://blog.kakaocdn.net/dn/DKxGl/btqQKuj9JwX/b0ap7CZmYPYK0XMMn41xj0/img.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&amp;fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FDKxGl%2FbtqQKuj9JwX%2Fb0ap7CZmYPYK0XMMn41xj0%2Fimg.png" data-origin-width="0" data-origin-height="0" data-ke-mobilestyle="widthContent">`

로 되어있다.
주소를 보니 카카오와 합병하면서 카카오 cdn서버를 활용하는듯 하다.
값을 보면 일치하는 부분들이 보인다.

아 이미지 업로드 주소는 저렇구나하는건 알 수 있는데 문제는 내가 받는 리턴값에서 저 부분의 값을 전부 다 받아내지 못하니 url을 제대로 알수 없다는 점이다.

아무래도 에디터 개편전의 주소를 리턴해주는 듯 하고, 시스템을 바꿨더라도 전에 작성했던 글은 제대로 보여야 하는 것이 서비스의 기본이다.
아마도 에디터 개편전의 작성글을 보면 제대로 된 url을 확인할 수 있지 않을까 해서
개설이 오래된 블로그들을 찾아보았다.

<img src="https://t1.daumcdn.net/cfile/tistory/27588E3951AB2D0923">

보니 이런식으로 이미지 태그가 작성되어있다.
맨 뒤의 암호화된 이미지 파일명의 형식이 일치하는듯하다.
하지만 앞부분의 주소만 바꾸었더니 제대로 되지 않는다.

그래서 또 한참을 고심하면서 구글링을 해보니
돌려받은 키값의 뒷자리4개를 제거해주면 된다고 한다.
그리고 ?original을 넣으면 원본 이미지 링크가 걸린다고 한다.

해보니 드디어 정상적으로 작동된다.

이미지가 업로드 되고 정상적으로 보여진다.

역시나 국내 API를 개발하면서 느끼는 점은 똑같다.
과거 상용서비스 API를 연동했을때도 그렇고.
API문서는 명확하고 무언가 바뀌면 바뀌었다고 명확하게 업데이트 해주었으면 한다는점이다.

개발자가 일일이 바뀐 부분 찾아가면서 되는지 안되는지 디버깅하는건 너무 어렵고 막연하다.