사용기 및 에러처리 기록

로컬에서 시작해서 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값을 입력받습니다.

app.get('/set_code', (req, res) => {

const loc = `https://www.tistory.com/oauth/authorize?client_id=${client_id}&redirect_uri=${redirect_uri}&response_type=code&state=${state_param}`;

res.send(`

<button type='submit'>코드입력후토큰얻기</button>

</form>

<a href=${loc} target='_blank'>티스토리로긴</a>|<a href=/set_code>로컬에코드입력</a>

`);

});

app.get('/', (req, res) => {

const loc = `https://www.tistory.com/oauth/authorize?client_id=${client_id}&redirect_uri=${redirect_uri}&response_type=code&state=${state_param}`;

res.send(`Hello, World!

<a href=${loc}>티스토리로긴</a>|<a href=/set_code>로컬에코드입력</a>`);

});

프로젝트가 터미널에서 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을 획득합니다.

let code = '';

let access_token = ''; //토큰 획득시 값 세팅됨

app.get('/get_token', async (req, res) => {

const tcode = req.query.code;

code = tcode; //전역변수에 code 추가

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`;

try{

const awaitRes = await axios.get(loc);

console.log( awaitRes.data );

access_token = awaitRes.data.access_token;

}catch(error){console.error(error);}

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

});

/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

Nodemon is a utility depended on about 3 million projects, that will monitor for any changes in your source and automatically restart your server. Perfect for development. Swap nodemon instead of node to run your code, and now your process will automatical

nodemon.io

'사용해보기 > express를 이용한 tistory open api 연동' 카테고리의 다른 글

tistory openapi를 이용한 post 방식 연동 (0)	2023.05.11
tistory openapi를 이용한 get 방식 연동 (0)	2023.05.10
인증 요청 및 Authentication code 발급 (0)	2023.05.08
tistory 연동을 위한 준비사항입니다. (0)	2023.05.08

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

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)

Authorization Code 방식 · GitBook

No results matching ""

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를 사용하도록 하겠습니다.

"type": "module",//추가

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

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

npm install express

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

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

import express from 'express'; //const express = require('express');

const app = express();

app.get('/', (req, res) => {

res.send('Hello, World!');

});

app.listen(3000, () => {

console.log('Server started on port 3000');

});

console.log(`Hello`);

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

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

2. 인증 요청

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

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

터미널에서 > npm install axios

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

import express from 'express';

import axios from 'axios';

const app = express();

const client_id = 'a2ba5ab88';

const redirect_uri='https://a3040.tistory.com/';

const state_param ='dummy';

app.get('/', (req, res) => {

const loc=`https://www.tistory.com/oauth/authorize?client_id=${client_id}&redirect_uri=${redirect_uri}&response_type=code&state=${state_param}`;

res.send(`Hello, World! <a href=${loc}>티스토리로긴</a>`);

});

app.listen(3000, () => {

console.log('Server started on port 3000');

});

console.log(`Hello`);

실행후 브라우저 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)

Express 설치

설치 Node.js가 이미 설치되었다고 가정한 상태에서, 애플리케이션을 보관할 디렉토리를 작성하고 그 디렉토리를 작업 디렉토리로 설정하십시오. $ mkdir myapp $ cd myapp npm init 명령을 이용하여 애플

expressjs.com

'사용해보기 > express를 이용한 tistory open api 연동' 카테고리의 다른 글

tistory openapi를 이용한 post 방식 연동 (0)	2023.05.11
tistory openapi를 이용한 get 방식 연동 (0)	2023.05.10
code로 Access Token 발급받기 (0)	2023.05.09
tistory 연동을 위한 준비사항입니다. (0)	2023.05.08

Tistory 에러 로그를 기록하던중에 openapi를 사용해보기로 생각하고 코드를 작성하던 중 python으로 작성된 예시는 많이 보이는데 javascirpt는 많이 보이지 않아서 javascript로 openapi를 사용하는 방법을 작성해보자 라고 생각했습니다.

python을 보니 보통 cli환경에서 실행하는 경우가 많던데 node를 사용해서도 동일하게 작성할수 있지만 브라우저에서 동작하게 하면 제어가 편할것도 같아서 nodejs, express를 사용해서 open opi를 사용해보기로 했습니다.

tistory OpenAPI를 사용하기 위해 필요한 두 가지 준비사항이 있습니다. 첫째, tistory API를 사용하기 위한 애플리케이션을 등록하고 API Key를 발급받아야 합니다. 둘째, tistory OpenAPI를 호출하기 위한 개발 환경을 구성해야 합니다.

- 연동 방식은 Authorization Code 방식 · GitBook (tistory.github.io) 을 이용하겠습니다.

- 데이터의 수신은 json으로 이용하겠습니다.

1. tistory open api 사용을 위한 tistory 설정

- tistory에 로그인 후 OpenAPI - TISTORY 로 이동해서 앱을 등록합니다.

등록을 완료 한 후 상단 앱관리 메뉴를 클릭하면 보이는 목록입니다.

설정을 클릭하면 설정페이지가 나오면서 open api에서 사용해야할 cleint_id 와 암호키가 있습니다.

앱관리 > 설정으로 들어가시면 등록때 작성했던 내용과 연동할때 사용할 정보가 생성된것을 확인할수 있습니다.

Authorization Code 방식 · GitBook (tistory.github.io) 방식에서는 App ID, Secret Key, CallBack 이 세가지가 인증과 권한토큰 발급을 위해 사용됩니다.

2. 연동을 위한 개발 환경 설정

- nodejs : 자바스크립트 런타임 환경입니다.

nodejs 설치 : 노트 > 자바스크립트 프레임워크/라이브러리모음 > Node.js (a3040.com)

노트 > 자바스크립트 프레임워크/라이브러리모음 > Node.js

a3040.com

- vistual studio code : 코드 편집기 입니다.

vscode 설치 : 노트 > 개발환경과도구정리 > vscode-편집기 (a3040.com)

노트 > 개발환경과도구정리 > vscode-편집기

a3040.com

- express : nodejs 를 이용해서 웹에플리션을 만들수 있도록 하는 자바스크립트 프레임워크 입니다.

참고

티스토리 Open API : 소개 · GitBook (tistory.github.io)

소개 · GitBook

No results matching ""

tistory.github.io

Node.js (nodejs.org)

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

Express - Node.js 웹 애플리케이션 프레임워크 (expressjs.com)

Express - Node.js 웹 애플리케이션 프레임워크

Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크 $ npm install express --save

expressjs.com

'사용해보기 > express를 이용한 tistory open api 연동' 카테고리의 다른 글

tistory openapi를 이용한 post 방식 연동 (0)	2023.05.11
tistory openapi를 이용한 get 방식 연동 (0)	2023.05.10
code로 Access Token 발급받기 (0)	2023.05.09
인증 요청 및 Authentication code 발급 (0)	2023.05.08

작업 상태

- SSR 작업 중 https로 데이터를 얻어오는 일이 있어서 axios쪽에 https 인증 무시를 설정한 후 브라우저에서 계속 보였습니다.

에러 메시지

Uncaught TypeError: https.Agent is not a constructor

const agent = new https.Agent({ //<-- 에러 발생 부분

rejectUnauthorized: false

});

//서버와 통신하다: communicate with the server

const cwts = axios.create({

baseURL: `${apiUrl}/api`,

timeout: 5000,

httpsAgent: agent,

headers: {

'Content-Type': 'application/json',

},

});

- 코드는 특별히 문제가 없었습니다.

- https.Agent는 HTTP(S) 연결을 관리하고 재사용하는 HTTP(S) 에이전트 객체의 인스턴스를 생성하는 생성자 함수입니다. 일반적으로 Node.js에서 HTTPS 서버에 요청을 보낼 때 사용됩니다.

원인

- 원인은 이 부분의 코드가 문제가 아니었습니다.

- 상단 코드가 server용, client용 공용 util으로 사용되는 부분이어서 문제가 되는것이었습니다.

- 변환, 배포후 server용은 node에서 동작 client용은 브라우저에서 동작하게 되는 부분입니다.

- 이 부분에서 https.Agent가 브라우저에서 동작하면서 발생하는 문제였습니다.

처리

- 개발환경이 vite, react tsx,ssr 작업 중이어서 vite환경변수를 이용해서 설정을 분리했습니다.

const ssr :boolean = import.meta.env.SSR;

let configx = {

baseURL: `${apiUrl}/api`,

timeout: 1000*10,

// httpsAgent: agent,

headers: {

'Content-Type': 'application/json',

},

}

if( ssr ){//is server

const agent = new https.Agent({

rejectUnauthorized: false

});

configx = Object.assign({}, configx, { httpsAgent: agent });

}

const cwts = axios.create(configx);

클라이언트 측 변환코드

let configx = {
  baseURL: `${apiUrl}/api`,
  timeout: 1e3 * 10,
  // httpsAgent: agent,
  headers: {
    "Content-Type": "application/json"
  }
};
const cwts$1 = axios$1.create(configx);

서버측 변환코드

let configx = {

baseURL: `${apiUrl}/api`,

timeout: 1e3 * 10,

// httpsAgent: agent,

headers: {

"Content-Type": "application/json"

}

};

{

const agent = new https.Agent({

rejectUnauthorized: false

});

configx = Object.assign({}, configx, { httpsAgent: agent });

}

const cwts$1 = axios.create(configx);

참고

시작하기 | Vite (vitejs-kr.github.io) vite

'간단 에러 처리기' 카테고리의 다른 글

WARN o.s.w.s.m.s.DefaultHandlerExceptionResolver (0)	2023.05.15
virtualbox7, ubuntu 22 gnome-terminal 실행안됨 (0)	2023.05.12
java.lang.Error: Unresolved compilation problem:The target type of this expression must be a functional interface (0)	2023.04.30
Warning: Invalid DOM property `for`. Did you mean `htmlFor`? (0)	2023.04.29
org/apache/hc/client5/http/classic/HttpClient] with root causejava.lang.ClassNotFoundException: org.apache.hc.client5.http.classic.HttpClient (0)	2023.04.27

사용기 및 에러처리 기록

전체 글

code로 Access Token 발급받기

'사용해보기 > express를 이용한 tistory open api 연동' 카테고리의 다른 글

인증 요청 및 Authentication code 발급

'사용해보기 > express를 이용한 tistory open api 연동' 카테고리의 다른 글

tistory 연동을 위한 준비사항입니다.

'사용해보기 > express를 이용한 tistory open api 연동' 카테고리의 다른 글

Uncaught TypeError: https.Agent is not a constructor

'간단 에러 처리기' 카테고리의 다른 글

+ Recent posts

티스토리툴바