도무지 강의가 이해가 가지 않아 하나하나 뜯어보는 중이다.
ajax에 addClass, siblings,removeClass 적용안되어 구글링도 해보고 인터프린터를 만지던 와중에 ajax를 다운받으니 적용이되었다..
token = jwt.encode(payload, SECRET_KEY, algorithm='HS256').decode('utf-8') AttributeError: 'str' object has no attribute 'decode'라는 오류가 떠서 구글링 해봤더니 pyjwt 기본 버전에서는 jwt.encode()함수의 리턴값이 '바이트 문자열'이라는 자료형이었기 때문에 뒤에 .decode('utf-8')를 붙여 일반 문자열로 바꾸어 주었다. 2.0.0 버전부터는 이 함수의 리턴값이 일반 문자열이기 때문에 여기에 또 .decode('utf-8')를 붙여주게 되면 문자열에는 이런 메소드가 없으므로 에러가 난다.
회원가입 기능
해시함수란? - 알고리즘의 한 종류로서 임의의 데이터를 입력 받아 항상 고정된 길이의 임의의 값으로 변환해주는 함수를 말합니다.
패스워드를 해시함수를 통해 암호화한다 -> pw_hash = hashlib.sha256(pw_receive.encode('utf-8')).hexdigest()
로그인 기능
jwt - json객체를 사용해 정보를 안정성 있게 전달하는 웹표준이다.
payload - 로그인 한 사람의 아이디와 언제까지 유효한지에 대한 정보
payload = {'id': id_receive, (id정보)
'exp': datetime.datetime.utcnow() + datetime.timedelta(seconds=5)(언제까지 유효한가)
}payload 암호화 -> token = jwt.encode(payload, SECRET_KEY, algorithm='HS256').decode('utf-8')
쿠키란?
로그인을 구현하면, 반드시 쿠키라는 개념을 사용합니다.
페이지에 관계없이 브라우저에 임시로 저장되는 정보입니다. 키:밸류 형태(딕셔너리 형태)로 저장됩니다.
쿠키가 있기 때문에, 한번 로그인하면 네이버에서 다시 로그인할 필요가 없는 것입니다.
브라우저를 닫으면 자동 삭제되게 하거나, 일정 시간이 지나면 삭제되게 할 수 있습니다.
로그인에 성공 한 사실을 토큰으로 알려준다
/로그인배너, 로그인 박스 만들기/
- bulma를 사용하면 is-hidden이라는 클래스를 이용하여 요소를 숨길 수 있다.
- toggleClass : 가지고 있으면 없애고 없으면 생성해라.
중복확인 기능
- 클라이언트
function check_dup() {
let username = $("#input-username").val()
console.log(username)
if (username == "") {
$("#help-id").text("아이디를 입력해주세요.").removeClass("is-safe").addClass("is-danger")
$("#input-username").focus()
return;
}
if (!is_nickname(username)) {
$("#help-id").text("아이디의 형식을 확인해주세요. 영문과 숫자, 일부 특수문자(._-) 사용 가능. 2-10자 길이").removeClass("is-safe").addClass("is-danger")
$("#input-username").focus()
return;
}
$("#help-id").addClass("is-loading")
$.ajax({
type: "POST",
url: "/sign_up/check_dup",
data: {
username_give: username
},
success: function (response) {
if (response["exists"]) {
$("#help-id").text("이미 존재하는 아이디입니다.").removeClass("is-safe").addClass("is-danger")
$("#input-username").focus()
} else {
$("#help-id").text("사용할 수 있는 아이디입니다.").removeClass("is-danger").addClass("is-success")
}
$("#help-id").removeClass("is-loading")
}
});
}서버
@app.route('/sign_up/check_dup', methods=['POST'])
def check_dup():
username_receive = request.form['username_give']
exists = bool(db.users.find_one({"username": username_receive}))
return jsonify({'result': 'success', 'exists': exists})중복확인은 규칙으로 한번 걸러주고 서버에서 있는지 없는지 체크 후 성공하면 is-success 추가
회원가입 클라이언트
function sign_up() {
let username = $("#input-username").val()
let password = $("#input-password").val()
let password2 = $("#input-password2").val()
console.log(username, password, password2)
if ($("#help-id").hasClass("is-danger")) {
alert("아이디를 다시 확인해주세요.")
return;
} else if (!$("#help-id").hasClass("is-success")) {
alert("아이디 중복확인을 해주세요.")
return;
}
if (password == "") {
$("#help-password").text("비밀번호를 입력해주세요.").removeClass("is-safe").addClass("is-danger")
$("#input-password").focus()
return;
} else if (!is_password(password)) {
$("#help-password").text("비밀번호의 형식을 확인해주세요. 영문과 숫자 필수 포함, 특수문자(!@#$%^&*) 사용가능 8-20자").removeClass("is-safe").addClass("is-danger")
$("#input-password").focus()
return
} else {
$("#help-password").text("사용할 수 있는 비밀번호입니다.").removeClass("is-danger").addClass("is-success")
}
if (password2 == "") {
$("#help-password2").text("비밀번호를 입력해주세요.").removeClass("is-safe").addClass("is-danger")
$("#input-password2").focus()
return;
} else if (password2 != password) {
$("#help-password2").text("비밀번호가 일치하지 않습니다.").removeClass("is-safe").addClass("is-danger")
$("#input-password2").focus()
return;
} else {
$("#help-password2").text("비밀번호가 일치합니다.").removeClass("is-danger").addClass("is-success")
}
$.ajax({
type: "POST",
url: "/sign_up/save",
data: {
username_give: username,
password_give: password
},
success: function (response) {
alert("회원가입을 축하드립니다!")
window.location.replace("/login")
}
});
}