1편은 아래에 있습니다 !!
https://heokknkn.tistory.com/57
그럼 바로 시작하겠습니다 !
자 전부 동의 해주시구요 !
자 ! 그러면 카카오에서의 설정과 프론트쪽은 거의 다 진행했습니다 !!
저번에 여기까지 했습니다 !
그럼 바로 백엔드로 가기전에 리액트 부분에서 조금만 손 좀 봅시다 !
딱 필요한 부분만 가져와서 설명하겠습니다 ! 깃허브 로그인 했을 때와 비슷할겁니다 !
먼저 저희는 code가 필요합니다 ! 어떻게 가지고 올까요?
useLocation()와 URLSearchParams, code를 이용해서 손쉽게 code를 빼올 수 있습니다.
code를 가져오는 방법은 다양하지만 저는 이 방법으로 가져왔어요 !!
import { useLocation, useNavigate } from "react-router";
export default function GithubConfirm() {
const { search } = useLocation();
const confirmLogin = async () => {
const params = new URLSearchParams(search);
const code = params.get("code");
if (code) {
mutation.mutate(code);
}
};
useEffect(() => {
confirmLogin();
}, []);
}mutationFn (variables: TVariables) => Promise<TData>
Required 필수 !
비동기 작업을 수행하고 프로미스를 반환하는 함수입니다 ! (쉽게 말해 api 요청하는 함수)
이정도만 알고 넘어가주세요 이번편에서도요 !!
혹시라도 위에처럼 안하시거나 그러시다면 그냥 비동기를 이용해서 서버단으로 request를 해서 state를 관리하셔도 괜찮습니다 !!
또한 useQueryClient를 이용해서 useMuation에서 성공을 하면 refetchQueryies를 해줘서 서버단에서 가져온 정보를 바로 넣어줍니당 ! 또한 성공하고 나서는 redirect도 시켜주죠 !!
다음에 사용 방법에 대해서 다뤄보려고 하는데 혹시라도 지금 당장 위에 부분은 이해 안가시면 댓글 달아주세요 !!!!
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { kakaoLogIn } from "../api";
import { useToast } from "@chakra-ui/react";
import { useForm } from "react-hook-form";
import { useNavigate } from "react-router";
export default function KakaoConfirm() {
const toast = useToast();
const queryClient = useQueryClient();
const navigate = useNavigate();
const { reset } = useForm();
const mutation = useMutation(kakaoLogIn, {
onSuccess: (data) => {
toast({
status: "success",
title: " Welcome!!!",
description: "Happy to have you back!!",
position: "bottom-right",
});
reset();
queryClient.refetchQueries(["me"]);
navigate("/");
},
onError: (error) => {
console.log("error");
toast({
status: "error",
title: "Login fail",
description: "Check your kakao information",
position: "bottom-right",
});
},
});
}
kakaoLogIn
export const kakaoLogIn = (code: string) => {
return axios
.post(`http://127.0.0.1:8000/api/v1/users/kakao`, { code })
.then((response) => response.status);
};
자 여기까지가 프론트입니당 !!
그러면 백엔드로 넘어가봅시다 !
먼저 저렇게 url하나 만들어주시구요 !!! 전 참고로 ! http://127.0.0.1:8000/api/v1/users/kakao 이런식입니당 !
그리고 카카오 공식문서를 봐야합니다 !
https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api
이제는 받아온 인카 코드로 토큰을 받아와야하죠 !
먼저 전체적인 코드를 봐볼까요??
def post(self, request):
try:
code = request.data.get("code") # 프론트에서 보내준 code로 token을 구해와야한다 !!
access_token = requests.post(
"https://kauth.kakao.com/oauth/token",
headers={"Content-Type": "application/x-www-form-urlencoded"},
data={
"grant_type": "authorization_code",
"client_id": "815e7ed5f95d86a621fd9d130cccec31",
"redirect_uri": "http://127.0.0.1:3000/social/kakao",
"code": code
},
)
access_token = access_token.json().get("access_token")
# 성공 ! 그 다음에는 우린 token 이걸 가지고 kakao api와 대화가 가능하게 됐다 ! 즉 밑에서 user획득 가능
# 밑에는 기본적인 user data
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()
kakao_account = user_data.get("kakao_account")
profile = kakao_account.get("profile")
try:
user = User.objects.get(email=kakao_account.get("email"))
login(request, user)
return Response(status=status.HTTP_200_OK)
except User.DoesNotExist:
user = User.objects.create(
email=kakao_account.get("email"),
username=profile.get("nickname"),
name=profile.get("nickname"),
avatar=profile.get("profile_image_url"),
)
user.set_unusable_password() # kakao로그인이니까 No password!
user.save()
login(request, user)
return Response(status=status.HTTP_200_OK)
except Exception:
return Response(status=status.HTTP_400_BAD_REQUEST)
자 ! 차근찬근 알아봅시다 !
우선 !! 인가 코드로 token을 구해와야합니다 !!!
headers와 Parameter은 밑에 공식문서에서 나온대로 보내줘야합니다 !!!
그래서 아래와 같이 추가를 했습니다 ^^
access_token = requests.post(
"https://kauth.kakao.com/oauth/token",
headers={"Content-Type": "application/x-www-form-urlencoded"},
data={
"grant_type": "authorization_code",
"client_id": "815e7ed5f95d86a621fd9d130cccec31",
"redirect_uri": "http://127.0.0.1:3000/social/kakao",
"code": code
},
)
공식문서 참고 !!!
이렇게 하면 저희는 이제 카카오와 통신을 할 수 있게 된겁니다 !!!!
그래서 「"https://kapi.kakao.com/v2/user/me"」를 통해서 유저의 정보를 가지고 올 수 있죠 ^^
깃허브 로그인과는 달리 따로 email을 찾아주는 코드를 작성안해도 괜찮아요 !
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를 받아옵니다 !!!!
한번 print해보세요 !!
나머지 코드는 일방적인 if로 유저데이트를 가지고 판별해서 회원가입 or 로그인하는 로직입니다 !
드디어 끝입니다 !!!
그럼 결과를 봐야겠죠?? ( 도중에 잘 안되시면 다시 한번 로그인 버튼부터 눌러보세요 !! )
저렇게 성공하고 나면 카카오의 이미지도 사용 할 수 있습니다 !!!
자 이렇게 손쉽게 카카오로도 로그인을 구현해봤습니다 !!!!
정말 편하게 로그인을 구현 할 수 있으니 자신의 페이지에도 한번 넣어봅시다 !!
마지막으로 정리만 하고 넘어갑시당 !!!
첫번째 https://kauth.kakao.com/oauth/authorize여기서 client_id와 redirect_uri를 사용해서 1회용성 code를 가져와야합니다 !
두번째 서버에서 https://kauth.kakao.com/oauth/token 여기로 code를 이용해서 token을 구해야합니다 !
세번째 https://kapi.kakao.com/v2/user/meoken을 가지고 user_date 및 이메일을 구해서 사용하세요 !
자 ! 이제 손쉽게 자신의 사이트에서도 gibhub로그인을 사용해보자구요 !!! ^^
'IT관련 > Python' 카테고리의 다른 글
| Django와 React를 이용해서 카카오(kakao) 로그인을 해봅시다 !(OAuth) 1편 (0) | 2023.01.23 |
|---|---|
| Django와 React를 이용해서 github 로그인을 해봅시다 !(OAuth) 2편 (0) | 2023.01.14 |
| Django와 React를 이용해서 github 로그인을 해봅시다 !(OAuth) 1편 (0) | 2023.01.07 |
| [Django]drf의 IsAuthenticatedOrReadOnly와 IsAuthenticated의 차이점에 대해서 알아봅시다 ! (0) | 2022.12.12 |
| [Django] ModelSerializer vs Serializer의 차이점과 사용법에 대해서 알아봅시다 ! (0) | 2022.11.28 |
