로그인

• JWT를 이용한 로그인 구현

JWT?

• JSON 포맷을 이용한 Web Token
• 클라이언트로 발행될 수 있다.
• 일정 시간 뒤에 자동으로 만료된다.(시간을 설정할 수 있다.)
• 서명을 통해 이용자가 생성했다는 사실을 증명할 수 있다.
• 사용자를 로컬에서 검증할 수 있기 때문에 API 호출 횟수를 줄일 수 있다.
• JWT Token을 헤더에 실어 서버로 보내야 한다.

Token Structure

aaaaaa.bbbbbb.cccccc
a > 헤더(header) : 암호화 할 방식, 타입
b > 내용(payload) : 사용자의 아이디, 유효 기간
c > 서명(signature)
🚨 토큰은 header, payload, secret key를 합쳐 생성된다.

작동 원리

1) login 요청
2) 서버에서 JWT 발급
3) 발급한 JWT를 브라우저로 보냄
4) 이후 요청이 들어올 시 발급받은 JWT를 함께 보냄
5) 서버에서 JWT에 포함된 signature을 확인하여 JWT로부터 유저 정보를 얻음
6) response를 보냄

토큰을 보내기 위해서는 local storage나 쿠키, httpOnly에 가지고 있어야 하는데 local storage는 JS로 쉽게 접근할 수 있어 보안에 취약하다고 한다.

이번 프로젝트에서는 쿠기에 담아보기로!

Cookie🍪

이 전에 적은 쿠키와 세션 정리

# 로그인
@app.route('/', methods=['GET', 'POST'])
def login():
    if request.method == "GET":
        return render_template('login.html')
    else:
        id_receive = request.form['id']
        pw_receive = request.form['pw']
        
        #해시 함수 아래에 정리!
        pw_hash = hashlib.sha256(pw_receive.encode('utf-8')).hexdigest()
        #db저장
        result = db.members.find_one({'id': id_receive, 'pw': pw_hash})

        if result is not None:
            #내용
            payload = {
                'id': id_receive,
                #유효기간
                'exp': datetime.utcnow() + timedelta(seconds=60 * 60 * 24)
            }

            token = jwt.encode(payload, SECRET_KEY, algorithm='HS256').decode('utf-8')

            return jsonify({'result': 'success', 'token': token, 'msg': '로그인 성공!'})
        else:
            return jsonify({'result': 'fail', 'msg': '아이디/비밀번호가 일치하지 않습니다.'})

function login() {
    let id = $('#id').val()
    let pw = $('#pw').val()

    $.ajax({
        type: "POST",
        url: "/",
        data: {
            id: id,
            pw: pw
        },
        success: function (response) {
            if (response['result'] == 'success') {
                $.cookie('mytoken', response['token'], {path: '/'});
                window.location.replace("/home")
                alert(response['msg'])
            } else if (id === '' || pw === '') {
                alert('아이디 또는 비밀번호를 입력해주세요')
            } else {
                alert(response['msg'])
            }
        }
    })
}

해시함수(hashlib)

• 로그인을 구현하면서 해시함수를 사용해보았다.
• 개인정보에 해당하는 데이터를 암호화하여 전달해야하는 경우 사용하는 암호화 라이브러리
  ! 임포트하고 사용 !
  🚨sha256 > 512와 함께 가장 많이 알려져있는 암호화 방식으로 뒤 숫자만큼의 비트로 구성되어있다는 뜻
• 쉽게 생각해서 사용자가 입력한 비밀번호를 암호화하여 db내에서도 사용자의 비밀번호를 알 수 없게 만든다!

다이제스트(Digest)

• 해시함수가 출력하는 결과(암호화된 결과)