2022-05-11

회원가입 버튼을 누르면

1.아이디 중복확인은 했는지
2.비밀번호가 정해진 규칙과 맞는지
3.비밀번호1과 비밀번호2가 동일한지

를 확인하고 모두 충족한다면

1.회원가입 완료 alert 출력
2.db에 입력값 저장
3.로그인창으로 이동

을 해준다

<!--html-->
<button class="level-item button is-sparta" onclick="sign_up()" >회원가입</button>
<!--클릭 시 sign_up() 실행-->

//js
function sign_up() {
//
            let username = $("#id").val()
            let password = $("#pw").val()
            let password2 = $("#pw2").val()
            //#id에 입력받은 값을 username에 넣어 사용할꺼야
            //#pw에 입력받은 값을 password 넣어 사용할꺼야
            //#pw2에 입력받은 값을 password2 넣어 사용할꺼야
            //아래부터 중복확인 했는지 판단하기
            if ($("#help-id").hasClass("is-danger")) {
            //#help-id"에서 .is-danger값을 찾아봐 있니? 있다면
                alert("아이디를 다시 확인해주세요.")
                //"아이디확인해"란 alert 출력
                return;
            } else if (!$("#help-id").hasClass("is-success")) {
            //.is-danger값은 없었구나 그런데 혹시 .is-success도 없니?
                alert("아이디 중복확인을 해주세요.")
                //그럼 너 중복확인 버튼 안누른거니까 다시누르고 와
                return;
            }
            if (password == "") {
            //만약 password에 담아온 pw값이 비어있는다면
                $("#help-password").text("비밀번호를 입력해주세요.").removeClass("is-safe").addClass("is-danger")
                //#help-password의 내용을 "비밀번호 입력해"란 내용으로 넣어서 알려줘
                //.is-safe를 빼주고
                //.is-danger를 넣어줘
                $("#pw").focus()
                return;
            } else if (!is_password(password)) {
            //비어있지는 않은데 is_password란 이름으로 정해둔 규칙 내용에 맞지 않는다면
                $("#help-password").text("비밀번호의 형식을 확인해주세요. 영문과 숫자 필수 포함, 특수문자(!@#$%^&*) 사용가능 8-20자").removeClass("is-safe").addClass("is-danger")
                //위처럼 내용을 바꾸어 알려줘
                $("#pw").focus()
                return
            } else {
            //그렇지 않다면(비어있지도 않고 들어온 값이 규칙에도 맞아 떨어진다면)
                $("#help-password").text("사용할 수 있는 비밀번호입니다.").removeClass("is-danger").addClass("is-success")
                //#help-password내용을 바꾸어 유저에게 사용가능함을 알려주고 
                //.is-success를 넣어서 컴퓨터에도 알려주자
            }
            //비밀번호는 중요하니까 한번 더 입력해서 확인해야겠지??
            if (password2 == "") {
            //비밀번호 확인창이 비어있다면 아래와 같이            
                $("#help-password2").text("비밀번호를 입력해주세요.").removeClass("is-safe").addClass("is-danger")
                $("#pw2").focus()
                return;
            } else if (password2 != password) {
            //비밀번호 확인창이 비어있진 않지만 비밀번호란에 입력한 값과 동일하지 않다면 아래와 같이
                $("#help-password2").text("비밀번호가 일치하지 않습니다.").removeClass("is-safe").addClass("is-danger")
                $("#pw2").focus()
                return;
            } else {
            //그렇지 않다면 (비어있지 않고, 비밀번호란과 비밀번호확인란에 다른 값이 들어있지 않다면)
                $("#help-password2").text("비밀번호가 일치합니다.").removeClass("is-danger").addClass("is-success")
                //#help-password2에 내용을 바꾸어 알려주고 여기에도 .is-seccess를 넣어 컴도 알게하자
            }
            //자 위를 다 통과했니? 그럼 서버에 입력값을 저장해달라고 요청할게
            $.ajax({
                type: "POST",
                url: "/sign_up/save",
                data: {
                    username_give: username,
                    password_give: password
                    //서버야 username은 username_give에 담고
                    //password는 password_give에 담아서 넘겨줄게
                },
                success: function (response) {
                //서버야 일다했구나
                    alert("회원가입을 축하드립니다!")
                    // 그럼 유저한테 다됐다고 alert창으로 알려줄게
                    window.location.replace("/login")
                    // 그리고 로그인창으로 이동할게
                }
            });
        }

#python
@app.route('/sign_up/save', methods=['POST'])
def sign_up():
    username_receive = request.form['username_give']
    #받아온 username_give를 username_receive에 담아서 사용할게
    password_receive = request.form['password_give']
    #받아온 password_give를 password_receive에 담아서 사용할게
    password_hash = hashlib.sha256(password_receive.encode('utf-8')).hexdigest()
    #비밀번호는 누가 추적하면 안되니까 해시함수로 암호화해서 password_hash에 담아서 사용할게
    doc = {
    #방을 하나 만들어서 아래내용으로 정리할게
        "username": username_receive,                               # 아이디
        "password": password_hash,                                  # 비밀번호
    }
    db.users.insert_one(doc)
    #우리서버에 그방을 저장해줄게
    return jsonify({'result': 'success'})
    #서버에서 할 일이 완료됨을 success담아 클라이언트에 전달함

아이디확인하는 부분으로 이동하기