사용기 및 에러처리 기록

저번글에서 소개 · GitBook (tistory.github.io) 를 이용해서 code,access_token을 얻고 이 토큰을 이용해서 axios를 이용해서 get 방식으로 블로그 정보와 카테고리 정보를 얻어오는 방법을 작성했습니다.

이번 글에서는 토큰과 글 작성 · GitBook (tistory.github.io) 를 이용해서 post 방식으로 블로그 글 작성을 진행해 보도록 하겠습니다.

오픈 API 가이드 글작성에 필요한 파라미터들입니다. 

작성 테스트를 진행하던 중 무슨 파라미터인가 알기 가장 어려웠던게 category 파라미터였습니다. 몇 번 테스트 해본 결과

category 파라미터는 get방식에서 작업했던 카테고리 · GitBook (tistory.github.io)에서 얻어온 id값이었습니다. 

• blogName: Blog Name (필수) title: 글 제목 (필수) content: 글 내용 visibility: 발행상태 (0: 비공개 - 기본값, 1: 보호, 3: 발행) 
• category: 카테고리 아이디 (기본값: 0)

나머지는 특이사항이 없었던 듯하고 가이드의 설명을 보면서 파라미터 값을 변경하시고 테스트해보면 바로 확인이 가능했습니다.블로그 내용 작성 폼은 만들지 않고 바로 post 방식으로 진행하겠습니다.

category는 저번 글에서 얻어온 "1102530" 를 사용합니다.

가이드의 파라미터형을 axios에서 사용하기 편하도록 변경했습니다. 나열해서 기존 get방식 Url방식으로 사용하셔도 동자합니다. 메뉴는 공통부분을 통일해서 전역변수로 옮겼습니다. axios get과 데이터를 주고 받는 방식은 동일하고 axios.post 방식으로 바뀌었고 파라미터 유형이 많아져서, dict 방식으로 파라미터 전송방식을 변경했습니다.

추가코드

const menu = `<a href=/>홈</a>|<a href=/set_code>로컬에코드입력</a>
|<a href="/get/blog/info">블로그정보얻기</a>
|<a href="/apis/category/list">카테고리정보얻기</a>
|<a href="/apis/post/write">블로그작성</a>
`;

app.get('/apis/post/write', async (req, res) => {
  const loc = `https://www.tistory.com/apis/post/write`;

  const title = "Post 연동한 타이틀";
  const content = `본문/////${title}`;
  const tag = 'tag, javascript, 티스토리';

  const postData = {
    'access_token': access_token,
    'output': output,
    'blogName': "a3040",
    'title': title,
    'content': content,
    'visibility': 3, //visibility: 발행상태 (0: 비공개 - 기본값, 1: 보호, 3: 발행)
    'category': '1102530', //  카테고리 · GitBook (tistory.github.io)에서 얻어온 id값
    // 'published':published, published: 발행시간 (TIMESTAMP 이며 미래의 시간을 넣을 경우 예약. 기본값: 현재시간)
    // 'slogan':slogan, slogan: 문자 주소
    'tag': tag,
    // 'acceptComment':acceptComment, acceptComment: 댓글 허용 (0, 1 - 기본값)
    // 'password':password,acceptComment: 댓글 허용 (0, 1 - 기본값)
  }

  let view_html = `${menu}`;

  try {
    const awaitRes = await axios.post(loc, postData);
    console.log(awaitRes.data);

    const dataToString = JSON.stringify(awaitRes.data);
    view_html += `${dataToString}`;
  } catch (error) { console.error(error); }

  res.send(`${view_html}`);
});

실행화면 입니다. code획득 > access_token을 얻은 후에 나머지 작업들이 가능합니다. "블로그작성" 클릭

"블로그작성" 클릭 후 상황입니다.

api가이드에 나와었었던 것처럼 등록된 블로그 uri가 반환됩니다. 반환된 uri로 접속해봅니다.

방금 작성한 블로그가 잘 보입니다. 파라미터 매핑도 정확하게 되어있습니다.

이상으로 node에서 express를이용해서 tistory open api 사용에 대해서 마치도록 하겠습니다. python으로 되어 있는 예제가 많아서 javascript로 한번 작성해 보았습니다.

전체코드는 tistory_openapi/ex4 at master · a3040/tistory_openapi · GitHub를 참조하세요.

tistory openapi를 이용해서 code를 얻고 Access Token 발급 받는 것까지 진행했습니다. 이어서 access tokent을 이용해서 openapi에서 제공하는 블로그나 카테고리 정보를 얻거나 블로그에 글 작성, 댓글 작성등의 데이터 보내기를 수행할수 있습니다.
이번에는 데이터를 얻는 방법을 알아보도록 하겠습니다.

블로그 정보 · GitBook (tistory.github.io) 

를 이용해서 블로그 정보를 얻어보도록 하겠습니다. 

문서에 있는방법으로 데이터를 얻기위해서는 axios.get 방식을 사용했습니다. 그리고 페이지 이동을 위해 menu변수를 추가했습니다. 참고로 code와 access token을 얻은 후 /get/blog/info를 클랙해야 데이터를 얻어오는게 가능합니다.

const output='json';

app.get('/get/blog/info', async (req, res) => {
  const loc = `https://www.tistory.com/apis/blog/info?
  access_token=${access_token}
  &output=${output}`;

  let menu = `<a href=/>홈</a>|<a href=/set_code>로컬에코드입력</a>|<a href="/get/blog/info">블로그정보얻이</a>`;
  let view_html = `${menu}`;

  try{
    const awaitRes = await axios.get(loc);
    console.log( awaitRes.data );

    const dataToString = JSON.stringify( awaitRes.data );
    view_html += `${dataToString}`;
  }catch(error){console.error(error);}

  res.send(`${view_html}`);
});

app.get('/get_token', async (req, res) => {
  const tcode = req.query.code;
  code = tcode; //전역변수에 추가

  const loc = `https://www.tistory.com/oauth/access_token?
  client_id=${client_id}
  &client_secret=${client_secret}
  &redirect_uri=${redirect_uri}
  &code=${code}
  &grant_type=authorization_code`;

  let menu = `<a href=/>홈</a>|<a href=/set_code>로컬에코드입력</a>|<a href="/get/blog/info">블로그정보얻이</a>`;

  try{
    const awaitRes = await axios.get(loc);
    access_token = awaitRes.data.access_token;
  }catch(error){console.error(error);}

  const view_html = `${menu} ${access_token}`;
  res.send(`${view_html}`);
});

토큰을 얻은 상태의 실행결과입니다. 

토큰을 얻고 "블로그정보얻기"를 클릭한 상태입니다.

openapi사용 메뉴과 같은 정보가 조회됩니다.

바로 category 정보를 얻어보도록 하겠습니다.

카테고리 · GitBook (tistory.github.io) 

https://www.tistory.com/apis/category/list?
  access_token={access-token}
  &output={output-type}
  &blogName={blog-name}  <--- 블로그 정보에서 얻은 name 항목입니다

https://a3040.tistory.com/  이 주소의 경우 blogName = "a3040" 입니다.

app.get('/apis/category/list', async (req, res) => {
  const loc = `https://www.tistory.com/apis/category/list?access_token=${access_token}&output=${output}&blogName=a3040`;

  let menu = `<a href=/>홈</a>|<a href=/set_code>로컬에코드입력</a>|<a href="/get/blog/info">블로그정보얻기</a>|<a href="/apis/category/list">카테고리정보얻기</a>`; 
  let view_html = `${menu}`;

  try{
    const awaitRes = await axios.get(loc);
    console.log( awaitRes.data );

    const dataToString = JSON.stringify( awaitRes.data );
    view_html += `${dataToString}`; 
  }catch(error){console.error(error);}

  res.send(`${view_html}`);
});

데이터를 get으로 얻는 방식은 blog 정보 얻는 방식과 동일합니다. 수신후 처리방식도 동일합니다.블로그 글 관련, 댓글 관련 정보 등도 api에서 요구하는 변수를 더 추가하고 동일한 방법으로 얻을 수 있습니다. 카테고리얻기를 실행한 결과입니다.

tistory_openapi/ex3 at master · a3040/tistory_openapi · GitHub

다음 글에서는 axios의 post 방식을 통해 블로그에 글을 작성해보도록 하겠습니다

로컬에서 시작해서 tistory로그인을 완료하고 앱 사용 승인을 허용하게 되면 code를 응답해 줍니다.

그 이후 그 code를 갖고 access token을 발급 받은 후 그 토큰을 이용해 tistory api에 접근할수 있습니다.

1. 응답받은 코드를 현재 작업중이 프로젝트에 추가하기

2. 프로젝트에서 code를 이용해서 access token 발급 받기

1. 응답받은 코드를 현재 작업중이 프로젝트에 추가하기를 진행하기에 앞서 프로젝트에 nodemon 이라는 라이브러리를 추가 합니다. nodemon은 개발 단계에서 파일 변경을 감지하여 자동으로 서버를 재시작해주는 도구입니다.

터미널에서 > npm install nodemon -D

를 실행하고 나면 package.json에 개발상태에서 만 사용하는 의존성이 추가 됩니다. 그리고 scripts:{ 부분은 node에서 nodemon으로 변경합니다.  이후 터미널에서 > nodemon run dev를 실행한 상태에서 파일을 변경하면 변경파일이 자동으로 인식되어 갱신됩니다.

npm install 옵션 참고  노트 > npm cli 명령어 모음 > npm install (a3040.com) 

npm run dev 실행 상태입니다.

로그인 후 브라우저에 있는 code를 개발환경으로 입력받을수 있는 url을 생성합니다.

/set_code 위 이미지에서 code값을 입력받습니다.

프로젝트가 터미널에서 nodemon index.js로 실행되고 있다면 코드를 바꾸면 자동으로 갱신이 됩니다. 잘못된 경우 재시작

로컬에코드입력부분을 클릭합니다.

로그인 성공후 받은 브라우저저 주소창의 code https://a3040.tistory.com/?code= 8dcafd1b8dc851c7f821fa5d2afa1146967882d1ecb7758c0788e5e74441950d6acc8013&state=dummy

?이후 code=에서&state 사이가 code값입니다. 붉은색 값(code)를 코드입력후토큰얻기 input box에 붙여넣기 합니다.

2. 프로젝트에서 code를 이용해서 access token 발급 받기

이후 /get_token 페이지에서 code를 express 프로그램의 전역변수에 넣고, 그 값을 이용해서 accesstoken을 획득합니다.

/set_code에서 넘겨받은 값을 /get_token으로 넘긴후 이를 이용해 token을 획득합니다.

 &client_secret=${client_secret}   이 부분의 client_secret과 나머지는 App ID=> client_id, Secret Key, CallBack => redirect_url  입니다.

이미지 25라인의     console.log( awaitRes.data ); 결과가 하단 빨간 동그라미에 보입니다.

결과가 json으로 오기때문에 26라인에서 access_token을 전역변수에 추가했습니다.

이상으로

Authorization Code 방식 · GitBook (tistory.github.io)을 이용한 code 획득, local 개발환경으로 code통합 후 access toket획득까지 완료되었습니다. 몇줄 안되지만 코드는 하단 링크의 index.js에 있습니다.

tistory_openapi/ex2 at master · a3040/tistory_openapi (github.com)

tistory open api의 카테고리, 블로그 정보 얻기 등을 access_token을이용해서 진행해보겠습니다.

nodemon

이번 글에서는 저번글에서 만든 앱을 이용해 인증 요청을 하는 환경을 구성해보고 인증 요청을 수행해보겠습니다.

api연계를 하면서 당황했던 두가지입니다.

1. 앱 생성의  App ID, Secret Key, CallBack 는 각각 api요청시 App ID=> client_id, Secret Key, CallBack => redirect_url 로 매핑됩니다.

2. 이 방식의 요청에서는 브라우저에서 로그인을 필요로 합니다.

순서는 아래와 같이 하도록 하겠습니다. tistory 제공 api 정보 >  Authorization Code 방식 · GitBook (tistory.github.io)

1. 인증 요청을 위한 간단한  express 사용 프로젝트 생성

- vscode에서 node 프로젝트 생성 및  실행

- express 설치 및 첫 페이지 구성

2. 인증 요청

- 인증요청 페이지 생성 및 인증요청 절차

1. 인증 요청을 위한 간단한  express 사용 프로젝트 생성을 위해  vscode에서 node 프로젝트 생성 및  실행해 보도록 하겠습니다.

vscode 설치, node, npm 설치 확인합니다.

vscode에서 새로운 폴더를 생성합니다. 혹은 새로운 폴더위치에서 code .실행합니다.

Terminal 창을 열고 npm init 를 실행해서 package.json 파일을 생성합니다.

npm cli 명령어 참조 노트 > npm cli 명령어 모음 (a3040.com)

index.js파일을 생성하고 node에서 실행해봅니다.

프로젝트 기본 설정은 잘마무리 되었습니다.

package.json 설정을 통해 npm을 통해 실행가능하도록 합니다.

기본적으로 node는 라이브러리 사용시 require를 사용하지만 저는 import를 사용하도록 하겠습니다.

웹에서 사용하기 위해 express를 설치 합니다.

꼭 express를 사용할 필요 없이 내장되 http를 사용할수 있으나 express를 사용하겠습니다.

npm install express

이후에 package.json에 의존성이추가 되고 프로젝트폴더에는 node_modueles 폴더가 생성됩니다.

index.js에 서버 설정을 추가합니다.

index.js를 추가하고 실행한 결과입니다.

 인증 요청을 위한 간단한  express 사용 프로젝트 생성을 위해  vscode에서 node 프로젝트 생성 및  실행까지 완료했습니다. 이제 인증 요청을 위한 페이지 작성을 진행해보도록 하겠습니다.

2. 인증 요청

인증에 사용하기로한 방식은 인증요청을 하면 tistory가 로그인이 되어 있을경우 사용확인 후 callback으로 응답을, 아닌경우 로그인 페이지를 보여서 로그인 > 사용확인 > 코드를 응답하는 형태로 이루어져있습니다. 현재 로컬에서 개발중이기때문에 callback을 받을수 없습니다. 따라서 현재 보고있는 tistory페이지로 응답을 받도록 하겠습니다.

요청을 수행하려고 했더니 xhr사용이 필요해서 axios를 사용하기로 했습니다.

터미널에서 > npm install axios 

index.js를 수정해서 로그인 요청을 처리할 route를 생성합니다.

실행후 브라우저 3000번으로 접속해보면

후 에 티스토리로긴 클릭  로그인이 안되어 있을때는 로그인을 먼저 요청합니다.

로그인하거나 로그인되어 있다는게 확인되고 "허가하기" 버튼을 클릭하면

앱등록시 등록했던 callback 페이지로 이동시켜 주면서 code를 응답합니다.

2. 인증 요청 페이지 생성 및 인증요청을 수행하고 code를 받는 곳까지였습니다.

이후 api에는 acess token을 받으라고 되어있습니다.

기회가 되면 더 작성하겠습니다.

tistory_openapi/ex1 at master · a3040/tistory_openapi (github.com)

Authorization Code 방식 · GitBook (tistory.github.io)

Express 설치 (expressjs.com)