[웹프로그래밍] 로그인,회원가입

Sweeter

👉해시함수

회원가입

@app.route('/api/register', methods=['POST'])
def api_register():
	id = request.form['id_give']
    pw = request.form['pw_give']
    nickname = request.form['nickname_give']
    
    pw_hash = hashlib.sha256(pw.encode('utf-8')).hexdigest()
    
    db.user.insert_one({'id':id_receive, 'pw':pw_hash, 'nick':nickname_receive)})

return jsonify({'result':'success'})

• 패스워드를 그냥 저장하지 않고,
  hashlib.sha256(pw.encode('utf-8-)).hexidgest() 코드를 통해 암호화하여 DB에 저장

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

function is_password(asValue) {
  var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z!@#$%^&*]{8,20}$/;
  return regExp.test(asValue);
}

• 아이디 / 비밀번호 정규표현식

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")

        }
    });
}

• 아이디 중복확인 클라이언트

로그인

👉JWT(Json Web Token)

Json 객체를 안정성있게 전달하는 웹표준방식 / 유저를 인증하고 식별하기 위한 토큰(Token)기반 인증.

토큰은 세션과 달리 클라이언트에 저장되기 때문에 메모리나 스토리지 등을 통해 세션을 관리했던 서버의 부담을 덜어준다.

JWT를 사용하면 RESTful과 같은 stateless 환경에서 사용자 데이터를 주고 받을 수 있게된다. JWT는 토큰을 클라이언트에 저장하고 요청시 단순히 HTTP 헤더에 첨부하는 것만으로 단순히 데이터를 요청하고 받아올 수 있다.

---

1. 클라이언트가 사용자의 아이디, 패스워드를 통해 웹서비스 인증
2. 서버에서 서명된 JWT를 생성하여 클라이언트 응답으로 돌려주기
3. 클라이언트가 서버에 데이터를 추가적으로 요구할 때 JWT를 HTTP Header에 첨부
4. 서버에서 클라이언트로부터 온 JWT를 검증

---

👉JWT의 구조

Header, Payload, Signature 로 구성
Header : JWT에서 사용할 타입과 해시 알고리즘의 종류
Payload : 서버에서 첨부한 사용자 권한 정보와 데이터
Signature : Header,Payload를 Base64 URL-safe Encode를 한 후, Header에 명시된 함수를 적용하고, 개인키로 서명한 전자서명

@app.route('/api/login', methods=['POST'])
def api_login()"
	id = request.form['id_give']
    pw = request.from['pw_give']
    
    pw_hash = hashlib.sha256(pw.encode('utf-8')).hexdigest() 
    
    #Id, 암호화된PW로 해당 유저 찾기
    result = db.user.find_one({'id':id,'pw':pw_hash})
    
    #찾으면 JWT 토큰을 만들어서 발급
 	# JWT 토큰에는, payload와 시크릿키 필요
    # 시크릿키로 토큰을 디코딩
    # payload에는 id값과, exp(만료시간)을 담아보냄
    
    if result is not None:
    	payload = {
    		'id'=id
            'exp'=datetime.datetime.utcnow() + datetime.timedelta(secondes=5)
            }
            
		token = jwt.encode(payload, SECRET_KEY, algorithm='HS256')
        
        #토큰전송
        return jsonify({'result':'success', 'token':token})

로그아웃