처음으로 회원가입과 로그인페이지 구현에 도전했다!
결과는 처참! (로그인 페이지 연동이 안되서 3시간 잡아묵음)
우선 들어가기 전에! 회원가입에 필요한 해시함수란 뭘까?
@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'})
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']) //아니면 메세지 띄우기
}
}
})
}
@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': '아이디/비밀번호가 일치하지 않습니다.'})
// ['쿠키'라는 개념에 대해 알아봅시다]
// 로그인을 구현하면, 반드시 쿠키라는 개념을 사용합니다.
// 페이지에 관계없이 브라우저에 임시로 저장되는 정보입니다. 키:밸류 형태(딕셔너리 형태)로 저장됩니다.
// 쿠키가 있기 때문에, 한번 로그인하면 네이버에서 다시 로그인할 필요가 없는 것입니다.
// 브라우저를 닫으면 자동 삭제되게 하거나, 일정 시간이 지나면 삭제되게 할 수 있습니다.
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'])
}
}
})
}
결론:좀 더 공부해야할 것 같다!