display:none 이란(사실아님)

위는 기본적인 카카오 로그인이 진행되는 구조이다.

카카오 로그인은 로그인을 한다고 바로 유저의 정보가 오는게 아니라

로그인을 하면 code값이 오고 이 code값을 보내면 token이 오고

이 토큰값으로 get요청을 보내면 유저의 정보가 오게됩니다

 

위를 구현하기위해

document.getElementById('kakao').addEventListener('click', async function(){
    const kakao_id = '055c93384e5e1b3418c5cb85bafa4b5d' 
    const redirect_uri = 'http://127.0.0.1:5500/html/main.html'
    window.location.href = `https://kauth.kakao.com/oauth/authorize?
    client_id=${kakao_id}&redirect_uri=${redirect_uri}&response_type=code`
})

위와 같은 코드를 통해서 카카오 로그인 페이지로 진행을 한 후에 redirecturi에 있는 코드인

async function kakaoLoginApi(kakao_code) {
    const response = await fetch(`http://127.0.0.1:8000/users/kakao/`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({"code":kakao_code}),
    })

post요청을 통해 백으로 fetch 코드를 작성했습니다

그 후 보낸 데이터를

def post(self,request):
        code = request.data.get('code')
        access_token = requests.post(
            KAKAO_URL,
            headers={"Content-Type":"application/x-www-form-urlencoded"},
            data={
                "grant_type":"authorization_code",
                "client_id":REST_API_KEY,
                "redirect_uri":"http://127.0.0.1:5500/html/main.html",
                "code":code,
            },
        )

requset로 post요청을 보내서 받아온값을 access_token에 저장을 하고

        access_token = access_token.json().get("access_token")
        user_data = requests.get(
                "https://kapi.kakao.com/v2/user/me",
                headers={
                    "Authorization": f"Bearer {access_token}",
                    "Content-type": "application/x-www-form-urlencoded;charset=utf-8",
                },
            )
        user_data = user_data.json()

이 토큰을 이용해서 유저의 데이터를 받아왔습니다