내일배움캠프 16일차

Drumj·2022년 5월 10일
0

내일배움캠프

목록 보기
16/80

<오늘의 학습>

오늘은 프로젝트 3일차 이제 카카오 로그인은 어느정도 마무리 된 것 같다

다들 REST Api를 사용해서 카카오 로그인을 구현한 것 같은데
아직 그럴 정도의 지식도 없고 아무리 카카오 문서를 읽어봐도 이해가 되지 않기에
Javascript로 구현을 해봤다.. 뭔가 눈가리고 아웅의 느낌이 강하게 들지만
지금의 내가 할 수 있는 최선이라고 생각하고 기록을 남긴다.

로그인

window.Kakao.init('본인 javascript 키 넣기');

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']['profile_image_url']
                    console.log(nickname,email,gender)
                    console.log(accesstoken);
                    kakaoLogout();
                    $.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'])
                            }
                        }
                    });
                }
            });
        }
    });
}

로그인 후에 카카오에서 받은 데이터를 ajax로 보내서 내 db에 저장했다
문서도 읽어보고 다른 캠퍼분에게도 물어봤는데 카카오에서 주는 토큰을 사용하기 보다
내 서비스 토큰을 다시 발행해서 하는 걸 권장한다고 해서 그 방식으로 코드를 짜봤다.
(근데 이렇게 하는 거 맞나..?)

팀원들과 상의 후에 카카오 로그인의 경우 바로 프로필을 수정할 수 있게 window.location.replace(/user/${username}) 프로필 수정 페이지로 바로 연결 시켜줬당.
(친절해...)

그 이후 카카오 access token을 제거하기 위해

로그아웃

function kakaoLogout() {
    if (!Kakao.Auth.getAccessToken()) {
        console.log('Not logged in.')
        return
    }
    Kakao.Auth.logout(function () {
        console.log('logout ok\naccess token -> ' + Kakao.Auth.getAccessToken())
        console.log(Kakao.Auth.getAccessToken())

    })
}

로그아웃 코드를 짰다
처음에는 연결끊기 코드를 짜서 엥????? 왜 동의부터 다시 하는 거지 했는데 코드를 잘 못 본거였당.. ㅋㅋ

위 코드를 사용하면 accesstoken을 없애준다고 했다. 카카오 공식 문서에 그렇게 적혀있었으니 맞겠지... 코드가 없어진지 어떻게 확인 할까 하다가 console로 두번이나 찍어봤는데 null이 나오길래 아~ 없어졌구나~~ 하고 치웠다..ㅋㅋㅋㅋㅋ

코드에 태클은 언제든지 환영이며 반박 시 그 말이 다 맞다.
나는 이제 16일차 코린이니까

서버 측 로그인

@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']

    pw_hash = hashlib.sha256(password_receive.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' : '카카오 로그인 성공\n초기 비밀번호...변경하셨죠..?ㅠㅠㅠ'})
        
    # 카카오로 로그인이 처음이라면 DB에 저장해서 회원가입을 먼저 시킨다.
    else:
        doc = {
            "username": username_receive,
            "password": pw_hash,
            "profile_name": username_receive,
            "profile_pic": img_receive,
            "profile_pic_real": "profile_pics/profile_placeholder.png",
            "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'아이디와 초기 비밀번호는 "{username_receive}"입니다!\n개인정보를 위해 반드시 변경해주세요!'})

카카오로 로그인을 하게 되면 우선 아이디가 DB에 있는지 확인후에 있다면 바로 토큰을 발행해주고 우리 사이트로 로그인을 할 수 있게 해준다.
없다면 데이터를 받아서 DB에 저장 시킨 후(회원가입) 토큰을 발행해준다.
근데 이렇게 하는걸 권장한다고 하던데 타인의 데이터를 맘대로 저장시켜서 막 회원가입 시키고 해도 되는 건가..?

팀원들에게도 말했지만 우선 임시방편 느낌으로 이렇게 진행하고 다음에 더 자세히 알게되면 바꾸자고 했다.. ㅠㅠ 팀원들은 다 천사다.. 멍청하다고 한마디도 안한다! 헤헤


ㅋㅋㅋㅋㅋㅋㅋ 뭐 이것저것 뚝딱뚝딱 했더니 메일 겁나 왔네;;;

--오늘의 한 줄--

머리가 어느정도 컸나?? 짱구를 굴릴 줄 알게 됐나??? 짱구는 못 말려

0개의 댓글