BBalibaba_완성

링크텍스트 발리바바 바로가기.

2022.07.17 WIL 옮겨오기 

중고 물품거래 웹 사이트 개발 프로젝트가 끝났다.
프로젝트 이름은 BBalibaba, <빨리바바>

크으---이름 잘 지은듯 하다.

원래 더 일찍 올렸어야 했는데, 사알짝 늑장부린 감이 없지않아있지않아 없지않아 있는듯 하다..

내가 담당한 파트는 로그인 HTML 구성 및 JWT방식을 활용한 로그인 기능 구현이었으며,
전반적인 웹 디자인 구성 및 통일은 미적 감각이 있으신 팀원 분들이 도와주셨다.

직전 포스팅에서 설명했지만, 다시 한번 로그인 방식에 대해 정리 들어간다

JWT로그인 방식

1. 사용자는 회원가입을 위해 회원가입 창에서 조건에 맞는 정보를 입력한다.

이 중복 확인 조건 구현도 시간 너무 잡아먹음..어쨌든 구현 성공했다!

        <script>
            function btnActive() {
                const target = document.getElementById('dub-ck');
                target.disabled = false;
            }

            function is_nickname(asValue) {
                var regExp = /^(?=.*[a-zA-Z])[-a-zA-Z0-9_.]{3,10}$/;
                return regExp.test(asValue);
            }

            function check_dup() {

                let username = $("#set_id").val()

                if (username == "") {
                    alert("아이디를 입력해주세요.")
                }
                else if (!is_nickname(username)) {
                    alert('영문자,숫자를 조합해서 3자 이상 10자 미만으로 입력해주세요.')
                } else {
                    $.ajax({
                        type: "POST",
                        url: "/sign_up/check_dup",
                        data: {
                            username_give: username
                        },
                        success: function (response) {
                            if (response["exists"] == true) {
                                alert('이미 존재하는 ID입니다.')
                                return
                            } else if (response["exists"] == false) {
                                alert('사용 가능한 ID입니다.')
                                btnActive()
                                {
                                    const target = document.getElementById('signup_btn');
                                    target.disabled = false;
                                }
                                document.getElementById('set_id').readOnly = true;
                                return;
                            }
                        }
                    });
                }
            }
        </script>

대충 요렇게 짰다.
입력값이 조건에 맞을 경우, 사용자가 입력한 값을 디비에 저장한다.

여기서!

password 값이 그대로 DB에 들어가게 되면 악용의 위험이 생기기에, 해시함수를 이용해 password 값을 암호화 한다.

그러면 내가 1234를 비밀변호로 입력해도 "qw1231@#!@#qw!23!qqsDsdFS342652qW" 이라고 들어간다.

이후, 사용자 아이디와 로그인 유지시간을 세팅해 토큰 값에 저장한 다음 암호화한다.

2. 로그인은 디비에 저장된 정보화 비교할 수 있어야 한다.

그래서 내가 친 패스워드를 암호화 하여, 디비에 입력된 값과 비교하여, 맞는 지를 판단 한 후 로그인 기능을 수행한다.

즉!

입력값 1234 -> "qw1231@#!@#qw!23!qqsDsdFS342652qW"
디비 저장값 "qw1231@#!@#qw!23!qqsDsdFS342652qW" 를 비교하여, 맞으면 로그 인시켜준다.

3. 로그인이 완료되면, 디비에서 암호화된 토큰 값을 복호화하여 웹 상에 뿌린다.

로그인 한 사용자에게 주어지는 로그인 인증 같은 것으로 이해했다.

느낀 점

로그인 기능구현이 재미있어 보여서 한다고 했는데, 와.. 이거 내가 짊어지기에 엄청난 일이었구나를 생각했다. 파놓은 라우터는 말을 안듣고, 한시간 두시간 고민해서 해결하고 나면 다른곳에서 말썽이고, Git에 업로드는 안되고...특히 Git 이거 텍스트메모 올릴땐 재밌었는데 코드 올리려니 좀 어려웠다.