[WIL] JWT와 API정리

 

📌Intro

• 6/20일(월)부터 항해99가 본격적으로 시작되었다. 월요일부터 목요일까지 단 4일동안 미니프로젝트가 진행되었다. 미니프로젝트는 입학시험으로 진행했던 Flask로 진행을 했고 미니프로젝트 진행과정에서 스파르타코딩클럽에서 지급해준 Git강의와 웹개발플러스강의를 참고해 진행했다.
• 정말 짧은 기간이라서 월요일에 팀원들과 프로젝트 주제와 구현목록, API명세를 정했다. 4일이라는 짧은 시간, 그리고 전공자와 비전공자가 섞여있었기 때문에 첫날 회의가 정말 활발하게 진행되었다.
• 이번 포스팅은 미니프로젝트를 진행하면서 사용한 JWT인증방식과 API에 대해 포스팅하려고한다.

API

API는 Application Programming Interface(애플리케이션 프로그램 인터페이스)의 줄임말.

API란?

• API : 정의 및 프로토콜 집합을 사용하여 두 소프트웨어 구성 요소가 서로 통신할 수 있게 하는 메커니즘.
  • API의 맥락에서 애플리케이션이라는 단어는 고유한 기능을 가진 모든 소프트웨어를 나타낸다.
  • 인터페이스는 두 애플리케이션 간의 서비스 계약이라고 할 수 있다.
  • 이 계약은 요청과 응답을 사용하여 두 애플리케이션이 서로 통신하는 방법을 정의.
  • API 문서에는 개발자가 이러한 요청과 응답을 구성하는 방법에 대한 정보가 들어 있다.

API 작동방식

• API 아키텍처는 일반적으로 클라이언트와 서버 측면에서 설명된다.
  • 요청을 보내는 애플리케이션을 클라이언트.
  • 응답을 보내는 애플리케이션을 서버.
• API의 예 : 기상청의 소프트웨어 시스템에는 일일 기상 데이터가 들어 있다. 휴대폰의 날씨 앱은 API를 통해 이 시스템과 "대화"하고 휴대폰에 매일 최신 날씨 정보를 표시한다. 따라서 기상청의 날씨 데이터베이스는 서버이고 모바일 앱은 클라이언트입니다.
  

  

API 종류

• API가 생성된 시기와 이유에 따라 API는 네 가지 방식으로 작동할 수 있습니다.1. SOAP API
  이 API는 단순 객체 접근 프로토콜을 사용한다. 클라이언트와 서버는 XML을 사용하여 메시지를 교환한다. 과거에 더 많이 사용되었으며 유연성이 떨어지는 API이다.
  2. RPC API
  이 API를 원격 프로시저 호출이라고 한다. 클라이언트가 서버에서 함수나 프로시저를 완료하면 서버가 출력을 클라이언트로 다시 전송한다.
  3. Websocket API
  Websocket API는 JSON 객체를 사용하여 데이터를 전달하는 또 다른 최신 웹 API 개발이다. WebSocket API는 클라이언트 앱과 서버 간의 양방향 통신을 지원한다. 서버가 연결된 클라이언트에 콜백 메시지를 전송할 수 있어 REST API보다 효율적이다.
  4. REST API
  오늘날 웹에서 볼 수 있는 가장 많이 사용되고 유연한 API이다. 클라이언트가 서버에 요청을 데이터로 전송한다. 서버가 이 클라이언트 입력을 사용하여 내부 함수를 시작하고 출력 데이터를 다시 클라이언트에 반환한다.

JWT인증방식

JWT : JSON 웹 토큰(JSON Web Token)은 선택적 서명 및 선택적 암호화를 사용하여 데이터를 만들기 위한 인터넷 표준으로, 페이로드는 몇몇 클레임(claim) 표명(assert)을 처리하는 JSON을 보관하고 있다.(출처 : 위키백과)

• 로그인 인증방식에는 대표적으로 세션/쿠키와 JWT 2가지가 있다. 그 중에서 JWT인증방식에 대해 알아보도록 하자!

동작방식

Flask에서 사용법

• PyJWT설치
  • pip install PyJWT
• 로그인 시 DB에서 사용자 확인 후 찾은 경우 아이디와 토큰 만료 시간을 저장하는 토큰을 만들어 넘겨준다.
• payload = { 'id': email_receive, # 클라이언트에서 넘겨받은 값 'exp': datetime.utcnow() + timedelta(seconds=60 * 60 * 24) # 로그인 24시간 유지 } token = jwt.encode(payload, SECRET_KEY, algorithm='HS256')
• 로그인 성공 메시지를 받으면 건네받은 토큰을 쿠키로 저장하여 만료되기 전까지 갖고 있으면서, API 요청을 보낼 때마다 회원임을 확인받는다.
  • 쿠키에 저장하는 코드

  success: function (response) {
      if (response['result'] == 'success') {
          $.cookie('mytoken', response['token'], {path: '/'});  // script에 jquery.cookie.js가 import되어있어야함.
          window.location.replace("/")
      } else {
          alert(response['msg'])
      }
  }

  • API 요청 보낼 때 회원 확인 받는 코드

  token_receive = request.cookies.get('mytoken')
  try:
      payload = jwt.decode(token_receive, SECRET_KEY, algorithms=['HS256'])
      user = db.user.find_one({"email": payload["id"]})
      return render_template('check-user.html', user_info=user)
  except (jwt.ExpiredSignatureError, jwt.exceptions.DecodeError):
      return render_template("sign-in.html")

• 로그아웃 시 해당 토큰을 삭제한다.
• function sign_out() { $.removeCookie('mytoken', {path: '/'}); alert('로그아웃!') window.location.href = "/signin" }

참고자료

• https://aws.amazon.com/ko/what-is/api/
• 🍪 프론트에서 안전하게 로그인 처리하기 (ft. React)
  • https://velog.io/@yaytomato/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%90%EC%84%9C-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0#-%EB%A1%9C%EA%B7%B8%EC%9D%B8%EC%9D%80-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%9D%B4%EB%A3%A8%EC%96%B4%EC%A7%80%EB%82%98
• [JWT] JSON Web Token 소개 및 구조
  • https://velopert.com/2389
• 🤔 JWT, 정확하게 무엇이고 왜 쓰이는 걸까?
  • https://velog.io/@junghyeonsu/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%90%EC%84%9C-%EB%A1%9C%EA%B7%B8%EC%9D%B8%EC%9D%84-%EC%B2%98%EB%A6%AC%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95
• JWT는 어디에 저장해야할까? - localStorage vs cookie
  • https://velog.io/@0307kwon/JWT%EB%8A%94-%EC%96%B4%EB%94%94%EC%97%90-%EC%A0%80%EC%9E%A5%ED%95%B4%EC%95%BC%ED%95%A0%EA%B9%8C-localStorage-vs-cookie
• 쉽게 알아보는 서버 인증 1편(세션/쿠키 , JWT)
  • https://tansfil.tistory.com/58?category=255594

작성일자 : 2022년 6월 26일