WIL (2022-01-16)

부트캠프의 1주일이 지났다,
시작 후 처음으로 주어진 과제는 미니프로젝트 였다.

내가 맡은 부분은 회원가입/로그인이였다

사용된 코드들

Backend:

@app.route('/sign_in', methods=['POST'])
def sign_in():
    # 로그인
    # id, pw를 받아서 맞춰보고, 토큰을 만들어 발급합니다.
    username_receive = request.form['username_give']
    password_receive = request.form['password_give']
    # bcrypt로 비밀번호를 해쉬화 한다
    hash_pw = bcrypt.hashpw(password_receive.encode('utf-8'), bcrypt.gensalt())
    hashed_pw = hash_pw.decode('utf-8')
    check_pw_match = bcrypt.checkpw(password_receive.encode('utf-8'), hash_pw)
    # print(check_pw_match <--true false로 나타남)
    current_user = db.users.find_one({'username': username_receive})
    # 데이타 베이스의 유저 ID(이름)과 비밀번호가 일치하면 토큰을 발행하라
    if current_user and check_pw_match:
        payload = {
            'id': username_receive,
            'exp': datetime.utcnow() + timedelta(seconds=60 * 60 * 24)  # 로그인 24시간 유지
        }
        token = jwt.encode(payload, SECRET_KEY, algorithm='HS256')
        print(token)
        return jsonify({'result': 'success', 'token': token})
    # 찾지 못하면
    else:
        return jsonify({'result': 'fail', 'msg': '아이디/비밀번호가 일치하지 않습니다.'})

Frontend

function sign_in() {
  // 유저 아이디, 비밀번호의 값을 가져온다
    let username = $("#input-username").val()
    let password = $("#input-password").val()
//유저이름이 공란이면 아이디를 입력하라는 메세지
    if (username == "") {
        $("#help-id-login").text("아이디를 입력해주세요.")
        $("#input-username").focus()
        return;
    } else {
        $("#help-id-login").text("")
    }
//유저이름이 공란이면 비밀번호를 입력하라는 메세지
    if (password == "") {
        $("#help-password-login").text("비밀번호를 입력해주세요.")
        $("#input-password").focus()
        return;
    } else {
        $("#help-password-login").text("")
    }
  // 백엔드 API에게 유저의 이름, 비밀번호를 보내준다
    $.ajax({
        type: "POST",
        url: "/sign_in",
        data: {
            username_give: username,
            password_give: password,

        },
        success: function (response) {//성공하면
            //let access_token = response['token']<==토큰이있는지 확인용, 불필요한코드

          // 백엔드API에 통신하였을때 success면 브라우저 쿠키에 mytoken이라는 이름으로 token을 저장하라
            if (response['result'] == 'success') {
                $.cookie('mytoken', response['token'], {path: '/'});//토큰을 받아서 브라우저에 쿠키로 저장
                window.location.replace("/")
            } else {
                alert(response['msg'])
            }
            console.log(response)
        }
    });
}

모든것이 처음이라서 로그인에 대한 깊이는 없다.
일단 내가 배운것은 백엔드는 프론트가 요청하였을때 JWT -Acess token 을 요청하는 것이고, 그것을 쿠키에 저장하는것이다.

기존 주어진 강의에서는 JWT토큰을 해쉬화 하여 데이타 베이스에 저장하는 방식이었지만, 사실 비밀번호는 단방향 해쉬가 아니라 이중적? 으로 저장되야 한다는 글을 본적이있다. 그래서 bcrypt같은 것을 사용해야 한다고 찾아보았었다.

JWT 와 bcrypt에 대하여 자세히 공부 한 후 포스팅 해야겠다.