바뀜

둘러보기로 가기 검색하러 가기

장고 소셜 로그인(allauth 사용) (편집)

2025년 5월 9일 (금) 07:28 판

5,137 바이트 추가됨 ,  2025년 5월 9일 (금)
편집 요약 없음
5번째 줄: 5번째 줄:  
=== 사용 ===
 
=== 사용 ===
 
기본적으로 username 필드에 정보를 담아준다. 자동으로 user1, user2, user3... 순으로 생성해준다. 장고에서 사용하는 AUTH 모델의 객체를 지우면 소셜계정 정보도 함께 지워진다.
 
기본적으로 username 필드에 정보를 담아준다. 자동으로 user1, user2, user3... 순으로 생성해준다. 장고에서 사용하는 AUTH 모델의 객체를 지우면 소셜계정 정보도 함께 지워진다.
 +
 +
각 sns에서 제공하는 이름, 생년월일 따위의 정보는 어떻게 받는지 모르겠다 ㅜㅜ
    
=== 들어가기 전에 ===
 
=== 들어가기 전에 ===
60번째 줄: 62번째 줄:  
     ...
 
     ...
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
|-
 +
|문제해결
 +
|잘 기능하면서도 에러가 뜰 때.
 +
F5 누르면 해결되는 소셜로그인이라면 다음의 설정이 도움될 수 있음.
 +
|
 +
SESSION_COOKIE_SAMESITE = 'None'  # 교차요청이라도 쿠키 포함.
 +
 +
SESSION_COOKIE_SECURE = True  # 위 설정과 따라가는 보안용 설정. secure 설정이 있을 때에만, https 일 때에만 허용.
 
|}
 
|}
 
===urls.py 설정===
 
===urls.py 설정===
65번째 줄: 75번째 줄:  
urlpatterns = [
 
urlpatterns = [
 
     path('accounts/', include('allauth.urls')), # allauth의 기능을 accounts라는 주소 아래 담는다.
 
     path('accounts/', include('allauth.urls')), # allauth의 기능을 accounts라는 주소 아래 담는다.
−
</syntaxhighlight>여기까지 하고 DB에 반영을 해주면 admin에서 '소셜 계정'이라는 모델집단을 볼 수 있다.
+
</syntaxhighlight>여기까지 하고 DB에 반영을 해주면 admin에서 '소셜 계정'이라는 모델집단을 볼 수 있다.(<code>python manage.py makemigrations, python manage.py migrate</code>)
−
 
  −
python manage.py migrate
     −
그러면 다음과 같은 에러를 만난다.
+
이후 admin에 접속해보자. 그러면 다음과 같은 에러를 만난다.
    
django.contrib.sites.models.Site.DoesNotExist: Site matching query does not exist.
 
django.contrib.sites.models.Site.DoesNotExist: Site matching query does not exist.
   −
앱에 'django.contrib.sites'가 추가되었기 때문에 발생하는 에러인데, settings.py 아무데나 SITE_ID = 1을 지정해주면 된다. SITE_ID=1  # 무슨의미일까?
+
앱에 'django.contrib.sites'가 추가되었기 때문에 발생하는 에러인데, settings.py 아무데나 SITE_ID = 1을 지정해주면 된다.(운영하는 사이트 중 첫번째 사이트로 리다이렉트하게 한다.)<br />
−
<br />
      
===site 설정===
 
===site 설정===
93번째 줄: 100번째 줄:  
|네이버
 
|네이버
 
|
 
|
−
*[https://developers.naver.com/products/login/api/ 네이버아이디로 로그인] 서비스에서 오픈 API를 신청한다.
+
#[https://developers.naver.com/products/login/api/ 네이버아이디로 로그인] 서비스에서 오픈 API를 신청한다.
−
*callback url : http://http://127.0.0.1:8000/accounts/naver/login/callback/ 형태.
+
#callback url : http://http://127.0.0.1:8000/accounts/naver/login/callback/ 형태.
−
*소셜어플리케이션에서 얻은 클라이언트 아이디와 비밀키를 입력한다.
+
#소셜어플리케이션에서 얻은 클라이언트 아이디와 비밀키를 입력한다.
−
*등록할 때 이용가능한 사이트를 모두 선택해준다.(example.com 이라도 안해주면 에러가 난다.)
+
#등록할 때 이용가능한 사이트를 모두 선택해준다.(example.com 이라도 안해주면 에러가 난다.)
−
*로그인 버튼은 다음 [https://developers.naver.com/docs/login/bi/ 링크]에서 제공받을 수 있다.
+
#로그인 버튼은 다음 [https://developers.naver.com/docs/login/bi/ 링크]에서 제공받을 수 있다.
 +
개발자 외 일반사용자의 로그인은 네이버의 인증을 받아야 한다.(사이트개발이 완전히 끝난 후에 로그인 과정 제출.)
 
|-
 
|-
 
|구글
 
|구글
−
|[https://console.developers.google.com/projectselector2/apis/dashboard?supportedpurview=project 구글 API 콘솔]에서 진행한다.
+
|준비물
−
API를 사용하기 위해선 프로젝트가 있어야 한다. 프로젝트를 만들고..
     −
좌측 메뉴의 '사용자 인증 정보' 선택 > OAuth 클라이언트 ID를 만든다.
+
* 진행하기 전에 도메인에서 https:// 를 사용할 수 있어야 한다.
    +
# [https://console.developers.google.com/projectselector2/apis/dashboard?supportedpurview=project 구글 API 콘솔]에서 진행한다. API를 사용하기 위해선 프로젝트가 있어야 한다. 프로젝트를 만들고..
 +
# 좌측 메뉴의 '사용자 인증 정보' 선택 > OAuth 클라이언트 ID를 만든다.(웹어플리케이션으로.)
 +
# 리다이렉션 url은 https://localhost:8000/accounts/google/login/callback/ 형태.
 +
# 만들 때 ID와 비밀키를 주는데, 이들을 소셜어플리케이션에 등록한다.(비밀키는 처음에만 알려주고 곧 안나오게 될 수 있다. 지멋대로다 나왔다 안나왔다...)
 +
# 로그인 버튼은 다음 [https://developers.google.com/identity/branding-guidelines#sign-in-button 링크]에서.
 +
|-
 +
|카카오
 +
|
 +
# settings.py 의 INSTALLED_APPS 안에 'allauth.socialaccount.providers.kakao',를 추가한다.
 +
# API키를 신청한다.(https://developers.kakao.com/<nowiki/>에서)  - 신청할 때 리다이렉트 url로 http://127.0.0.1:8000/accounts/kakao/login/callback/ 형태.
 +
# admin의 소셜어플리케이션에서 클라이언트아이디에 REST API 키를 넣는다.(시크릿 키는 없다.)
 +
# 로그인버튼은 [https://developers.kakao.com/tool/resource/login 링크]에서 제공받을 수 있다.
 +
|-
 +
|페이스북
 +
|사용하기 위해 <nowiki>https://를</nowiki> 사용할 수 있어야 한다.
   −
API를 신청한다.
+
# settings.py 의 INSTALLED_APPS 안에 'allauth.socialaccount.providers.facebook', 추가
 +
# https://developers.facebook.com/apps/<nowiki/>에서 앱을 만든다.
 +
# 앱 메뉴의 '페이스북 로그인 설정'에서 유효한 OAuth 리다이렉션에 [http://127.0.0.1:8000/accounts/kakao/login/callback/ http://127.0.0.1:8000/accounts/facebook/login/callback/]형태로 기입한다.
 +
# <code>페이스북디벨로퍼>설정>기본설정</code>에서 앱ID와 비밀코드를 보여주는데, 이를 장고소셜로그인 앱에 등록한다.
 +
# 로그인 버튼은 [https://developers.facebook.com/docs/facebook-login/web/login-button?locale=ko_KR 링크]에서 자바스크립트와 함께 제공된다.(자바스크립트를 사용한 버튼은... 이것저것 꼬이게 하니, 이미지만 따오도록 하자.)
 
|-
 
|-
 +
|애플
 
|
 
|
−
|
+
|}
 +
 
 +
==== 포기 ====
 +
{| class="wikitable"
 +
!서비스
 +
!설명
 +
|-
 +
|인스타그램
 +
|페이스북과 한 몸. 관련 앱 생성 후 리다이렉션 주소만 http://localhost:8000/accounts/instagram/login/callback/ 형태로 추가.
 +
그러나... 인스타 자체에서 로그인으로 사용할 수 없다고 못박아 두어서... 하다가 포기.(22.12월 기준 API 요청이 계속 거부당한다. 아마 최신화가 되지 않은듯...?)
 
|}
 
|}
   135번째 줄: 171번째 줄:  
</div>
 
</div>
 
<ul class="socialaccount_providers">
 
<ul class="socialaccount_providers">
−
 
+
<!--  프로바이더의 순서는 settings.py에 지정한 순서인 듯하다.  -->
 
{% for provider in socialaccount_providers %}
 
{% for provider in socialaccount_providers %}
 
{% if provider.id == "openid" %}
 
{% if provider.id == "openid" %}
156번째 줄: 192번째 줄:  
                 onmouseleave="this.src='{{ naver_button }}'"height="34">
 
                 onmouseleave="this.src='{{ naver_button }}'"height="34">
 
     </div>
 
     </div>
 +
   
 +
<!-- 다양한 방식으로 구성할 수 있다. -->
 +
{% elif provider.name == "Kakao" %}
 +
<a href="{% provider_login_url 'kakao' method='oauth2' %}">
 +
카카오톡 회원가입
 +
</a>
 +
       
 
{% else %}
 
{% else %}
 
<li>
 
<li>
171번째 줄: 214번째 줄:     
관리자페이지의 소셜계정 앱 안의 소셜계정 모델이 추가되는 것과 동시에 기본 인증앱의 Users 모델에 새로운 모델이 추가되어 있다.
 
관리자페이지의 소셜계정 앱 안의 소셜계정 모델이 추가되는 것과 동시에 기본 인증앱의 Users 모델에 새로운 모델이 추가되어 있다.
 +
 +
<br />
 +
= 기타 기능 =
 +
user.socialaccount_set.all().first() 안에 해당 제공자로부터 받아오는 각종 정보들이 담긴다. dir로 확인해 사용해보자.
 +
 +
이외 기존 회원과 소셜계정의 연결도 가능한 듯한데... 이상하게 안된다. 결국 스스로 머릴 써서 우회해서 구현했다.
 +
 +
대충 다음과 같은 속성들이 있다.<syntaxhighlight lang="html">
 +
    get_avatar_url. {{account.get_avatar_url}}
 +
    제공자. {{ account.provider }}
 +
    get_deferred_fields. {{ account.get_deferred_fields }}
 +
    get_profile_url. {{ account.get_profile_url }}
 +
    get_provider_account. {{ account.get_provider_account }}  # 카카오, 네이버의 경우 닉네임을 받으면 여기에 담긴다.(아이디를 제공하는 경우는 거의 없다.)
 +
    get_provider_display. {{ account.get_provider_display }}
 +
    id. {{ account.id }}
 +
</syntaxhighlight>
 +
<references />
 +
 +
= 에러 =
 +
 +
=== DoesNotExist at /accounts/kakao/login/ ===
 +
 +
=== SocialApp matching query does not exist. ===
 +
위와 같은 에러가 뜨는 경우는 admin에 소셜어플리케이션을 등록할 때 site를 지정해주지 않으면 뜬다.
 +
 +
=== 소셜로그인 실패. ===
 +
아래 메시지가 담긴 실패화면이 나온 경우...
 +
 +
Menu:
 +
 +
Sign In
 +
 +
Sign Up
 +
 +
Social Network Login Failure
 +
 +
An error occurred while attempting to login via your social network account.
 +
 +
다양한 방법이 가능하겠지만...
 +
 +
* 클라우드플레어를 사용하는 경우 PageRules에서 <code>도메인/accounts/*</code> 에 대해 Cache Level: Bypass 옵션을 준다.(클라우드플레어에서 속도를 위해 저장했던 캐시를 반환하면 소셜계정 쪽에서 에러가 나기 때문에.)
    
==기존 회원관리 뷰 수정==
 
==기존 회원관리 뷰 수정==
180번째 줄: 264번째 줄:     
login(request, user, backend='django.contrib.auth.backends.ModelBackend')
 
login(request, user, backend='django.contrib.auth.backends.ModelBackend')
−
  −
<br />
  −
<references />
   
[[분류:장고 기능구현(초급)]]
 
[[분류:장고 기능구현(초급)]]
원본 주소 "http://id8436.iptime.org:2786/mediawiki/index.php/특수:모바일차이/896...1629"

둘러보기 메뉴