Home Science Coding Design Etc. AboutMe

Django에서 OAuth를 이용하여 Google 소셜 로그인 후 댓글 달기 구현

Oct. 3, 2020   /   4 mins read   /  

Medium에 올라온 다음 글을 참고하여 정리했습니다.

OAuth Authentication in Django with social-auth



장고(Django)에서 구글 소셜 로그인(Google OAuth)을 통해 개별 사이트에서 댓글 달기(권한 부여) 구현

Google OAuth2를 이용하여 회원가입을 거치지 않고도 구글 인증을 통해 권한을 얻어올 수 있습니다. 이를 통해 댓글을 달 수 있는 시스템을 만들어 보았습니다.


1. 필요한 패키지 설치 및 세팅

우선 Django에서 OAuth2를 사용할 때 필요한 패키지를 설치합니다.

pip install social-auth-app-django

CMD

(yourvenv) C:\Users\yourpc\blog>pip install social-auth-app-django

방금 설치한 패키지인 social_djangosetting.pyINSTALLED_APPS에 추가합니다.

settings.py

INSTALLED_APPS = [
~~~
    'social_django',
]

settings.py

AUTHENTICATION_BACKENDS = (
    'social_core.backends.google.GoogleOAuth2',
    'django.contrib.auth.backends.ModelBackend',
)


추가적으로 Login URL와 Login, Logout 할 때 띄울 redirect url 도 설정합니다.

settings.py

LOGIN_URL = '/auth/login/google-oauth2/'
~~~
LOGIN_REDIRECT_URL = '/'
LOGOUT_REDIRECT_URL = '/'



2. Google API 등록하기 위해 Project 생성

Google Developer Console에 접속합니다. 기존에 API project가 있으면 선택하고, 없다면 새로운 프로젝트를 하나 생성합니다. (New project)



3. OAuth client ID 생성하기 (Web application)

Credentials → Create Credentials → OAuth client ID로 새로운 OAuth 클라이언트를 생성합니다.

이후 나오는 창에서 Web application 선택하고, Authorized redirect URIs 항목에 로컬 환경에서 테스트 하기 위해서

http://127.0.0.1/complete/google-oauth2/ 또는 http://localhost:8000/complete/google-oauth2/ 둘 중에 하나를 추가하고,

또한, 정상 서비스를 위해서 실제로 사용될 자신의 사이트 주소 http://yoursite/complete/google-oauth2/ 를 추가합니다.

그리고 우측에 보면 Client ID 및 Client Secret이 있는데 이를 보관하여 Backend에 적용해야 합니다. 아래 '5. Backend에서 프로젝트 설정하기 - OAuth2 Key & Secret 등록' 에서 더 자세히 다루겠습니다.


4. 새로운 API (Google+) 추가하기

새로운 API를 추가하기 위해 Dashboard에서 Enable APIs and services를 선택합니다.


추가하려는 API를 검색하여 선택합니다. 여기서는 Google+를 적용했습니다. (Google+ 검색 → Enable API)




5. Backend에서 프로젝트 설정하기 - OAuth2 Key & Secret 등록 및 URL 설정

setting.py 파일로 돌아와서, 아래에 SOCIAL_AUTH_GOOGLE_OAUTH2_KEYSOCIAL_AUTH_GOOGLE_OAUTH2_SECRET을 넣어줍니다.

setting.py

SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = '여기에 구글 API에서 제공한 Key를 넣으세요'
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = '여기에 구글 API에서 제공한 Secret를 넣으세요'

그리고 SOCIAL_AUTH_URL_NAMESPACE = 'social' 도 추가합니다.

setting.py

LOGIN_URL = '/auth/login/google-oauth2/'
LOGIN_REDIRECT_URL = '/'
LOGOUT_REDIRECT_URL = '/'
SOCIAL_AUTH_URL_NAMESPACE = 'social'




urls.py의 urlpatterns에 path('', include('social_django.urls', namespace='social'))path('logout/', auth_views.LogoutView.as_view(next_page=settings.LOGOUT_REDIRECT_URL), name='logout') 두가지를 추가합니다.

urls.py

...,
path('', include('social_django.urls', namespace='social'))
path('logout/', auth_views.LogoutView.as_view(next_page=settings.LOGOUT_REDIRECT_URL), name='logout'),
...,


6. 로그인/로그아웃 버튼 만들기

사용자가 로그인 중에는 로그아웃 버튼이 보이게, 그렇지 않을 땐 로그인 버튼이 보이게 추가해야 하는데요.

로그인/로그아웃을 적용시킬 template에 해당 기능을 추가합니다.

template.html

{% if user.is_authenticated %}
<a href="{% url 'logout' %}">Logout</a>
{% else %}
<a href="{% url 'social:begin' 'google-oauth2' %}" target="_blank">Login</a>
{% endif %}

응용해서 만약 구글 OAuth를 통해 인증받은 사용자만 댓글을 달 수 있게 하려면 if user.is_authenticated 부분에 댓글 작성하는 기능을 추가하면 됩니다. 끝! 😀

혹시라도 궁금한 점 있으시면 댓글이나 이메일 남겨주세요. 감사합니다.