[Django] Week 7-2 Social Login - 구글 로그인 Practice, Tuple
먼저, 기본적인 틀을 짜보자.
사전작업
새로운 프로젝트 만들자.
$ django-admin startproject social_login만들고 상위폴더이름 변경한다. (social_login_up 으로 해줬다.)
앱을 만들어준다.
$ python manage.py startapp goologin여기서, 앱이름을 잘 설정해야한다.
중복되는 이름으로 설정하면안되니까 나만 알아볼 수 있는 앱이름으로 하는게 좋다.
아니면 나처럼 처음부터 다시 만들어야 되는 불상사가(...ㅜㅠ) 생긴다.
앱을 만들었으니 settings.py에 알려주자.
# settings.py INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'goologin.apps.GoologinConfig', ]
- 템플릿 폴더 만들고
home.html만든다.
<h1>hello world!</h1>
- models.py` 가서 클래스 정의해주자.
# models.py
class Blog(models.Model):
text = models.TextField()
모델 만들었으면 settings.py 에 가서 알려줘야 한다.
# settings.py DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), } }우리는 default sqlite를 사용할 거니까 그냥 냅둬도 된다.
DB를 적용해보자.
$ python manage.py makemigrationsadmin 계정도 만들어주자.
$ python manage.py createsuperuser/admin에서 객체를 관리하려면admin.py에 객체를 수정할 수 있게 import 해줘야 한다.# admin.py from .models import Blog admin.site.register(Blog)migrate 하자.
$ python manage.py migrate화면을 띄워줘야 하니까 url 설계하자.
# urls.py from django.contrib import admin from django.urls import path import gooin.views urlpatterns = [ path('admin/', admin.site.urls), path('', goologin.views.home, name = "home"), ]이제
views.py손봐주자.# views.py def home(request): return render(request, 'home.html')동작하는지 확인했다면, 이제 본격적으로 시작해보자.
실습시작
우리는 social login 기능을 사용하기 위해서 패키지를 받아야 한다.
$ pip install django-allauth소셜 로그인 기능을 구현하기 위해서
settings.py에 몇가지 설정을 해줘야 한다.# settings.py INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.sites', ##### 이 부분! 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'goologin.apps.GoologinConfig', # allauth ##### 이 부분! 'allauth', 'allauth.account', 'allauth.socialaccount', # provider 구글, 페이스북, 카톡, 깃헙 'allauth.socialaccount.providers.google', #### 제발 콤마 확인해줘.. ]그냥 따라해 보자!
그리고,
settings.py의 맨 밑에,# settings.py AUTHENTICATION_BACKENDS = ( # Needed to login by username in Django admin, regardless of 'allauth' 'django.contrib.auth.backends.ModelBackend', # 'allauth' specific authentication methods, such as login by email 'allauth.account.auth_backends.AuthenticationBackend', ) SITE_ID = 1 LOGIN_REDIRECT_URL = '/' ### 오류가 나면 홈으로 돌아와라튜플로 선언해 준다!
What is Tuple?
튜플은 리스트와 굉장히 닮아 있어 문법활용에 있어 무리는 없다.
그러니 가장 큰 차이점만 알고 있다면 유용하게 사용할 수 있다!
- 값을 바꿀 수 없다.
[]대신()을 사용한다.
값을 넣는 방법
>>> t1 = () ### 빈 튜플
>>> t2 = (1,) ### 값이 하나인 튜플
>>> t3 = (1, 2, 3) ### 여러개
>>> t4 = 1, 2, 3 ### 괄호를 쓰지 않아도 선언 가능
>>> t5 = ('a', 'b', ('ab', 'cd')) ### 안에 다른 튜플을 넣을 수도 있다.
값을 지우거나 변경할 수 있을까?
>>> t1 = (1, 2, 'a', 'b')
>>> del t1[0]
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
TypeError: 'tuple' object doesn't support item deletion
응 안된다. 값을 지울 수 없다.
>>> t1 = (1, 2, 'a', 'b')
>>> t1[0] = 'c'
Traceback (most recent call last):
File "<stdin>", line 1, in <module>
TypeError: 'tuple' object does not support item assignment
이것 역시 안된다. 변경할 수 없다.
인덱싱, 슬라이싱, 더하기, 곱하기
이 네가지는 리스트에서 하듯 할 수 있기 때문에 생략하도록 하겠다.
여기까지 했다면, 기타 설정들도 역시 존재하는데,
#이제
urls.py로 가보자.원래 우리가 url 을 어떻게 만들었었는지 잠깐 생각해보면,
urls.py에 가서 어떤 경로로 들어왔을 때, 어떤 app에 있는 어떤 함수를 실행 시켜줘!- 이게 복잡해지니까 계층적으로 가자,
include라는 함수를 가져와서 각각의 app에서 path를 관리하자!
의 과정을 거쳤었다.
지금은 우리가 소셜 로그인을 하는데 있어서, 만들어진 패키지를 사용할 예정이다.
그럼 이 앱은 이미 자기 자체의 경로가 설정되어 있을 것이다!
그러니까 우리는 우리가 만든 프로젝트의 urls.py(social_login.urls.py)에 갖고와서 쓰겠다는
코드 한줄을 쳐주면 된다.
# urls.py
from django.contrib import admin
from django.urls import path, include ### 요녀석 빼지 말기
import google.views
urlpatterns = [
path('admin/', admin.site.urls),
path('', google.views.home, name = "home"),
path('accounts/', include('allauth.urls')), ### 이 한줄을 쳐주면 완성!
]
이렇게 하고, migrate를 한번 해주자.
$ python manage.py migrate서버 돌린 후,
/admin들어가보자.
이렇게 많은 녀석이 들어와 있다.
여기서 sites를 클릭하면,
이렇게 example.com을 누르게 되었을 때,
기본이 될 사이트 주소를 정할 수 있는데 우리는 우리컴퓨터를 기반으로 한 포트 8000번으로 들어올 것이기 때문에,
http://127.0.0.1:8000로 저장해주자.이제 구글 계정과 내 페이지를 연동해주어야 할텐데,
이녀석을 클릭하자.
이걸 클릭하고,
add social application을 눌러주자.그럼 이렇게 뜰텐데,
여기서 provider 를 누르면, settings.py 에서 내가 설정해줬던
제공자 목록이 뜬다.
지금은 google만 등록했기 때문에 이녀석만 뜬다.
이름은 아무말이나 적어주면 된다.
그런데 밑에 있는
client id,secret key같은 정보는 우리가 모른다.이 정보는 우리가 구글에 가서 가지고 와야 하는 값들이다.
이걸 가져오기 위한 주소는,
이 주소로 가면 된다!
여기 들어가면 이런 창이 뜰텐데, 지금은 예전에 하던 프로젝트가 떠있는 모습이다.
동그라미 친 부분을 클릭하고,
새 프로젝트를 클릭하자.
그리고 프로젝트를 만들어주자!
그리고 인증정보를 누르자.
Oauth 클라이언트 ID 클릭
그러면 이름을 설정해야 한다고 한다.
이름 정해주고 저장하자.
웹 어플리케이션을 누르면 다음과 같은 화면이 뜬다.
여기서, 이름은 마음대로 작성하고, 밑에 url을 쓰는 부분에 내 서버의 주소를 써주자.
그러면 다음과 같이 클라이언트 ID와 키가 뜬다.
이 정보를
/admin페이지에 붙여넣어 주자.
붙여 넣으면 이런 모양이 될텐데,
다음으로 밑에 적었던 sites를 추가해준다.
저장해주면! 구글과 연동이 되었다!
자, 그러면 이제 소셜 로그인 기능을 html에 띄워주기만 하면 완성!
home.html로 가보자.<!-- home.html --> {% load socialaccount %} {% providers_media_js %} <h1>소셜 로그인을 해봐요!</h1> <a href = "/accounts/signup">회원가입</a><br> {% if user.is_authenticated %} <a href = "/accounts/logout">로그아웃</a> {{user.username}} 님이 로그인중 {% else %} <a href=" {% provider_login_url 'google' %}">구글 로그인</a><br> 로그인 하셔야 합니다. {% endif %}코드를 읽어보면,
1. 로드를 해줘야 한다.
2. 미디어 파일, 로그인 페이지의 템플릿 페이지를 쓰고 싶으면 써줘야 한다.
3. 회원가입 링크는, 우리가 만들지 않아도 allauth 패키지를 사용했기 때문에
제공이 되는 기능이다!
4. `user.is_authenticated` 는 유저가 로그인이 되어 있는지 아닌지를 판단하는 코드
5. 그 다음은, 만약 로그인이 안되어 있다면, 구글 로그인이라는 링크를 달아주고,
그 경로를 적어준 것이다.
여기서 `provider_login_url 'google'` 이런식의 url을 적어줘야 한다.
다른 provider가 있다면 그 뒤에 다른 회사이름을 넣어주면 되겠다.
이제 끝났다! 서버를 돌려보자.
그리고 구글 로그인 이라는 녀석을 클릭해보자.
??? ㅠㅜ 에러다.
쫄지 말고, 저 에러를 잘읽어보면,
요청으로 부터 리다이렉트할 저 주소가 맞지 않다고 한다.
그러면 우리는 이녀석을 추가해줘야 하는데,
친절하게 어디로 방문하라고 주소까지 쳐주는 배려를 볼 수 있다.
저 주소로 들어가면, 요화면이 다시뜬다.
(죄송합니다. 옛날에 만들었던 프로젝트에 auth 승인을 해버렸네요 여러분은 알려준 방식대로 하시면 됩니다.)
여기서, 맨 아래에 보면 승인된 리디렉션 URI 가 있는데,
여기에 아까 이녀석이 내보낸 에러 주소를 넣어줘야 한다.
이렇게!
저장하고 다시
구글 로그인을 눌러주면!이렇게 예쁘게 뜬다!
여기서 회원가입을 누르면,
allauth에서 기본적으로 제공하는 양식이 뜬다.
추가적으로
/admin에 들어가보면,
여기서
users를 누르면,
이렇게 잘 들어왔다는 것을 알 수 있다!