((기업협업6)) node.js에 swagger 적용하기

woooow access token을 적용하는 데 시간이 너무 오래 걸렸다^_^ 다음에 또 헤매지 않도록 정리하고 넘어가자. 일단 인증 정보를 추가하기 위해선 아래처럼 components를 만들고 그 안에 데이터를 넣어줘야한다.

// apidocs/swagger.js

const swaggerUi    = require("swagger-ui-express");
const swaggerJsdoc = require("swagger-jsdoc");

const options = {
    swaggerDefinition: {
        openapi : "3.0.0",       // 사용하고 있는 open api 버전
        info : {                // api에 필요한 정보들을 다루는 선택 필드
            version : "1.0.0", // api버전
            title : "자라홈",   // api 제목
            description :    // api 상세 정보
            "위코드 1차 팀 프로젝트 '터틀홈' node.js로 진행한 API",
        },
        servers : [
            {
                url : "http://localhost:4000",  // api에 대한 기본 url을 정의하며배열로 여러 ur 정의 가능
            },
        ],
        components : {
            securitySchemes: {   // 인증 관련  => bearer : jwt or oauth를 나타내는 인증타입
                Authorization: {
                    type: "http",
                    scheme: "bearer",
                    bearerFormat: "JWT",
                    value: "<JWT token here>"
                }
            },
        },
    },
    apis : ["./apidocs/*/*.js"],  // swagger 파일 연동
}

const specs = swaggerJsdoc(options);

module.exports = {
    swaggerUi,
    specs
}

위의 코드를 입력하면, swagger화면에서 access token을 입력하는 창이 생긴다.

토큰 인증이 필요한 장바구니 api를 만들자.

// apidocs/carts/swagger_cart_create.js

/**
* @swagger
*
* /carts:
*  post:
*    security:
*      - Authorization: []
*    summary: "장바구니 생성"
*    description: "장바구니 생성하기"
*    tags: [Carts]
*    requestBody:
*      description: 장바구니 생성 시 필요한 데이터
*      required: true
*      content:
*        application/x-www-form-urlencoded:
*          schema:
*            type: object
*            properties:
*              productId:
*                type: number
*                description: "상품 ID"
*              sizeId:
*                type: number
*                description: "사이즈 ID - 1)single 2)double 3)queen 4)king"
*              quantity:
*                type: number
*                description: "수량"
*    responses:
*      400:
*        description: body에 해당 데이터가 없을 때
*        content:
*          application/json:
*            schema:
*              type: object
*              properties:
*                status:
*                    type: number
*                    example: 400
*                message:
*                    type: string
*                    example: "KEY_ERROR"
*      200:
*        description: 장바구니 담기 성공
*        content:
*          application/json:
*            schema:
*              type: object
*              properties:
*                  status:
*                    type: number
*                    example: 200
*                  message:
*                    type: string
*                    example: "장바구니 담기/업데이트 성공"
*/

지겹게 뜨던 invalid token, invalid token... invalid token... 2시간이나 걸렸는데 해결하고 나서 보니 자존심상한다.😫😫

결국 해결!

swagger에 제대로된 토큰을 첨부해도 계속 invalid token이라고 떴다. 원인은 토큰을 확인하던 로직때문!!

기존에 포스트맨으로 테스트할때는 토큰 앞에 Bearer이 붙이지 않고 보냈었다. 하지만 지금은 토큰앞에 'Bearer '이 붙어서 보내지고 있으니 verify과정에서 생긴 오류때문에 invalid token이라고 응답을 줬던 것. split과 인덱싱을 사용해서 코드를 수정했더니 해--결됐다 기쁘다... 🥹

 

* 참고한 자료

https://llshl.tistory.com/49

https://stackoverflow.com/questions/48606341/jwt-gives-jsonwebtokenerror-invalid-token

https://stackoverflow.com/questions/67415891/jsonwebtokenerror-jwt-must-be-a-string

https://jamong-icetea.tistory.com/359

https://swagger.io/docs/specification/about/