인증 요청 및 Authentication code 발급

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

 

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

 

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 설치