Home-theater-designers
django-allauth는 Django 앱용 인증 시스템을 빠르고 쉽게 구축할 수 있는 Django 패키지입니다. 앱의 다른 중요한 부분에 집중할 수 있도록 템플릿이 내장되어 있습니다.
MUO 오늘의 영상 콘텐츠를 계속하려면 스크롤하세요.
내장된 템플릿이 유용하기는 하지만 최상의 UI가 없기 때문에 템플릿을 변경하고 싶을 것입니다.
django-allauth를 설치하고 구성하는 방법
몇 가지 간단한 단계를 따르면 django-allauth를 Django 프로젝트에 원활하게 설치할 수 있습니다.
- 설치할 수 있습니다 django-allauth Pip 패키지 관리자를 사용하여 패키지:
pip install django-allauth - 프로젝트 설정 파일에서 다음 앱을 설치된 앱에 추가하세요:
INSTALLED_APPS = [
"""
Add your other apps here
"""
# Djang-allauth configuration apps
'django.contrib.sites',
'allauth',
'allauth.account',
'allauth.socialaccount', # add this if you want to enable social authentication
] - 설정 파일에 인증 백엔드 추가:
AUTHENTICATION_BACKENDS = [
'django.contrib.auth.backends.ModelBackend',
'allauth.account.auth_backends.AuthenticationBackend',
] - 프로젝트에 사이트 ID 추가:
SITE_ID = 1 - django-allauth:
from django.urls import path, include에 대한 URL 구성
urlpatterns = [
# Djang-allauth url pattern
path('accounts/', include('allauth.urls')),
]
위 구성을 올바르게 수행했다면 다음으로 이동할 때 이와 같은 템플릿이 표시되어야 합니다. http://127.0.0.1:8000/accounts/signup/ :
다음으로 이동하여 사용 가능한 URL 목록을 볼 수 있습니다. http://127.0.0.1:8000/accounts/ ~와 함께 디버그=참 설정 파일에 있습니다.
django-allauth에서 로그인 템플릿을 재정의하는 방법
먼저, 다음을 구성해야 합니다. 템플릿 폴더를 아직 작성하지 않은 경우. 설정 파일을 열고 다음으로 이동합니다. 템플릿 목록. 그 안에서 DIRS 목록을 작성하고 다음과 같이 수정하세요.
'DIRS': [BASE_DIR/'templates'],
당신이 가지고 있는지 확인하십시오 템플릿 프로젝트의 루트 디렉터리에 있는 폴더입니다. 다음 단계에 따라 django-allauth의 기본 로그인 템플릿을 재정의할 수 있습니다.
1단계: 템플릿 파일 만들기
당신의 템플릿 폴더,라는 새 폴더를 만듭니다. 계정 django-allauth와 관련된 템플릿을 보유합니다.
등록 및 로그인 템플릿은 다음과 같아야 합니다. signup.html 그리고 로그인.html 각기. 다음을 열어서 올바른 템플릿 이름을 확인할 수 있습니다. Python 가상 환경 그리고 다음으로 이동 Lib > 사이트 패키지 > allauth > 템플릿 > 계정 템플릿을 찾으려면 폴더를 선택하세요. 템플릿이 어떻게 작동하는지 이해하려면 코드를 살펴봐야 합니다. 예를 들어 로그인 템플릿에는 다음 코드가 포함되어 있습니다.
2단계: 템플릿 파일에 HTML 코드 추가
파일을 생성한 후 템플릿에 대한 사용자 정의 HTML 코드를 추가해야 합니다. 예를 들어 위의 로그인 템플릿을 재정의하려면 {% 또 다른 %} 양식과 제출 버튼이 포함된 블록을 만들어 사용자 정의 템플릿에 추가하세요. 예는 다음과 같습니다.
내 문자 메시지가 배달되지 않는 이유
{% 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 주형. 다음과 같은 불필요한 태그를 제거했는지 확인하세요. {% 블록트랜스 %} 꼬리표. 이 작업을 수행했다면 로그인 페이지는 다음과 유사해야 합니다.
위 이미지의 머리글과 바닥글은 귀하의 것과 다릅니다.
3단계: 양식에 사용자 정의 스타일 추가
이전 단계에서 로그인 양식은 다음을 사용하여 단락으로 렌더링되었습니다. {{ form.as_p }} 꼬리표. 양식에 스타일을 추가하려면 이름 각 입력 필드와 관련된 속성입니다.
페이지를 검사하여 필요한 값을 얻을 수 있습니다.
위 이미지는 다음과 관련된 이름 속성을 보여줍니다. 이메일 양식의 필드입니다.
이제 프로젝트에 양식 필드를 개별적으로 추가할 수 있습니다. 예를 들어 다음과 같이 이메일 필드를 추가할 수 있습니다.
{{ form.login }}
<label for="{{form.login.id_for_label}}">Email</label>
{{ form.login.errors|safe }}
당신은 할 수 있습니다 Django 프로젝트에 Bootstrap을 사용하세요 양식 스타일을 쉽게 지정할 수 있습니다. 예는 다음과 같습니다.
<div class="form-floating form-group">
{{ form.login }}
<label for="{{form.login.id_for_label}}">Email</label>
{{ form.login.errors|safe }}
</div>
위의 코드는 Bootstrap 양식 클래스를 양식에 추가합니다. 이제 필요한 다른 필드를 추가하고 원하는 대로 스타일을 지정할 수 있습니다. 스타일링에 Bootstrap을 사용하는 것을 좋아하지 않는다면, django-crispy-forms는 양식 스타일 지정의 대안입니다. . 아래 예에서는 스타일 지정에 Bootstrap을 사용합니다.
<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-allauth의 양식에 대해 자세히 알아보려면 다음을 읽어보세요. 공식 문서 .
django-allauth의 모든 템플릿을 재정의하세요.
django-allauth에는 재정의할 수 있는 많은 기본 템플릿이 포함되어 있습니다. 이 가이드의 단계에 따라 django-allauth의 모든 템플릿을 재정의할 수 있습니다. 인증 시스템을 처리하기 위해 이 패키지를 사용하는 것을 고려해야 합니다. 그러면 애플리케이션의 다른 중요한 기능을 구축하는 데 집중할 수 있습니다.