A Full Stack Develpor

Wagtail은 Django base로 만들어진 CMS이므로 user 관리가 Django랑 같다.

바로 allauth를 사용하면 된다. 순서대로 실행해보자

1. All Auth 설치, Setting

$ pip install django-allauth

이후에 settings/base.py를 다음과 같이 추가하고 수정해준다. 

# base.py

TEMPLATES = [
    {
        # ...,
        'OPTIONS': {
            'context_processors': [
                # ...
                'django.template.context_processors.request', # <- this is the one you NEED to include
                # ...
            ],
        },
    },
]

Allauth backend 인증을 위해 추가해준다. 

# base.py 

# Authentication Backends
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 e-mail
    'allauth.account.auth_backends.AuthenticationBackend',
)

Authentications_backend는 Django에서 back를 어떻게 사용할지 정보를 적어주는 곳이다. 

'django.contrib.auth.backends.ModelBackend'는 All auth와 상관없이 username으로 Django admin에 로그인 하기 위해 사용한다고 한다. 

'allauth.account.auth_backends.AuthenticationBackend' 이메일 로그인과 같이 구체적인 로그인 방법을 위해 사용한다고 한다.

자세한 내용을 아래 문서를 참고하자

https://docs.djangoproject.com/en/3.2/ref/contrib/auth/#authentication-backends-reference

그리고 allauth 기능을 사용하기 위해서 6가지를 추가해줘야한다. 

# base.py 

INSTALLED_APPS = (
    # ... other apps 

    # The following apps are required:
    'django.contrib.auth',
    'django.contrib.messages',
    'django.contrib.sites',

    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    # ...
)

그리고 base.py에 다음과 같은 내용을 추가시켜준다.

# base.py 

SITE_ID = 1

DEFAULT_AUTO_FIELD='django.db.models.AutoField'

SITE_ID는 우리가 사용할 사이트가 단일 사이트면 1을 입력해주면 된다. 자세한 내용은

https://stackoverflow.com/questions/25468676/django-sites-model-what-is-and-why-is-site-id-1 에서 확인할 수 있다.

마지막으로 urls.py에 urlpatterns에 다음을 추가한다. 

# urls.py

urlpatterns = [
    # .. Existing urls 
    path('accounts/', include('allauth.urls')), # Creates urls like yourwebsite.com/login/
  
    # Wagtail URLs
    path('', include(wagtail_urls)),
]

이후에 migrate를 진행하면 정상적으로 적용이 될 것이다. 다만 여기에서 migrations 충돌이 일어났는데 기존 migrations을 초기화 시켜주고 다시 실행하니 정상적으로 작동하였다. 

로그인 접속 url은 accounts/login으로 접속하면 된다. 

Login 관련하여 여러가지 옵션을 선택할 수 있는데 관련 내용은 allauth 공식 문서에 정리 되어 있다.

https://django-allauth.readthedocs.io/en/latest/configuration.html

참고로 몇가지 적용한걸 보자면 

# base.py 

LOGIN_URL = '/login/'
LOGIN_REDIRECT_URL = '/'
ACCOUNT_AUTHENTICATION_METHOD = "username_email"
ACCOUNT_CONFIRM_EMAIL_ON_GET = True
ACCOUNT_EMAIL_REQUIRED = True
ACCOUNT_EMAIL_VERIFICATION = "mandatory"
ACCOUNT_LOGIN_ON_EMAIL_CONFIRMATION = True
ACCOUNT_LOGOUT_ON_GET = True
ACCOUNT_LOGIN_ON_PASSWORD_RESET = True
ACCOUNT_LOGOUT_REDIRECT_URL = '/login/'
ACCOUNT_PRESERVE_USERNAME_CASING = False
ACCOUNT_SESSION_REMEMBER = True
ACCOUNT_SIGNUP_PASSWORD_ENTER_TWICE = False
ACCOUNT_USERNAME_BLACKLIST = ["admin", "god"]
ACCOUNT_USERNAME_MIN_LENGTH = 2

변수명만 봐도 어떤 기능을 하는지 이해가 될 것이다. 

2. Google 로그인 설정

구글 로그인을 설정하려면 몇가지를 추가해주면 된다. 

settings/base.py

INSTALLED_APPS = [
 
    'allauth.socialaccount.providers.google',
]

google로 로그인기능을 활성화 시키려면 위와 같이 입력하면된다. 

그리고 구글 로그인의 ID값 하고 Key 값을 적어야한다. 

http://127.0.0.1:8000/django-admin/ 으로 접속한다. 

Social applications에서 add 버튼을 누르고 

위와 같이 설정을 해주면 완료된다. sites가 example.com이라고 되어 있으면 Sites로 가서 이름을 바꿔주면 된다. 이 사이트가 우리가 settings.py에서 설정한 SITE_ID = 1 이다. (1번째 사이트)

Client id와 Secret Key은

구글은 https://console.developers.google.com/apis/credentials

네이버는 https://developers.naver.com/products/login/api/api.md 

3. template 작성

{% load socialaccount %}

<a class="button" href="{% provider_login_url 'google' %}"><strong>로그인</strong></a>

template에서는 위와 같이 작성 해주면 된다.

(네이버일 경우에는 google을 naver로만 바꿔주면 된다.)

만약 social 로그인을 사용하지 않을 것이라면 href="accounts/login"으로 해주면 된다. 

참고) settings/base.py에 다음과 같은 설정을 해주면 로그아웃을 할 때 accounts 페이지 이동없이 바로 로그아웃 된다.

ACCOUNT_LOGOUT_ON_GET = True

<a class="button" href="{% url 'account_logout' %}"><span>로그 아웃</span></a>