회원가입,로그인 페이지 구현하기

Zoey·2022년 1월 10일
1

Develop

목록 보기
1/1

처음으로 회원가입과 로그인페이지 구현에 도전했다!
결과는 처참! (로그인 페이지 연동이 안되서 3시간 잡아묵음)


우선 들어가기 전에! 회원가입에 필요한 해시함수란 뭘까?

💡 해시함수란, 알고리즘의 한 종류로서 임의의 데이터를 입력 받아 항상 고정된 길이의 임의의 값으로 변환해주는 함수를 말합니다.

  • 내가 회원가입에 사용한 해시함수 SHA256은 어떤 길이의 입력값을 넣어도 항상 256바이트의 결과값이 나옴 짜잔!
  • 추가적으로 동일한 입력값은 항상 같은 결과값이 나오고, 입력값은 조금이라도 달라지면 완전히 다른 값이 나오게 됩니다. 그리고 결과값을 통해 입력값을 알아내는 것이 불가능하다는 세 가지 특징이 있습니다!

회원가입

backend

@app.route('/api/addUser', methods=['POST'])
def api_register():
    id_receive = request.form['id_give'] #사용자가 입력한 id값
    pw_receive = request.form['pw_give'] #사용자가 입력한 pw값
    nickname_receive = request.form['nickname_give'] #사용자가 입력한 nickname값

    pw_hash = hashlib.sha256(pw_receive.encode('utf-8')).hexdigest()
    # DB에 저장하기 전에 pw를 sha256 방법(=단방향 암호화. 풀어볼 수 없음)으로 암호화해서 저장합니다.

    db.user.insert_one({'id': id_receive, 'pw': pw_hash, 'nick': nickname_receive})

    return jsonify({'result': 'success'})

frontend

function register() {
    $.ajax({
      type: "POST",
      url: "/api/register",
      data: {
      	id_give: $('#userid').val(), //사용자가 입력한 id 값
      	pw_give: $('#userpw').val(),//사용자가 입력한 pw 값
      	nickname_give: $('#usernick').val() //사용자가 입력한 nickname 값
      },
      success: function (response) {
      	if (response['result'] == 'success') {
          alert('회원가입이 완료되었습니다.')
          window.location.href = '/login' //회원가입이 완료되면 로그인창으로 넘겨준다
        } else {
          alert(response['msg']) //아니면 메세지 띄우기
        } 
      }
    })
 }

로그인

backend

@app.route('/api/login', methods=['POST'])
def api_login():
    id_receive = request.form['id_give'] #사용자단에서 넘겨받은 id값
    pw_receive = request.form['pw_give'] #사용자단에서 넘겨받은 id값

    # 회원가입 때와 같은 방법으로 pw를 암호화합니다.
    pw_hash = hashlib.sha256(pw_receive.encode('utf-8')).hexdigest()

    # id, 암호화된pw을 가지고 해당 유저를 찾습니다.
    result = db.user.find_one({'id': id_receive, 'pw': pw_hash})

    # 찾으면 JWT 토큰을 만들어 발급합니다.
    if result is not None:
        # JWT 토큰에는, payload와 시크릿키가 필요합니다.
        # 시크릿키가 있어야 토큰을 디코딩(=풀기) 해서 payload 값을 볼 수 있습니다.
        # 아래에선 id와 exp를 담았습니다. 즉, JWT 토큰을 풀면 유저ID 값을 알 수 있습니다.
        # exp에는 만료시간을 넣어줍니다. 만료시간이 지나면, 시크릿키로 토큰을 풀 때 만료되었다고 에러가 납니다.
        payload = {
            'id': id_receive,
            'exp': datetime.datetime.utcnow() + datetime.timedelta(seconds=5) #로그인 한 지 5초가 지나면 토큰 만료
        }
        token = jwt.encode(payload, SECRET_KEY, algorithm='HS256')

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

frontend

// ['쿠키'라는 개념에 대해 알아봅시다]
// 로그인을 구현하면, 반드시 쿠키라는 개념을 사용합니다.
// 페이지에 관계없이 브라우저에 임시로 저장되는 정보입니다. 키:밸류 형태(딕셔너리 형태)로 저장됩니다.
// 쿠키가 있기 때문에, 한번 로그인하면 네이버에서 다시 로그인할 필요가 없는 것입니다.
// 브라우저를 닫으면 자동 삭제되게 하거나, 일정 시간이 지나면 삭제되게 할 수 있습니다.
function login() {
  let username = $("#id").val(); //사용자가 input에 입력한 id값을 가져옵니다.
  let password = $("#pw").val(); //사용자가 input에 입력한 pw값을 가져옵니다.

  if (username == "") { // id값이 빈값일 경우 .id_box에 'error'클래스를 추가하고 input을 focus 합니다.
    $(".id_box").addClass("error");
    $("#id").focus();
    return;
  } else { // 빈값이 아닐 경우 .id_box에 'error'클래스를 지웁니다.
    $(".id_box").removeClass("error");
  }

  if (password == "") { // pw값이 빈값일 경우 .pw_box에 'error'클래스를 추가하고 input을 focus 합니다.
    $(".pw_box").addClass("error");
    $("#pw").focus();
    return;
  } else { // 빈값이 아닐 경우 .pw_box에 'error'클래스를 지웁니다.
    $(".pw_box").removeClass("error");
  }
  $.ajax({
    type: "POST",
    url: "/api/login",
    data: {id_give: $('#id').val(), pw_give: $('#pw').val()},
    success: function (response) {
      if (response['result'] == 'success') {
        // 로그인이 정상적으로 되면, 토큰을 받아옵니다.
        // 이 토큰을 mytoken이라는 키 값으로 쿠키에 저장합니다.
        $.cookie('mytoken', response['token']);

        alert('로그인 완료!') // 로그인이 완료되면 /(index.html -메인페이지)로 이동합니다.
        window.location.href = '/'
      } else {
        // 로그인이 안되면 에러메시지를 띄웁니다.
        alert(response['msg'])
      }
    }
  })
}

결론:좀 더 공부해야할 것 같다!

profile
한 걸음씩 단단하게 !

0개의 댓글