Django-Allauth는 Django 애플리케이션 내에서 사용자 인증 시스템을 개발하기 위해 특별히 설계된 포괄적인 도구로, 사전 빌드된 템플릿을 통해 간소화된 구현을 제공하므로 개발자는 프로젝트의 더 중요한 측면에 집중할 수 있습니다.
사전 정의된 템플릿이 유용할 수 있지만, 시각적으로 더 매력적이고 사용자 친화적인 인터페이스를 구현하기 위해 템플릿을 수정하거나 사용자 지정해야 하는 경우가 종종 있습니다.
django-auth 설치 및 구성 방법
django-auth를 Django 프로젝트에 통합하는 것은 몇 가지 복잡하지 않은 절차가 포함된 간소화된 프로세스입니다.
Django Allauth를 설치하려면 Python용 Pip 패키지 관리 도구를 활용하세요.
프로젝트에 특정 애플리케이션 세트를 포함하려면 프로젝트의 구성 파일에 설치된 소프트웨어의 일부로 통합해야 합니다. 이를 위해서는 각 애플리케이션의 특정 패키지 이름을 지정하고 설치된 패키지 목록에 해당 애플리케이션이 추가되도록 해야 합니다. 이는 프로젝트 구성 파일의 해당 섹션에 관련 정보를 추가하여 수행할 수 있으며, 이는 사용 중인 플랫폼이나 프레임워크에 따라 다를 수 있습니다.
설정 파일에 인증 백엔드를 추가하면 소셜 미디어 로그인이나 이메일 및 비밀번호 조합 등 사용자가 자신을 인증할 수 있는 여러 가지 방법을 제공하여 애플리케이션의 보안을 강화할 수 있습니다. 이 과정에는 설정 파일에서 사용할 수 있는 인증 백엔드를 지정하고 그에 따라 구성하는 것이 포함됩니다. 이를 통해 개발자는 특정 요구 사항을 충족하는 유연하고 안전한 인증 시스템을 구현할 수 있습니다.
SITE_ID = 1
.
Django-Allauth를 설정하려면 적절한 유니폼 리소스 로케이터(URL)를 설정해야 합니다.
이전에 설명한 단계를 올바르게 실행하면
‘설정’ 파일 내에서 ‘DEBUG’ 매개변수를 ‘True’로 설정하면 개발 도구가 탑재된 적절한 웹 브라우저를 사용하면서 ”
django-allauth에서 로그인 템플릿을 재정의하는 방법
템플릿 디렉터리를 올바르게 설정하려면 먼저 템플릿 디렉터리가 아직 생성되지 않은 경우 설정되어 있는지 확인합니다. 이렇게 하려면 구성 파일에 액세스하여 “템플릿” 섹션으로 이동합니다.이 영역에서 “DIRS” 목록을 찾아 다음과 같이 수정합니다:
'DIRS': [BASE_DIR/'templates'],
Django-Allauth를 활용하려면 프로젝트의 기본 디렉터리 내에 초기 구성 파일을 설정하는 것이 필수적입니다. Django-Allauth에서 사용하는 표준화된 로그인 디자인을 수정하려면 일련의 순차적인 절차를 따를 수 있습니다.
1단계: 템플릿 파일 만들기
기존 “템플릿” 디렉터리 내에 “계정”이라는 이름의 하위 폴더를 만들어 django-allauth 애플리케이션과 관련된 템플릿을 수용하세요.
등록 및 로그인 페이지에 적합한 템플릿 이름을 결정하는 과정에는 여러 단계가 포함됩니다. 먼저 Python 가상 환경을 찾아 그 안에 있는 “Lib” 디렉토리로 이동해야 합니다. 거기에서 “site-packages” 폴더로 이동한 다음 “allauth” 하위 폴더로 이동해야 합니다. 마지막으로 템플릿이 포함된 “계정” 폴더에 액세스해야 합니다. 이러한 파일을 검토하면 템플릿이 어떻게 작동하는지 더 잘 이해할 수 있습니다. 예를 들어 로그인 템플릿에는 해당 동작을 지시하는 특정 코드가 포함되어 있습니다.
2단계: 템플릿 파일에 HTML 코드 추가
웹사이트 디자인을 개인화하려면 템플릿 파일 내에 고유한 HTML 코드를 통합해야 합니다. 기본 로그인 페이지 레이아웃을 수정하려면 로그인 양식과 제출 버튼을 포함하는 {% else %} 조건문에 포함된 콘텐츠를 복제하여 사용자 지정 템플릿에 삽입하는 것이 한 가지 방법입니다. 다음은 이 프로세스를 구현한 샘플입니다:
{% extends 'base.html' %}
{% block content %}
<p>If you have not created an account yet, then please
<a href="{{ signup_url }}">sign up</a> first.</p>
<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' %}">Forgot password?</a>
<button class="primaryAction" type="submit">SIgn in</button>
</form>
{% endblock content %}
앞서 언급한 코드는 Django의 템플릿 상속 메커니즘을 활용하여 base.html 파일에서 속성과 기능을 도출합니다. 최종 결과물이 제공된 로그인 페이지의 예시와 유사하도록 하려면 {{ blocktrans }} 지시문과 같은 불필요한 구성 요소를 모두 삭제해야 합니다.
앞서 언급한 그래픽에 표시된 머리글과 바닥글은 화면에 표시되는 머리글과 바닥글과 다를 수 있습니다.
3단계: 양식에 사용자 지정 스타일 추가
로그인 양식을 단락으로 렌더링하면 {{ form.as_p }} 태그를 사용하여 HTML 단락 요소 내에 해당 내용을 표시합니다. 양식 내의 개별 입력 필드에 스타일 수정을 적용하려면 해당 입력 필드와 관련된 이름 속성을 알고 있어야 합니다.
웹 페이지에 필요한 값을 얻으려면 해당 페이지를 검사하는 것이 좋습니다.
그림은 양식 내의 전자 메일 입력 필드에 할당된 식별자 간의 대응을 보여줍니다.
개별 양식 필드를 프로젝트에 통합하는 한 가지 가능한 방법은 한 번에 하나씩 추가하는 것입니다. 예를 들어 이메일 필드를 다음과 같이 통합할 수 있습니다:
{{ form.login }}
<label for="{{form.login.id_for_label}}">Email</label>
{{ form.login.errors|safe }}
부트스트랩은 반응형 웹 페이지를 빠르게 제작할 수 있도록 미리 디자인된 HTML, CSS 및 JavaScript 구성 요소를 제공하는 널리 사용되는 프런트엔드 프레임워크입니다. 타이포그래피, 양식, 버튼, 탐색 모음, 그리드 등 다양한 스타일링 옵션을 제공하며, Sass 또는 Less 변수를 통해 고도로 사용자 정의할 수 있습니다. 이러한 스타일을 Django 프로젝트에 통합하면 코드를 처음부터 작성하지 않고도 웹사이트의 시각적 매력을 향상시킬 수 있습니다. Django 프로젝트에 부트스트랩을 적용하려면 index.html 파일과 같은 기본 템플릿의 관련 파일에 필요한 링크를 추가하여 부트스트랩을 포함하기만 하면 됩니다. 추가한 후에는 Django 템플릿 내의 HTML 요소에 직접 부트스트랩 클래스를 활용하여 다양한 디자인 속성을 즉시 적용할 수 있습니다.
<div class="form-floating form-group">
{{ form.login }}
<label for="{{form.login.id_for_label}}">Email</label>
{{ form.login.errors|safe }}
</div>
앞서 언급한 코드를 통합하면 디자인 템플릿에 부트스트랩 양식 요소가 도입됩니다. 따라서 개별화된 모양 기본 설정을 수용하면서 추가 데이터 입력 필드를 추가할 수 있습니다. 미적 목적으로 부트스트랩을 사용하는 것을 선호하지 않는다면, 사용자 정의 양식 꾸미기 기법을 사용할 수 있는 django-crispy-forms가 대안이 될 수 있습니다. 다음 그림에서 볼 수 있듯이, 이 특정 사례에서는 시각적 보강을 위해 부트스트랩을 사용합니다.
<div class="container d-flex justify-content-center align-items-center vh-100">
<form method="post" class="login" id="signup_form" action="{% url 'account_login' %}">
<div class="text-center mb-4">
<h1 class="h3 mb-3 font-weight-normal">Sign in</h1>
</div>
{{ form.non_field_errors | safe }}
{% csrf_token %}
<div class="row g-3">
<div class="col-12">
<div class="form-floating form-group">
{{ form.login }}
<label for="{{form.login.id_for_label}}">Email</label>
{{ form.login.errors|safe }}
</div>
</div>
<div class="col-12">
<div class="form-floating form-group my-3">
{{ form.password }}
<label for="{{form.password.id_for_label}}">Password</label>
{{ form.password.errors|safe }}
</div>
</div>
<div class="col-12">
<div class="form-check">
<label for="{{form.remember.id_for_label}}" class="form-check-label">Remember me</label>
{{ form.remember }}
</div>
</div>
<div class="col-6">
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
{% endif %}
<button class="btn btn-primary w-100 py-3 bg-accent" type="submit">Sign in</button>
<a class="button secondaryAction text-accent" href="{% url 'account_reset_password' %}">Forgot
Password?</a>
</div>
</div>
</form>
</div>
앞서 설명한 다이어그램에 묘사된 시각적 표현을 재현하는 것은 앞의 코드 스니펫에 제공된 프로그래밍 코드를 활용하여 수행할 수 있으며, 그 코드는 다음과 같습니다:
공식 문서 을 참조하여 django-auth의 양식에 대해 자세히 알아볼 수 있습니다.
오버라이드 템플릿
장고-올오토는 개인 선호도에 따라 사용자 정의할 수 있는 수많은 표준화된 템플릿을 제공합니다. 이 튜토리얼에 설명된 방법론을 준수하면 Django-Allauth의 레퍼토리 내의 모든 템플릿을 효과적으로 수정할 수 있습니다. 인증 프레임워크 관리에 이 패키지를 사용하여 소프트웨어 애플리케이션의 다른 중요한 측면의 개발에 집중할 수 있도록 하는 것이 좋습니다.