WIL-4

<이 주의 학습>

이번주는 프로젝트를 진행했다.

내가 맡은 부분은 로그인,회원가입,카카오 로그인.
프로젝트 진행 전 들었던 수업에서 로그인,회원가입,로그아웃 부분이 있었기 때문에
수월하다고 생각했고 빨리 끝나면 다른것도 만져보고 싶다고 생각했는데...
카카오 로그인에서 막혔다. 아무리 찾아봐도 로그인까지만 알려주고 어떤 방법으로 서비스하는 사이트에 연결하는 지 안나와있었다... 공식문서를 보라는데.. 분명 한글로 적혀있는데 이해 할 수가 없었다.. ㅠㅠㅠ
백엔드를 배우는 입장에서 REST api를 활용하고 싶었는데 Javascript를 활용해서 만들게 되었다.

Javascript를 활용한 카카오 로그인.

젤 위에 window.Kakao.init('발급받은 자바스크립트 키') 를 작성해줘야 한다.

function kakaoLogin() {
    window.Kakao.Auth.login({
        scope: 'profile_nickname,profile_image,account_email,gender',
        success: function (authObj) {
            console.log(authObj);
            window.Kakao.API.request({
                url: '/v2/user/me',
                success: res => {
                    let accesstoken = Kakao.Auth.getAccessToken()
                    const kakao_account = res.kakao_account;
                    console.log(kakao_account);
                    let nickname = kakao_account['profile']['nickname']
                    let email = kakao_account['email']
                    let gender = kakao_account['gender']
                    let img = kakao_account['profile']['thumbnail_image_url']
                    let username = kakao_account['email']
                    console.log(nickname,email,gender)
                    console.log(accesstoken);
                    $.ajax({
                        type: "POST",
                        url: "/kakao_sign_in",
                        data: {
                            username_give: email,
                            password_give: email,
                            nickname_give: nickname,
                            img_give: img
                        },
                        success: function (response) {
                            if (response['result'] == 'success') {
                                $.cookie('mytoken', response['token'], {path: '/'});
                                alert(response['msg'])
                                kakaoLogout()
                                window.location.replace(`/user/${username}`)
                            } else {
                                alert(response['msg'])
                            }
                        }
                    });
                }
            });
        }
    });
}

자바스크립트로 카카오와 연결되는 것을 확인 한 후
카카오에서 받아온 닉네임,이메일,프로필사진을 다시 우리 DB에 넣는 ajax를 실행시켰다.
그게 성공을 하면

카카오 로그인 app/py

@app.route('/kakao_sign_in', methods=['POST'])
def kakao_sign_in():
    username_receive = request.form['username_give']
    password_receive = request.form['password_give']
    nickname_receive = request.form['nickname_give']
    img_receive = request.form['img_give']
    password = password_receive.split('@')[0]


    pw_hash = hashlib.sha256(password.encode('utf-8')).hexdigest()
    result = db.users.find_one({'username': username_receive, 'password': pw_hash})

    if result is not None:
        payload = {
            'id': username_receive,
            'exp': datetime.utcnow() + timedelta(seconds=60 * 60 * 24)
        }
        token = jwt.encode(payload, SECRET_KEY, algorithm='HS256')

        return jsonify({'result': 'success', 'token': token, 'msg': '카카오 로그인 성공'})
    # 카카오로 로그인이 처음이라면 DB에 저장해서 회원가입을 먼저 시킨다.
    else:
        doc = {
            "username": username_receive,
            "password": pw_hash,
            "profile_pic": f'{img_receive}',
            "profile_pic_real": f'{img_receive}',
            "profile_info": "",
            "nickname": nickname_receive,
            "address": ''
        }

        db.users.insert_one(doc)

        # DB 업데이트 이후 토큰 발행
        payload = {
            'id': username_receive,
            'exp': datetime.utcnow() + timedelta(seconds=60 * 60 * 24)
        }

        token = jwt.encode(payload, SECRET_KEY, algorithm='HS256')

        return jsonify({'result': 'success', 'token': token, 'msg': f'카카오 회원가입 성공\n초기 비밀번호는 "{password}"입니다.\n비밀번호를 꼭 변경해주세요!'})

ajax로 보낸 데이터를 받아서
아이디 = 이메일
비밀번호 = 아이디에서 @뒤로 다 날린 앞부분
닉네임은 = 닉네임
이런 식으로 코드를 만들어서

DB에서 이메일을 찾은 후
1. 이미 있다면 로그인을 바로 진행시키고
2. 없다면 DB에 저장한 후 토큰을 발행시켜서 로그인 시켜라!

라는 코드를 만들었다.

그 와중에 카카오에서 보내주는 프로필사진의 형태가 http 뭐시기뭐시~~
라서 그걸 어떻게 처리하지~ 하다가
구글링해본 결과 url을 받아서 save_path를 지정하고 photo를 사용해서 사진을 저장하는 방법이 있어서 구현!! 완벽하게 들어갔다
하지만 문제가 발생...

AWS랑 연동 시키고 나니 안뜨는게 아닌가...??
그래서 사진 파일을 s3에 올리고 싶어서 구글링을 겁나게 했는데..... 안나온다... ㅠㅠㅠ
바로 팀원들과 상의한 결과
어처피 http로 받아오면 그 url을 바로 넘겨주면 될 것 같은데요???

왜 나는 처음부터 그 생각을 못했을까... 하고 바로 적용한 결과가 위의 코드에서
f'{img_receive}'
이 부분이다

하고 나서 생각하니까.. 아닌데.. 저것도 해봤던것 같은데... 라는 생각이 들었으나
아 몰랑 그때는 저게 안됐거나 내가 뭘 잘못적었겠지~ 하고 치웠다 ㅎㅎ

간단하게 생각할 수록 더 좋은 코드가 나올때도 있다는 걸 깨달았고
코드를 읽기도 훨씬 쉬워져서 만족스럽다. 다른 팀원들이 만든 코드에 비해서는 아무짝에도 쓸모없지만.. ㅠㅠ 다음엔 진짜 더 많은 기능을 만들어야겠다고 다짐했다!!

이번주는 시간이 많이 남는다고 생각했는데 마지막 배포 후 수정해야 하는 것들이 생겨서 전날 늦게까지 작업을 했다.
제출도 3분전쯤에 해서 시간에 쫓겨서 너무 아쉬웠다... 분명 기능들은 빠르게 잘 만들었던 것 같은데 ㅠㅠㅠ 배포는 역시 너무 힘들고 AWS 잘 해주신 팀원들한테 감사하다!!