TIL(#4) - 03.04

Taewoong Moon·2021년 3월 5일
0


미니 프로젝트 기간의 마지막 날, API 구현 마무리 부터 시작해서 AWS 서버 배포 및 프로젝트 설명을 준비하기 위해서 많은 21시간 정도를 코딩했다.

미니프로젝트 링크

로그인 및 회원가입 구현 과정 (JWT)

JWT란?

토큰 기반 인증 방식으로써, 클라이언트의 세션 상태를 저장하는게 아니라 토큰에 필요한 정보들을 넣어 서버와 클라이언트 사이에 주고받는 형식입니다.

장점은?
WT는 기존의 세션에 정보를 저장해 쿠키를 주고받는 반면, JWT는 토큰안에 유저의 정보를 넣어 사용자에게 보내기 때문에 서버 확장에 있어 유지, 보수하는데 유리합니다.

토큰 생성 코드 예시

 # 로그인
   username_receive = request.form['username_give']
   password_receive = request.form['password_give']
   pw_hash = hashlib.sha256(password_receive.encode('utf-8')).hexdigest()
   result = db.users.find_one({'username': username_receive, 'password': pw_hash})

   if result is not None:
      payload = {
      'id': username_receive,
      'exp': datetime.utcnow() + timedelta(seconds=60 * 60 * 24)  # 로그인 24시간 유지
      }
      token = jwt.encode(payload, SECRET_KEY, algorithm='HS256')

      return jsonify({'result': 'success', 'token': token})
   # 찾지 못하면
   else:
      return jsonify({'result': 'fail', 'msg': '아이디/비밀번호가 일치하지 않습니다.'})

로그인 할때 토큰안의 쿠키를 이용하여 정보를 주고받는 과정

#저장 API
@app.route('/api/save', methods = ['POST'])
def save_trip():
      token_receive = request.cookies.get('mytoken')
      try:
         payload = jwt.decode(token_receive, SECRET_KEY, algorithms = ['HS256'])
         myRegion_info = request.form['region_give'];
         myPlaceName_info = request.form['placeName_give'];
         myPlaceAddress_info = request.form['placeAddress_give'];
         myPlaceUrl_info = request.form['placeUrl_give'];
         myPlaceImg_info = request.form['placeImg_give'];
         myAccommodationName_info = request.form['accommodationName_give'];
         myAccommodationAddress_info = request.form['accommodationAddress_give'];
         myAccommodationUrl_info = request.form['accommodationUrl_give'];
         username = payload['id']
         doc = {
         'username': username,
         'region': myRegion_info,
         'place_name': myPlaceName_info,
         'place_address': myPlaceAddress_info,
         'place_url': myPlaceUrl_info,
         'place_img': myPlaceImg_info,
         'accommodation_name': myAccommodationName_info,
         'accommodation_address': myAccommodationAddress_info,
         'accommodation_url': myAccommodationUrl_info,
         }
         print(doc)
         db.myTrip.insert_one(doc)
         return jsonify({'msg': '저장완료!'})
      except(jwt.ExpiredSignatureError, jwt.exceptions.DecodeError):
         return redirect(url_for('home'))

서버사이드 렌더링

서버사이드 렌더링은 자바스크립트 도움 없이 서버에서 view를 직접 생성하기 때문에 클라이언트측에서 초기 로딩속도가 빠르다.
또한 검색 엔진 최적화(SEO, Search Engine Optimization)에 유리하여 해당 사이트가 검색 엔진에 잘 뜨게 된다.

MongoDB Object_ID 스트링화

몽고 디비에 저장된 Object_ID를 스트링화 시켜야한다. DB에서 자바스크립트에 내릴때 string 형태가 아니라서 불러올 수 없음.

def mypage_listing():
   token_receive = request.cookies.get('mytoken')
   try:
      payload = jwt.decode(token_receive, SECRET_KEY, algorithms = ['HS256'])
      user_info = list(db.myTrip.find({'username': payload['id']}))
      for data in user_info:
         data['_id'] = str(data['_id'])
      return jsonify({'mypage_data': user_info})
   except (jwt.ExpiredSignatureError, jwt.exceptions.DecodeError):
      return redirect(url_for('home'))
profile
모든 코드에 의미를 담겠습니다.

0개의 댓글