[RESUMAI] 6. 서비스 개발 시작 - DRF 카카오 소셜로그인, 이것만 보면 한번에 끝!!

💻 프로젝트/🎓 RESUMAI

[RESUMAI] 6. 서비스 개발 시작 - DRF 카카오 소셜로그인, 이것만 보면 한번에 끝!!

장영준 2024. 5. 25. 17:37

지난번까지 데모를 마치고, 이제 제대로 RESUMAI 서비스를 개발하기 시작했다. 핵심 아이디어는 이전에 데모에서 보여준 아이디어로, 백엔드 개발을 본격적으로 시작하게 되었다.

본 프로젝트는 Django Rest Framework (DRF)로 개발하였으며, 프론트엔드는 React를 사용했다. (나는 백엔드 개발만 맡았다.)

본 글은 DRF로 카카오 소셜로그인을 구현하며 겪었던 어려움을 모두 담았다.

아마 DRF로 처음 소셜로그인을 개발해보려는 사람들도 본 글만 보면 원하는 기능을 모두 구현할 수 있을 것이다 !!

1. Models

카카오 로그인을 구현하기에 앞서 먼저 user model을 정의해야 한다. 사실 이 model은 프로젝트마다 다르기 때문에, 기본적인 것들을 제외하면 개발자가 따로 customize 해야 한다.

베이스가 되는 유저 모델은 다음 글을 참고해보면 좋다.

1–1. 카카오 비즈앱 등록

처음에 나는 카카오 로그인 시, 비즈니스 계정으로 등록이 안되어 있으면 이메일을 반환받지 못한다는 정보를 듣고, 정말 많은 고민을 했었다. 그래서 처음에는 oid(카카오에서 반환하는 유저 id)를 고유 필드로 삼아야 하나? 라는 고민을 하고, 실제로 그렇게 구현도 했었다.

그러나, 서칭 끝에 개인개발자 비즈 앱 전환을 통해 이메일을 반환받을 수 있다는 정보를 알게 되어, 바로 비즈앱 전환을 신청했다. (비즈앱 전환은 그냥 카카오 디벨로퍼스 홈페이지에서 신청하면 된다.)

1–2. model 정의

먼저, 내 프로젝트의 user ERD는 다음과 같았다.

유저 정보를 크게 저장할 것이 없어서..생각보다 별로 넣을 게 없었다..ㅎㅎ

그래서 먼저 python manage.py startapp accounts 명령어를 통해 accounts 앱을 만들고, 그 안의 models.py에 다음과 같이 정의했다.

class CustomUser(AbstractBaseUser, PermissionsMixin):
    email = models.EmailField(unique=True)
    username = models.CharField(max_length=100, unique=False)  # username 필드
    kakao_oid = models.BigIntegerField(
        null=True, unique=True, blank=False
    )  # 카카오 user_id

    position = models.CharField(max_length=100, null=True, blank=True)
    profile_image = models.URLField(max_length=200, blank=True)

    is_staff = models.BooleanField(default=False)  # 슈퍼유저 권한
    is_superuser = models.BooleanField(default=False)
    is_active = models.BooleanField(default=True)  # 계정 활성화 상태
    created_at = models.DateTimeField(auto_now_add=True)

    USERNAME_FIELD = "email"
    REQUIRED_FIELDS = []

    objects = CustomUserManager()

    def save(self, *args, **kwargs):

        super().save(*args, **kwargs)

    def __str__(self):
        return self.email

중간에 CutomUserManager 라는 manager가 있는데, 이는 managers.py에 다음과 같이 작성했다.

class CustomUserManager(BaseUserManager):
    def create_user(self, email, password=None, **extra_fields):
        if not email:
            raise ValueError("이메일 필드가 작성되어야 합니다.")
        email = self.normalize_email(email)
        user = self.model(email=email, **extra_fields)
        user.set_password(password)
        user.save(using=self._db)
        return user

    def create_superuser(self, email, password=None, **extra_fields):
        extra_fields.setdefault("is_staff", True)
        extra_fields.setdefault("is_superuser", True)
        return self.create_user(email, password, **extra_fields)

이 manager의 역할은 유저 및 슈퍼유저를 만들 때 권한을 부여하고, 반드시 필요한 필드가 있다면 해당 필드를 작성해야 한다고 경고하는 역할이다.

이렇게 작성했으면, python manage.py makemigrations && migrate 를 통해 유저 모델을 만들 수 있다.

2. 인증 로직

이렇게 user model을 정의한 후에는, 인증 로직에 대해 알아야 다음 단계로 진행할 수 있다.

먼저, 아주 잘 알려진 카카오 인증 로그인 로직 그림을 한번 보면,

간략하게 말해 로직을 다음과 같이 요약할 수 있다.

클라이언트에서 카카오 아이디와 비밀번호를 작성하여 인가 코드를 받아 서버에 전달한다.
서버는 인가 코드를 전달받아 카카오에서의 사용자의 access, refresh token을 전달 받는다. 이때, access token과 인가 코드를 클라이언트에게 반환한다.
클라이언트가 acess token과 code를 서버에게 보내면, 로그인/회원가입이 완료되고, 내부에서 access, refresh token, code를 반환한다.

이제 이 로직을 그대로 구현해보자. 본 프로젝트에서는 구현을 간단하게 하기 위해 allauth와 dj_rest_auth를사용했다.

3. Views

앞서 첨부한 인증 로직을 보면,

카카오 인가 코드를 발급하는 view
카카오에서 반환한 access_token과 code를 반환하여 카카오 프로필 정보를 받아오는 view

위와 같은 2개의 view가 필요한 것을 알 수 있다. 하지만 사실 카카오 인가 코드 발급하는 view는 카카오 디벨로퍼스 홈페이지에 들어가 redirect uri만 잘 설정해 주고, 아래 url로 접속하면 된다.

"https://kauth.kakao.com/oauth/authorize?client_id={REST_API_KEY}&redirect_uri={KAKAO_CALLBACK_URI}&response_type=code"

그러므로 나머지 1개의 view에 대해서 알아보도록 하자.

먼저 전체 코드는 다음과 같다.

# accouts/views.py
User = get_user_model()

class KakaoLoginView(APIView):
    def post(self, request, *args, **kwargs):
        code = request.data.get("code")

        if not code:
            return Response(
                {"error": "Code is required"}, status=status.HTTP_400_BAD_REQUEST
            )

        # 카카오 인가코드를 사용해 access_token 획득
        token_res = requests.get(
            f"https://kauth.kakao.com/oauth/token?grant_type=authorization_code&client_id={REST_API_KEY}&client_secret={CLIENT_SECRET}&redirect_uri={KAKAO_CALLBACK_URI}&code={code}"
        )
        logger.fatal(token_res)

        if token_res.status_code != 200:
            logger.fatal(token_res.json())
            return Response(
                {"error": "Failed to obtain access token"},
                status=status.HTTP_400_BAD_REQUEST,
            )

        token_json = token_res.json()
        access_token = token_json.get("access_token")

        # 카카오 access_token으로부터 사용자 정보 획득
        headers = {"Authorization": f"Bearer {access_token}"}
        profile_res = requests.get("https://kapi.kakao.com/v2/user/me", headers=headers)

        if profile_res.status_code != 200:
            return Response(
                {"error": "Failed to obtain user information"},
                status=status.HTTP_400_BAD_REQUEST,
            )

        profile_json = profile_res.json()

        kakao_oid = profile_json.get("id")
        nickname = profile_json.get("properties")["nickname"]
        profile_image = profile_json.get("properties")["profile_image"]
        email = profile_json.get("kakao_account")["email"]

        user, created = User.objects.get_or_create(
            email=email,
            defaults={
                "username": f"{nickname}",
                "kakao_oid": kakao_oid,
                "profile_image": f"{profile_image}",
            },
        )

        # 사용자에 대한 토큰 생성
        refresh = RefreshToken.for_user(user)
        data = {
            "access_token": str(refresh.access_token),
            "refresh_token": str(refresh),
            "user_info": {
                "id": user.id,
                "email": user.email,
                "username": user.username,
                "profile_image": user.profile_image,
                "is_created": created,
            },
        }

        return Response(data, status=status.HTTP_200_OK)

이 코드 조각을 하나씩 살펴보자.

3-1. 인가 코드 받아오기

User = get_user_model()

def kakao_login(request):
    return redirect(
        f"https://kauth.kakao.com/oauth/authorize?client_id={REST_API_KEY}&redirect_uri={KAKAO_CALLBACK_URI}&response_type=code"
    )

이 부분은 클라이언트 부분과의 싱크를 맞추기 위해서 작성했는데, 위에 작성한 url로 접속하면 code? 라는 query로 카카오에서 인자 코드가 반환된다.

예시

이렇게 뒤의 code를 클라이언트 측에서 파싱하여 서버로 보내면, 카카오의 AT (Access Token)을 받아 유저 정보를 반환받고, 자체 AT, RT를 만들어 반환하는 코드를 작성해야 한다.

3-2. 자체 AT, RT 반환

1. 인가코드로 카카오 access_token 획득

먼저, 사용자가 인가 코드를 post하게 하여, kauth로부터 카카오 AT를 반환받는다.
코드는 다음과 같다.

class KakaoLoginView(APIView):
    def post(self, request, *args, **kwargs):
        code = request.data.get("code")

        if not code:
            return Response(
                {"error": "Code is required"}, status=status.HTTP_400_BAD_REQUEST
            )

        # 카카오 인가코드를 사용해 access_token 획득
        token_res = requests.get(
            f"https://kauth.kakao.com/oauth/token?grant_type=authorization_code&client_id={REST_API_KEY}&client_secret={CLIENT_SECRET}&redirect_uri={KAKAO_CALLBACK_URI}&code={code}"
        )

        if token_res.status_code != 200:
            return Response(
                {"error": "Failed to obtain access token"},
                status=status.HTTP_400_BAD_REQUEST,
            )

        token_json = token_res.json()
        access_token = token_json.get("access_token")

2. 인가코드로 카카오 access_token 획득

그렇게 받은 카카오 AT를 Bearer와 함께 header로 유저 프로필을 받아오는 request를 보낸다. 그렇게 되면, 유저의 카카오 oid,닉네임, 프로필 이미지, email을 받아올 수 있다.

이후, ‘user, created = User.objects.get_or_create’ 함수를 사용해서 ‘user’로 유저 정보를, ‘created’로 유저가 새로 생성됐는지 여부를 반환받을 수 있다.

        # 카카오 access_token으로부터 사용자 정보 획득
        headers = {"Authorization": f"Bearer {access_token}"}
        profile_res = requests.get("https://kapi.kakao.com/v2/user/me", headers=headers)

        if profile_res.status_code != 200:
            return Response(
                {"error": "Failed to obtain user information"},
                status=status.HTTP_400_BAD_REQUEST,
            )

        profile_json = profile_res.json()

        kakao_oid = profile_json.get("id")
        nickname = profile_json.get("properties")["nickname"]
        profile_image = profile_json.get("properties")["profile_image"]
        email = profile_json.get("kakao_account")["email"]

        user, created = User.objects.get_or_create(
            email=email,
            defaults={
                "username": f"{nickname}",
                "kakao_oid": kakao_oid,
                "profile_image": f"{profile_image}",
            },
        )

3. 자체 AT, RT 생성

마지막으로, rest_framework 라이브러리의 RefreshToken을 사용해서 자체 RT, AT를 발급받을 수 있다. 본인은 user_info도 함께 반환했다.

from rest_framework_simplejwt.tokens import RefreshToken

        # 사용자에 대한 토큰 생성
        refresh = RefreshToken.for_user(user)
        data = {
            "access_token": str(refresh.access_token),
            "refresh_token": str(refresh),
            "user_info": {
                "id": user.id,
                "email": user.email,
                "username": user.username,
                "profile_image": user.profile_image,
                "is_created": created,
            },
        }

        return Response(data, status=status.HTTP_200_OK)

4. 결과

Swagger로 보이는 결과는 다음과 같다.

실제 인가 코드를 첨부하여 실행해보면 결과는 다음과 같다.

결국은 그냥 1개의 api만 있으면 끝난다. (url로 접속해서 인가 코드를 받아오는 작업은 앞서 말했듯이 그냥 클라이언트 측에서 하면 되기 때문에..)

이렇게 간단하게 DRF로 카카오 소셜 로그인을 끝냈다. 생각보다 크게 할게 별거 없었는데 개고생했던 기억이 있다. ㅋㅋㅋㅋ

다음 글에서는 DRF+Docker+ELB 배포 방법에 대해 다뤄볼 예정이다.

저작자표시 (새창열림)