Django-allauth 커스텀 탬플릿 적용하기
Oct. 10, 2021, 10:32 p.m.
Django에 allauth를 적용하고 나면 'accounts/login/' 과 같은 주소에 접속 하여 로그인을 처리할 수 있습니다. 그러나 allauth에서 기본적으로 제공하는 탬플릿은 굉장히 디자인이 구립니다. 그냥 기본적인 기능만 구현이 되어있는 형태이기 때문이죠.
실제로 사이트를 운영하려면 이런 로그인 화면으로는 부족합니다.
이번에는 allauth의 기본 템플릿을 입맛에 맞게 수정하는 방법에 대해 포스팅을 해보겠습니다.
1. allauth 템플릿 모음 가져오기
먼저 allauth의 깃허브에 들어가서 탬플릿 모음을 가져오겠습니다.
django-allauth Github 에 접속해서 DOWNLOAD ZIP 을 눌러 allauth 파일을 다운로드 받으세요.
다운로드가 완료되면 압축을 풀어서 allauth 폴더 안에 들어있는 templates 폴더를 주목하세요. 여기에 allauth에서 제공하는 뷰들에 대한 html 파일이 있습니다. 이 폴더를 Django 프로젝트의 디렉터리로 옮겨주세요.
templates 폴더가 보이시나요? Django 프로젝트의 디렉터리로 폴더를 옮겼다면 성공입니다.
2. 템플릿 수정하기
본격적으로 templates 안을 살펴보겠습니다. templates 폴더 안을 보면 account, openid, socialaccount, tests 폴더가 있는 것을 볼 수 있습니다. 각 폴더는 각 기능을 구현하는 페이지를 표시하는 html 파일들이 들어 있습니다.
그중에서도 account 폴더에 중요한 템플릿들이 많이 들어있는데요, account 폴더를 한번 열어보겠습니다.
base.html 과 각 기능을 담당하는 html 파일들이 있습니다. 예를들어 login.html 은 'accounts/login/'에 접속했을 때 나오는 화면을 구성합니다.
-base.html-
<!DOCTYPE html>
<html>
<head>
<title>{% block head_title %}{% endblock %}</title>
{% block extra_head %}
{% endblock %}
</head>
<body>
{% block body %}
{% if messages %}
<div>
<strong>Messages:</strong>
<ul>
{% for message in messages %}
<li>{{message}}</li>
{% endfor %}
</ul>
</div>
{% endif %}
<div>
<strong>Menu:</strong>
<ul>
{% if user.is_authenticated %}
<li><a href="{% url 'account_email' %}">Change E-mail</a></li>
<li><a href="{% url 'account_logout' %}">Sign Out</a></li>
{% else %}
<li><a href="{% url 'account_login' %}">Sign In</a></li>
<li><a href="{% url 'account_signup' %}">Sign Up</a></li>
{% endif %}
</ul>
</div>
{% block content %}
{% endblock %}
{% endblock %}
{% block extra_body %}
{% endblock %}
</body>
</html>
base.html을 보면 페이지의 전체적인 구조를 담고 있는 모습을 볼 수 있습니다. 각 페이지별로 통일성을 주려면 이 파일을 수정해야합니다.
저는 이렇게 바꾸어 보았습니다.
-base.html-
<!DOCTYPE html>
{% load static %}
<html lang="ko">
<head>
<title>{% block head_title %}{% endblock %}</title>
{% block extra_head %}
{% endblock %}
{% include 'blog/head.html' %}
</head>
<body class="">
{% block body %}
{% block content %}
{% endblock %}
{% endblock %}
{% block extra_body %}
{% endblock %}
</body>
</html>
쓸데없는 부분을 다 쳐내고 제 사이트에 공통적으로 head에 들어가는 부분을 담은 파일만 include 하였습니다.
그럼 이제 login.html을 볼까요?
-login.html-
{% extends "account/base.html" %}
{% load i18n %}
{% load account socialaccount %}
{% block head_title %}{% trans "Sign In" %}{% endblock %}
{% block content %}
<h1>{% trans "Sign In" %}</h1>
{% get_providers as socialaccount_providers %}
{% if socialaccount_providers %}
<p>{% blocktrans with site.name as site_name %}Please sign in with one
of your existing third party accounts. Or, <a href="{{ signup_url }}">sign up</a>
for a {{ site_name }} account and sign in below:{% endblocktrans %}</p>
<div class="socialaccount_ballot">
<ul class="socialaccount_providers">
{% include "socialaccount/snippets/provider_list.html" with process="login" %}
</ul>
<div class="login-or">{% trans 'or' %}</div>
</div>
{% include "socialaccount/snippets/login_extra.html" %}
{% else %}
<p>{% blocktrans %}If you have not created an account yet, then please
<a href="{{ signup_url }}">sign up</a> first.{% endblocktrans %}</p>
{% endif %}
<form class="login" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
{{ form.as_p }}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
<a class="button secondaryAction" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
<button class="primaryAction" type="submit">{% trans "Sign In" %}</button>
</form>
{% endblock %}
base.html 을 extend 하는 모습을 볼 수 있습니다.
그 다음 title을 지정하는 block을 선언하였고, content block에는 로그인 기능을 구연하는 설명들과 form이 위치한 것을 볼 수 있습니다.
저는 이것을 이렇게 수정해보았습니다.
-login.html-
{% extends "account/base.html" %}
{% load i18n %}
{% load account socialaccount %}
{% block head_title %}{% trans "Log In" %}{% endblock %}
{% block content %}
<div class="container" style="height:100vh">
<div class="row justify-content-center h-100">
<div class="col align-self-center text-center card text-white bg-jellyho my-3" style="max-width: 25rem;">
<div class="card-header"><h1 style="font-family: 'Staatliches', cursive;">JELLYHO</h1></div>
<div class="card-body">
<h3 class="card-title">Log In</h1>
{% get_providers as socialaccount_providers %}
<form class="login" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}
{{ form.as_p }}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
<button class="primaryAction" type="submit">Log In</button>
</form>
{% if socialaccount_providers %}
<div class="my-2">
<a href="/accounts/signup/?process=login&{{ redirect_field_name }}={{ redirect_field_value }}" role="button" class="btn btn btn-light my-1" style="display:block"><i class="far fa-envelope"></i> Sign Up by Email</a>
<a href="/accounts/google/login/?process=login&{{ redirect_field_name }}={{ redirect_field_value }}" role="button" class="btn btn btn-light my-1" style="display:block"><i class="fab fa-google"></i> Login with Google</a>
</div>
{% include "socialaccount/snippets/login_extra.html" %}
{% else %}
<p>{% blocktrans %}If you have not created an account yet, then please
<a href="{{ signup_url }}">sign up</a> first.{% endblocktrans %}</p>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}
bootstrap4를 이용해서 디자인을 하였습니다. socialaccount를 가져오는 부분이나 form 부분을 최대한 살리고 bootstrap4의 Card 컴포넌트를 이용하여 디자인했습니다.
결과는 아래와 같습니다.
훨씬 깔끔해지지 않았나요?
이런식으로 입맛에 맞게 login, logout 등등의 template을 바꾸어 나가면 됩니다.
3. settings.py 에 template 루트 등록하기
아직 끝이 아닙니다. Django에서 이 템플릿을 찾을 수 있게 루트 등록을 해주어야 합니다.
settings.py에 들어가서 TEMPLATES 부분을 아래와 같이 고쳐주세요.
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates'), os.path.join(BASE_DIR, 'templates', 'accounts')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
이렇게 하면 Django가 제가 커스텀한 allauth 템플릿을 찾을 수 있게 됩니다.
끝!
allauth Django