[2차 프로젝트] Facebook social login 구현하기

2차 프로젝트를 진행하는데 있어 크게 3가지의 기능을 구현했었다.

• Facebook social login 엔드포인트 구현
• 문자인증 기능 엔드포인트 구현
• (다방클론) 방 정보에 관한 세부 페이지 엔드포인트 구현

이 중에서 Facebook social login은 실제 구현하는데 앞서 관련 api 문서가 Front-end 부분 중심으로 정리가 되어 있거나 그 과정이 초심자가 구현에 옮기기에는 다소 어려운 점이 있었다.

그래서 일단 Kakao social 로그인 기능과 facebook graph API 탐색기 등을 을 참고하여 facebook login api의 작동을 테스트 하였고 아래와 같이 구현에 옮겼다

class FacebookSignInView(View):
    def get(self, request):
        facebook_token              = request.headers.get('Authorization')
        facebook_url_user_info      = 'https://graph.facebook.com/v6.0/me'
        user_info_fields            = ['id', 'name']
        param_user_info             = {
            'fields'        : ','.join(user_info_fields),
            'access_token'  : facebook_token
        }
        
        facebook            = SocialLoginType.objects.get(name = 'facebook')
        facebook_user_info  = requests.get(facebook_url_user_info, params = param_user_info)
        facebook_id         = facebook_user_info.json().get('id')
        facebook_name       = facebook_user_info.json().get('name')
        user_check          = User.objects.filter(social_login_type = facebook, social_login_id = facebook_id)
        
        try:
            if user_check.exists():
                user    = (
                    User
                    .objects
                    .get(social_login_type = facebook, social_login_id = facebook_id)
                )
                token   = jwt.encode(
                    {'user_id': user.id},
                    SECRET['secret'],
                    algorithm = SECRET['algorithm'],
                )

                return JsonResponse({'token':token.decode('utf-8')}, status = 200)
            
            social_login_type = SocialLoginType.objects.get(name = 'facebook')
            social_login_data = {
                'name'                  : facebook_name,
                'social_login_id'       : facebook_id,
                'social_login_type_id'  : social_login_type.id
            }
            
            return JsonResponse({'social_login_data' : social_login_data}, status = 200)

        except KeyError:
           return JsonResponse({'message' : 'INVALID_KEYS'}, status = 400)

Frontend 로 부터 Authorization headers 항목을 통해 facebook_access_token을 가지고 오면 facebook graph API에 원하는 정보를 user_info_fields(여기선 facebook_id number와 facebook_name(가입자 이름)을 요청했다) param_user_info에 access_token과 같이 넣고 requests.get을 통해 요청한 결과를 받아서 회원가입 및 로그인 후 구현하려는 서비스의 token을 리턴해 주는 기능을 구현했다. 기존에 Kakao와는 access_token을 전달하고 받고 싶은 social 데이터를 요청하는 방식이 달랐지만 큰 틀에서 HTTP request,response 형식으로 주고 받는 형태는 유사했다.

해당 로직 관련 httpie 테스트의 결과는 다음과 같다

GET /account/facebook-signin HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate
Connection: keep-alive
Host: localhost:8000
User-Agent: HTTPie/2.0.0



HTTP/1.1 200 OK
Content-Length: 89
Content-Type: application/json
Date: Sun, 22 Mar 2020 15:12:42 GMT
Server: WSGIServer/0.2 CPython/3.8.1
Vary: Origin
X-Content-Type-Options: nosniff
X-Frame-Options: DENY

{
    "social_login_data": {
        "name": null,
        "social_login_id": null,
        "social_login_type_id": 2
    }
}

해당 요청에 access_token을 담아서 보냈다면 name, social_login_id에 정상적인 facebook 유저정보가 담겨오게 된다. 필요에 따라 다른 유저정보도 가지고 올 수 있다.

Reference

1. Kakao social login : https://developers.kakao.com/docs/restapi/user-management#%EB%A1%9C%EA%B7%B8%EC%9D%B8

2. Facebook social login :
   (1) https://developers.facebook.com/docs/facebook-login/
   (2) https://developers.facebook.com/tools/explorer/?method=GET&path=me%3Ffields%3Did%2Cname&version=v6.0

3. Facebook 로그인 구현하기
   https://nachwon.github.io/insta-facebook/