회원가입 , 로그인 기능 구현

사전 강의를 다 듣고 나서 회원가입과 로그인 기능을 구현해 보기로 했다
인터넷을 찾아보고 어찌어찌 하긴 했다.
에러가 나긴 했지만 그래도 처음으로 혼자 찾아보면서 기능을 구현했다는 것에 의의를 두고 .. 매우 기쁨!!!!

1.회원가입

1. 회원정보를 받아온다 (ID, PW)
2. 회원정보 비밀번호를 해시함수로 암호화해서 데이터베이스에 저장한다.-hashlib

🖥 app.py

# id, pw 를 받아서, mongoDB에 저장
# 저장하기 전에, pw를 sha256 방법(= 단방향 암호화. 풀어볼 수 없음)으로 암호화 해서 저장한다.
@app.route("/api/register", methods=["POST"])
def api_register():
    id_receive = request.form['id_give']
    pw_receive = request.form['pw_give']

    pw_hash = hashlib.sha256(pw_receive.encode('utf-8')).hexdigest()

    db.register.insert_one({'id': id_receive, 'pw': pw_hash})

    return jsonify({'result': 'success','msg':'회원가입 완료!'})

Python hashlib - 문자열 해싱 라이브러리

• hashlib은 파이썬 라이브러리가 제공해주는 hash 함수이다.
• hashlib을 사용하기 위해선 import hashlib으로 라이브러리를 포함 시킨 후
• 어떤 방식으로 문자열을 해싱(암호화)시킬지 설정한다 - md5, sha256등(문자열을 암호화시키는 알고리즘의 종류)

🖥 index.html

function register() {
            let id = $('#id').val()
            let pw = $('#pw').val()
            $.ajax({
                type: 'POST',
                url: '/api/register',
                data: { id_give:id, pw_give:pw },
                success: function (response) {
                    alert(response['msg'])
                    window.location.reload()
                }
            });
        }

✅ 회원가입 완료 했을 때!

👉 mongodb에 들어온 모습 !

2.로그인

1. 사용자에게 id와 pw를 받아오고, 디비에 저장된 암호화된 값과 비교하기위해 똑같이 비밀번호를 해싱한다.

2. 디비에 사용자의 정보가 있으면 JWT 토큰을 발급한다.

3. jwt 토큰은 Json 형식이며, Playload 키 안에 사용자 정보가 담겨있다.

4. JWT 토큰을 암호화에서 브라우저에게 보낸다.

🖥 app.py

@app.route('/api/login', methods=['POST'])
def api_login():
    id_receive = request.form['id_give']
    pw_receive = request.form['pw_give']

    # 회원가입 처럼 pw를 암호화
    pw_hash = hashlib.sha256(pw_receive.encode('utf-8')).hexdigest()
    #id, 암호화된 pw를 가지고 해당 유저 찾기
    result = db.register.find_one({'id': id_receive, 'pw': pw_hash})

    #pw는 해쉬화 시킨 후 db속에 일치하는 데이터가 존재하면 result로 담아온다
    if result is not None:
        payload = {
            'id': id_receive,
            'exp': datetime.utcnow() + timedelta(seconds=60 * 60 * 24)  # 로그인 24시간 유지
        }
        token = jwt.encode(payload, SECRET_KEY, algorithm='HS256')
        #test
        return jsonify({'result': 'success', 'token': token,'msg':'로그인 성공!'})
    else :
        return jsonify({'result': 'fail', 'msg': '아이디/비밀번호가 일치하지 않습니다'})

🖥 index.html

function login() {
            let id = $('#id').val()
            let pw = $('#pw').val()
            $.ajax({
                type: 'POST',
                url: '/api/login',
                data: {id_give: id, pw_give:pw},
                success: function (response) {
                    if (response['result'] == 'success'){
                        $.cookie('mytoken',response['token']);
                        alert(response['msg'])
                        window.location.href='/login'
                    } else if (id === '' || pw === '') {
                        alert('아이디 또는 비밀번호를 입력해주세요')
                        window.location.reload()
                     } else {
                        alert(response['msg'])
                    }
                }
            });
        }

✅ 저장된 회원정보와 일치하지 않을 때 알림창

✅ 로그인 성공

쿠키로 진행을 하면서 에러가 발생했다.
에러 해결방안 을 참조!