인스타UI클론 팀 프로젝트 ! 22.05.09

인스타 UI 클론 진행중이다. 벌써 한주가 다되어 가는데 이제 내일까지만 프로젝트를 하면 수요일날 발표이다

오늘 오전시간은 어제 구현한 jwt 토큰을 이용한 로그인 코드를 조금 정리하였고 꺠지는 css나 전체적인 코드를 조금씩 정리를 해보았다.

우선 세션으로 하던 로그인 방식을 쿠키를 이용한 방식으로 바꾸었다. 어제 이 작업을 하다가 조금 애를 먹었는데 그래도 우선 구현은 성공적으로 하였다!.
타임어택테스트 에서 거의 구현을 못했던 방식이라 개인적으로도 도전해보고 싶었다.

<button class="login_btn" id="login">로그인</button>

onclick 을 통해서 login 함수를 호출한다

function login() {
        let uid = $('#uid').val()
        let pwd = $('#pwd').val()

        $.ajax({
            type: "POST",
            url: "/login_check",
            data: {uid_give:uid, pwd_give:pwd},
            success: function (response) {
                if (response['result'] == 'success') {
                    $.cookie('mytoken', response['token'], {path:'/'});
                    window.location.href = '/'
                } else {

                }
            },
        });
    }

• 우선 id값 을 이용해서 input박스들의 value 값을 받아온다.
  post 형식으로 인해서 서버에 값을 보내준다. date는 json형식으로 보내주고 cookie를 쥐어 보내준다.
• 처음 적용방법을 몰라 애를좀 먹었던 것 같다. url설정부터, onclick 함수, 호출법 등등 여러가지가 조금 햇갈렸던 부분이 였다.

@app.route('/')
def home():
    token_receive = request.cookies.get('mytoken')
    try:
        payload = jwt.decode(token_receive, SECRET_KEY, algorithms=['HS256'])
        user_info = db.user.find_one({"uid": payload['uid']})
        print(user_info['uid'])
        print(user_info['name'])
        return render_template('feed.html')

    except jwt.ExpiredSignatureError:
        return redirect(url_for("login"))
    except jwt.exceptions.DecodeError:
        return redirect(url_for("login"))

• API 처음에는, 우선 홈에서 쿠키값을 조회한다. 쿠기값을 불러오고, 쓸수있게 디코딩 try를 시도하고, 없으면 except 로 넘어간다.

@app.route('/login_check', methods=['POST'])
def login_check():
    uid_receive = request.form['uid_give']
    pwd_receive = request.form['pwd_give']

    pwd_hash = hashlib.sha256(pwd_receive.encode('utf-8')).hexdigest()
    result = db.user.find_one({
        'uid': uid_receive,
        'pwd': pwd_hash
    })

    if result is not None:
        payload = {
            'uid': uid_receive,
            'exp': datetime.datetime.utcnow() + datetime.timedelta(minutes=10)
        }
        token = jwt.encode(payload, SECRET_KEY, algorithm='HS256')
        print("token =", end=""), print(token)
        return jsonify({'result': 'success', 'token': token})

    else:
        return jsonify({'result': 'fail', 'msg': 'wrong'})

• 로그인 부분 API 이다. 암호는 hashlib 를 통해서 암호화를 시켰다. result 를 이용해 success 가 되면 로그인에 성공을 한다.

어찌어찌 구현을 하긴 했지만, 솔직히 100% 이해가 가진 않는다. 조금은 헷갈리는 부분도 있기도 하고 내가 이해한 방식이 맞나 싶기도 하지만, 계속 구글링을 통해서 어떤 방식으로 진행이 되는지 이해할 예정이다. 역시 공부가 더 필요한 부분인 것 같다.

function logout() {
    $.removeCookie('mytoken', {path: '/'});
    window.location.href = '/login';
}

로그아웃은 간단하게 구현이 가능하다. 쿠키값만 삭제해 주면 된다.
처음에 로그아웃 기능이 잘 먹히지 않아 여러 구글링을 해보았지만, jwt토근의 값은 변경하기가 어렵다고 한다
그래서 토큰의 유효시간을 이용해 하는 방법도 있고, 여러방법이 있다고 하지만 코드가 많이 복잡해 진다고 한다.
적용이 안됬던 원인도 함수호출의 오루였던 것 같다.

내일 도전은

• 팔로우 기능을 도전해볼 것이다.
• 아직도 어떻게 해야할지 감이 너무 안온다.
• button 의 vlaue 값을 받아와서 post 로 서버에 넘긴다음에 db에 있는 uid와 연동을 시켜볼라고 하는데 우선 오늘 밤시간에는 실패를 했다. 원인이 계속해서 key error 가 난다...................
• button 의 vlaue 값을 받는 다른 방법이 있는지 찾아봐야겠다. input 박스처럼 val이 받아지지 않는 것 같다.
• 내일 하루동안 시도할 수 있는 모든것을 시도해보자.