크래프톤 정글 week00, day03 - 프로젝트 작업 및 저장소 학습

2일차에 JWT를 학습해서 로그인에 넣을 수 있게 코드를 짜고 JWT 토큰을 넣을 저장소를 정했다.

http는 요청과 응답으로 진행되며 사이클이 끝나면 상태가 없기 때문에 매번 데이터를 가져올 필요없이 저장소에 데이터를 넣어 필요할 때 가져다 쓸 수 있게 개발되었다.

​

저장소에는 웹 스토리지(로컬 스토리지, 세션 스토리지), 세션, 쿠키 가 있다.

---

 

• 웹 스토리지
  • 공통
    • 스토리지 종류에는 로컬과 세션이 있다.
    • key와 value값으로 저장된다.
    • 넉넉한 데이터 저장 용량이 있다.
    • 문자열 외에 자바스크립트의 객체 저장이 가능하다
  • 로컬 스토리지
    • 로컬 스토리지는 데이터를 영구적으로 저장이 가능해 삭제하기 전까진 유지가 가능하다.
    • 주로 자동 로그인에 사용한다.
  • 세션 스토리지
    • 세션 스토리지는 브라우저나 윈도우가 닫히면 스토리지가 초기화된다.
    • 주로 입력폼 저장이나, 일회성 로그인 정보에 사용한다.

​

• 세션
  • 로그인할 때 데이터를 서버에 저장하고 관리한다.
  • 서버에 저장되어있다가 로그아웃 하거나 일정 시간 동안 활동이 없으면 세션이 종료된다.
  • 세션은 세션ID를 따로 부여하여 식별하며, 쿠키에 저장될 수 있습니다.
  • 서버 측에서 관리되기 때문에 쿠키보다 보안성이 좋지만 많은 데이터가 들어오면 서버가 무거워진다.

​

• 쿠키
  • 클라이언트에 저장되는 작은 파일이다.
  • 이름, 값, 만료일, 도메인 등의 정보를 포함할 수 있으며 사용자가 방문했던 사이트를 기억해 재방문할 시 데이터가 유지된다.
  • 클라이언트 측에서 관리하기 때문에 잠재적으로 보안에 취약하다.

 

---

미니 프로젝트다 보니 구현 범위도 좁고 페이지도 몇개 안되기 때문에 비교적 데이터가 적을 것 같아 토큰을 쿠키에 저장하기로 했다.

​

로그인 시 토큰을 생성하고 쿠키에 담아 데이터가 저장되며 메인페이지로 이동해야 한다.

# 로그인 성공 시
@app.route('/loginOk', methods=['POST'])
def loginOk():
    username = request.form['username']
    password = request.form['password']

    pwHash = hashlib.sha256(password.encode('utf-8')).hexdigest()

    check = db.users.find_one({'name' : username, 'password': pwHash})

    if check is not None:
        payload = {
            'userid' : str(check['_id']),
            'username' : username,
            'password' : pwHash,
            'exp' : datetime.utcnow() + timedelta(seconds=300)
        }

        token = jwt.encode(payload, SECRET_KEY, algorithm='HS256')
        response = make_response(redirect(url_for('hello_world')))
        response.set_cookie('token', token)
        return response
    else:
        flash("이름과 비밀번호를 확인해주세요.")
        return redirect(url_for('login'))

​

 

1. 화면에서 아이디와 비밀번호를 입력하고 로그인 버튼을 클릭했을 때 input태그에 입력된 아이디와 비밀번호를 가진 유저가 있는지 데이터베이스에서 찾는다.

​

2. 만약 유저가 없으면 입력을 확인하라는 알림창이 뜨며 다시 로그인페이지로 이동한다.

​

3. 만약 유저가 있으면 토큰에 payload부분에 저장할 데이터를 넣고 SECRET KEY와 함께 인코딩할 알고리즘으로 인코딩한다. 그리고 입력된 토큰을 쿠키에 담아 메인페이지로 이동한다.

​

메인페이지로 이동되면 개발자 코드의 application > cookie에 토큰이 담겨 있을 것이다.

 

이제 메인페이지로 이동하면 토큰 검사를 하게 된다.

 

@app.route('/')
def hello_world():
    token = request.cookies.get('token')
    try:
        payload = jwt.decode(token, SECRET_KEY, algorithms=['HS256'])
        print(payload['username'])
        print(payload['password'])
        print(payload['userid'])
        user_info = db.users.find_one({"name": payload['username']})

        return render_template('index.html', username=user_info['name'], gender=user_info['gender'], userId=str(user_info['_id']), sessionDataList=result)
    except jwt.ExpiredSignatureError:
        flash("로그인 시간이 만료되었습니다. 다시 로그인 해주세요.")
        response = make_response(redirect(url_for("login")))
        response.set_cookie('token', '', expires=0)   # 쿠키 삭제
        return response
    except jwt.exceptions.DecodeError:
        flash("로그인 정보가 존재하지 않습니다. 다시 로그인 해주세요.")
        response = make_response(redirect(url_for("login")))
        response.set_cookie('token', '', expires=0)   # 쿠키 삭제
        return response

 

1. 메인 페이지로 이동될 시 현재 쿠키에 'token'이라고 저장되어 있는 값을 변수에 담는다.

​

2. 인코딩된 토큰 값을 디코딩하고 디코딩된 토큰의 payload값에 있는 username을 가진 유저가 데이터베이스에 있는지 찾아 메인페이지 화면을 받아온다.

(원래는 토큰의 고유코드를 직접 비교해야 하는데 그 부분에 에러가 생겼고 지식이 부족하여 user_id 같은 고유값을 가진 username을 비교했다. 그리고 이전에 토큰의 정보가 없으면 로그인 페이지로 가는 코드가 있었는데 코드 병합하는 과정에서 없어진걸 글 작성하면서 확인했다. 나중에 수정)

​

3. 외에는 토큰 만료시간 예외처리와 디코딩에러의 예외처리로 각자의 알림창을 띄워주고 남아있는 쿠키값을 삭제하고 로그인페이지로 이동한다.

 

---

 

회원가입과 로그인 페이지는 이렇게 구현을 했고 다른 팀원의 작업량이 너무 많아 메인 페이지의 기능인 게시글 생성 파트를 맡았다.

이 코드는 다른 팀원이 작성한 코드와 섞여있어서 안 올려야 할 것 같다. 설명만 하자면

1. 게시글 생성 폼에 여러 input 값을 받아와 변수에 객체로 담는다.

​

2. 로그인한 유저만 글을 쓸 수 있기 때문에 메인페이지로 갈 때처럼 토큰을 검사해 유저 토큰과 일치하면 게시글을 생성한다.

​

3. 그 외의 토큰만료나 디코딩 실패 등의 예외처리는 각 상황에 맞는 알림창을 띄우며 로그인 페이지로 이동한다.

 

---

 

오랜만에 꼴딱 밤새느라 힘들긴 했는데 다같이 새는 팀원들도 있고 다른 팀들도 남아서 열심히 하는 모습을 보고 힘입어 즐겁게 밤을 샜던 것 같다.

​

학습시간 : 10~29시