django-allauth를 사용하여 Django 앱 인증하는 방법

튜토리얼
Django

저자는 자유 및 오픈 소스 기금을 기부 쓰기 프로그램의 일환으로 선정했습니다.

소개

인증은 시스템에 실제 또는 등록된 사용자를 확인하는 프로세스로, 소프트웨어 응용 프로그램을 무단으로 액세스하는 것을 방지하는 데 도움이 됩니다. 사용자를 인증하는 데는 사용자 이름/암호 확인, 인간 바이오메트릭스 또는 이미지 암호와 같은 여러 기술이 사용됩니다. Django 웹 프레임워크에서는 인증 처리를 하드 코딩할 수도 있고 django-allauth, django-rest-social-auth, django-registration 등의 준비된 모듈을 사용할 수도 있습니다.

django-allauth는 계정 인증, 등록, 관리 및 타사 (소셜) 계정 인증을 다루는 Django 응용 프로그램의 통합 세트입니다. 로컬 및 소셜 로그인을 모두 처리할 수 있는 능력 때문에 가장 인기 있는 인증 모듈 중 하나입니다. 앱의 공통 코드 기반으로 추가 OAuth/OAuth2 공급자를 지원할 수 있습니다. 인증 로직을 처리하는 데 뿐만 아니라 디자인 요구 사항에 맞게 사용자 정의할 수도 있습니다.

이 튜토리얼에서는 DigitalOcean 계정을 사용하여 인증하는 Django 애플리케이션을 구축합니다.

전제 조건

이 튜토리얼을 진행하려면 다음이 필요합니다:

단계 1 — 개발 환경 설정

이 단계에서는 Django 앱 개발 환경을 설정합니다. 가상 환경을 활성화하고 프로젝트 종속성을 설치합니다.

먼저 새 디렉터리를 만들고 해당 디렉터리로 변경하십시오. 이 튜토리얼은 Django-Allauth를 사용합니다:

  1. mkdir Django-Allauth

  2. cd Django-Allauth

이 디렉터리를 이 튜토리얼의 나머지 부분에 사용하십시오.

다음으로, Pipenv를 사용하여 가상 환경을 만듭니다. 먼저 pipenv를 설치하세요:

  1. pip3 install pipenv

다음으로, 가상 환경을 활성화하세요:

pipenv shell

다음으로, pipenv를 사용하여 개발에 사용할 종속성(django와 django-allauth)을 설치하세요:

  1. pipenv install django

  2. pipenv install django-allauth

이제 개발 환경을 설정했습니다. 다음으로 Django 애플리케이션 개발을 시작하겠습니다.

단계 2 — Django 애플리케이션 생성

이 단계에서는 django-allauth 인증에 사용할 간단한 한 페이지 Django 애플리케이션을 만듭니다.

애플리케이션을 생성하는 첫 번째 단계는 이 튜토리얼에서 Authentication으로 불리는 프로젝트 애플리케이션을 생성하는 것입니다:

  1. django-admin startproject Authentication

다음으로, 프로젝트 디렉토리 경로에 액세스하여 애플리케이션을 위한 앱을 생성하세요. 이 튜토리얼에서는 main을 사용합니다:

  1. cd Authentication

  2. python manage.py startapp main

프로젝트 디렉토리에서 nano 또는 선호하는 텍스트 편집기를 사용하여 settings.py를 엽니다:

  1. nano Authentication/settings.py

설치된 앱 목록에 main 앱을 다음과 같이 추가하세요:

Django-Allauth/Authentication/Authentication/settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'main', # 새로운 앱
]

웹사이트를 위해 단일 페이지를 렌더링하므로 models.py 파일을 수정할 필요가 없습니다.

다음으로, 프로젝트의 urls.py 파일을 편집하고 다음 변경 사항을 적용하십시오:

Django-Allauth/Authentication/Authentication/urls.py
from  django.contrib  import  admin
from  django.urls  import  path, include

urlpatterns = [
path('', include('main.urls')),
path('admin/', admin.site.urls),
]

urls.py 파일은 Django 앱의 경로 지정에 사용됩니다.

다음으로, main 앱에서 다른 urls.py 파일을 만들고 다음 줄을 추가하십시오:

Django-Allauth/Authentication/main/urls.py
from  django.urls  import  path
from . import views 

urlpatterns = [
path('', views.homepage, name='homepage'),
]

이 새로운 urls.py 파일은 main 앱의 파일을 경로 지정하는 데 사용됩니다.

다음으로, views.py 파일을 열고 다음 줄을 추가하십시오:

Django-Allauth/Authentication/main/views.py
from  django.shortcuts  import  render

def  homepage(request):
    return  render(request=request,
    template_name= 'home.html',)

views.py 파일은 템플릿 디렉터리의 home.html 페이지를 렌더링하는 데 사용됩니다.

다음으로, 프로젝트의 루트 폴더 (Authentication)에서 templates라는 새 디렉터리를 만듭니다. templates 디렉터리에서 home.html이라는 HTML 페이지를 만들고 다음 줄을 추가하십시오:

Authentication/templates/home.html
  1. 

  2. <html>

  3.     <head>

  4.         <style>

  5.         h3 {text-align: center;}

  6.         p {text-align: center;}

  7.         </style>

  8.     </head>

  9.     <body>        

  10.     <!-- 컴파일된 및 최소화된 CSS -->

  11.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  12. 

  13.     <!-- 컴파일된 및 최소화된 JavaScript -->

  14.     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  15.             

  16.         <nav>

  17.             <div class="nav-wrapper"style="background-color: teal">

  18.               <a href="#" class="brand-logo">Django-Allauth</a>

  19.             </div>

  20.           </nav>

  21.         <h3 style=center>Welcome Home</h3>

  22.         <div class="row">

  23.             <div class="col s12 m6">

  24.               <div class="card whitedarken-1">

  25.                 <div class="card-content blue-text">

  26.                   <span class="card-title">Lorem Ipsum</span>

  27.                   <p>{% lorem 1 p %}</p>

  28.                 </div>

  29.               </div>

  30.             </div>  

  31.             <div class="col s12 m6">

  32.               <div class="card white darken-1">

  33.                 <div class="card-content blue'-text">

  34.                   <span class="card-title">Lorem Ipsum</span>

  35.                   <p>{% lorem 1 p %}</p>

  36.                 </div>

  37.               </div>

  38.             </div>          

  39.           </div>

  40.           <div class="container text-dark mt-5">

  41.             <div class="row justify-content-md-center">

  42.               <div class="col md-5 p-3">

  43.                 {% if user.is_authenticated%}

  44.                 <p>Welcome, {{user.username}}</p>

  45.                 <a href="http://127.0.0.1:8000/accounts/logout/">Logout</a>

  46.                 {%else%}

  47.                 <p>Please <a href="http://127.0.0.1:8000/accounts/login/">Login</a></p>

  48.                 {%endif%}

  49.               </div>

  50.             </div>

  51.           </div>

  52.     </body>

  53. </html>

이 데모 웹 페이지에는 카드에 렌더링된 샘플 텍스트와 나중에 인증에 사용할 로그인 영역이 포함되어 있습니다.

웹 페이지는 Material Design을 기반으로 한 무료 오픈 소스 콘텐츠 전송 프론트 엔드 프레임워크인 Materialize CDN을 사용하여 스타일이 지정되었습니다. Materialize CSS, JavaScript 및 jQuery 라이브러리를로드하여 아름답고 반응 형 프로젝트를 만드는 데 도움이됩니다. CDN에서 스타일 파일을로드하려면 인터넷 연결이 있어야합니다.

Django-Allauth/Authentication 디렉터리 경로에서 다음 명령을 사용하여 웹 앱을 시작하십시오:

  1. python manage.py runserver

당신은 다음과 유사한 출력을 볼 것입니다:

Output
Performing system checks...

System check identified no issues (0 silenced).
June 10, 2022 - 13:35:20
Django version 4.0.4, using settings 'Authentication.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

URL http://127.0.0.1:8000/로 이동합니다. 다음과 같은 웹 사이트가 표시됩니다:

샘플 웹 사이트에는 더미 텍스트가 표시되며 하단에 로그인 영역이 포함되어 있습니다. 인증을 설정한 후 웹 페이지의 로그인 링크를 나중에 사용할 것입니다.

이 단계에서는 원페이지 애플리케이션을 만들었습니다. 이제 django-allauth를 사용하여 인증을 처리하겠습니다.

단계 3 — django-allauth 구성

django-allauth를 사용하여 인증하려면 먼저 설정해야 합니다. 이는 프로젝트 파일을 몇 가지 변경하여 수행됩니다.

편집할 Authentication/settings.py를 엽니다. INSTALLED_APPS 아래에 하이라이트된 라인을 추가하여 django-allauth 앱과 DigitalOcean을 소셜 로그인 제공자로 등록합니다:

Django-Allauth/Authentication/Authentication/settings.py
INSTALLED_APPS = [
    
    # 필수 앱 추가 확인
    'django.contrib.sites',
	  # Django-allauth 앱
    'allauth',
    'allauth.account',
    'allauth.socialaccount',
    # Digital Ocean의 소셜/외부 로그인 제공자
    'allauth.socialaccount.providers.digitalocean',
]

다음으로 다음과 같이 TEMPLATES 섹션을 업데이트합니다:

[label Django-Allauth/Authentication/Authentication/settings.py]  
# 컨텍스트 프로세서 사양:
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
        'context_processors': [         
	 'django.template.context_processors.request',
            ],
        },
    },
]

새로운 라인은 Django-Allauth에서 HTTP 요청을 처리합니다.

다음으로, AUTHENTICATION_BACKENDS 섹션을 만들고 다음 라인을 추가하세요:

Django-Allauth/Authentication/Authentication/settings.py

AUTHENTICATION_BACKENDS = [
    'django.contrib.auth.backends.ModelBackend',
	  'allauth.account.auth_backends.AuthenticationBackend',
    ]

첫 번째 라인은 나중에 Django 관리 대시보드를 통해 사용자를 사용자 이름으로 로그인하는 데 사용됩니다. 두 번째 라인은 OAuth 제공자에 의한 로그인과 같은 django-allauth 특정 인증 방법에 사용됩니다.

다음으로, 다음과 같이 두 개의 인증 리디렉션을 추가하세요:

Django-Allauth/Authentication/Authentication/settings.py

LOGIN_REDIRECT_URL = 'homepage'
LOGOUT_REDIRECT_URL = 'homepage'

이러한 라인은 사용자를 인증 후 홈페이지로 리디렉션하고 웹사이트에서 로그아웃 후에도 리디렉션합니다.

settings.py에 대한 마지막 편집은 사이트의 URL의 ID를 설정하는 것입니다. 파일의 끝에 다음 라인을 추가하세요:

Django-Allauth/Authentication/Authentication/settings.py
# 사이트의 URL ID를 설정합니다.
SITE_ID =1

이 라인은 settings.py 파일과 관련된 Site 객체의 데이터베이스 ID를 지정합니다.

파일을 저장하고 닫으세요.

다음으로, 루트 urls.py 파일을 편집하세요. Allauth 앱의 경로를 다음과 같이 추가하세요:

Django-Allauth/Authentication/Authentication/urls.py

urlpatterns = [
	...
	path('accounts/', include('allauth.urls')),
]

이 새로운 라인은 allauth 앱의 URL 파일을 경로 지정하는 데 사용됩니다. django-allauth 앱에는 HTML 페이지에 대한 URL 세트가 포함되어 있습니다. allauth에서 제공하는 일부 URL에는 account_login, account_logout, account_set_password 등이 있습니다. 자세한 정보는 django-allauth 제품 설명서를 확인하세요.

파일을 저장하고 닫으세요.

이 단계에서는 응용 프로그램에서 django-allauth를 설정하고 인증에 사용할 준비가되었습니다.

단계 4 — 제 3자 인증 공급자 추가

이 단계에서는 django-allauth를 사용하여 Django 앱에 제 3자 인증을 추가합니다. django-allauth와 함께 사용할 수있는 많은 제 3자 인증 공급자가 있습니다. 이에는 Google, Facebook, Twitter 및 django-allauth 제공 업체 목록에 나열된 기타 사회적 로그인이 포함됩니다.

이 튜토리얼에서는 소셜 로그인으로 DigitalOcean을 사용합니다. DigitalOcean과 같은 인증 공급자를 추가하려면 먼저 등록해야합니다.

디지털오션 계정에 로그인하고 DigitalOcean 클라우드 플랫폼으로 이동하여 다음과 같은 대시 보드에 액세스하십시오:

대시 보드 왼쪽의 API 버튼을 클릭하여 OAuth 애플리케이션을 생성하십시오. 애플리케이션 및 API 대시 보드에서 OAuth 애플리케이션 버튼을 클릭하여 사이트의 OAuth 등록에 액세스하십시오. 다음과 같은 대시 보드가 표시됩니다:

다음으로 앱의 OAuth 애플리케이션 등록을 시작하려면 OAuth 애플리케이션 등록 버튼을 클릭하세요. 팝업 양식이 나타납니다:

프로젝트 이름 (Django-Allauth) 및 원하는 설명을 입력하세요. 홈페이지 URL 입력 섹션에 다음 URL 중 하나를 입력하세요:

  • http://127.0.0.1:8000
  • http://localhost:8000

콜백 URL 입력 섹션에 다음 리디렉션 URL 중 하나를 입력하세요:

  • http://127.0.0.1:8000/accounts/digitalocean/login/callback/
  • http://localhost:8000/accounts/digitalocean/login/callback/

참고: 데모 목적으로 이 튜토리얼에서는 localhost:8000 또는 127.0.0.1:8000을 사용합니다. 앱을 프로덕션 환경으로 배포할 때는 URL을 도메인 이름을 포함하여 변경해야 합니다.

프로젝트 정보를 입력한 후 OAuth 애플리케이션 등록을 클릭하여 변경 사항을 저장하세요. 그러면 애플리케이션 대시보드로 리디렉션됩니다. 애플리케이션이 다음과 같이 생성된 것을 확인할 수 있습니다:

애플리케이션 이름을 클릭하여 클라이언트 ID와 클라이언트 비밀번호에 액세스하세요:

이러한 세부 정보를 복사하여 나중에 사용하세요.

디지털오션에서 API를 설정한 후, Django 애플리케이션의 관리 패널에 추가할 수 있습니다. Django 관리 패널에 액세스하려면 먼저 다음 명령을 사용하여 슈퍼 사용자를 만들어야 합니다:

  1. python manage.py createsuperuser

요청된 세부 정보를 입력하고 서버를 다시 실행하십시오.

URL을 사용하여 관리자 패널에 액세스하십시오. http://127.0.0.1:8000/admin/. 슈퍼 사용자 세부 정보로 로그인하면 다음과 같은 관리자 대시 보드에 액세스할 수 있습니다:

왼쪽 패널에서 사이트를 클릭 한 다음 사이트 추가 +를 클릭하여 기존 사이트(example.com)를 편집하거나 새로운 사이트를 추가하십시오. http://127.0.0.1:8000을 사용하여 아래와 같이 표시됩니다:

이 구성은 사이트의 URL 서버를 설정하여 DigitalOcean의 인증이 구현될 위치를 설정합니다. 이 경우 http://127.0.0.1:8000입니다.

저장을 클릭하십시오.

다음으로, 홈을 클릭하여 메인 대시 보드로 이동하십시오. 소셜 계정 섹션에서 소셜 애플리케이션을 클릭 한 다음 소셜 애플리케이션 추가 +을 클릭하십시오. DigitalOcean 콘솔에서 복사한 세부 정보를 사용하여 서비스 제공자, 앱 이름, 클라이언트 ID 및 클라이언트 비밀 키에 필요한 세부 정보를 입력하십시오. 사이트 아래에서 사용 가능한 사이트에서 방금 생성한 사이트를 선택하고 화살표 (—>)를 클릭하여 선택한 사이트 패널로 이동하십시오. 세부 정보를 저장하려면 저장 버튼을 클릭하십시오.

이 구성은 소셜 로그인 공급자를 연결하기 위해 클라이언트 ID와 비밀 키를 사용합니다. 이것들은 각각 애플리케이션의 공개 식별자 및 비밀 식별자로 사용되며 애플리케이션을 인증하고 DigitalOcean의 API에 요청을 만드는 데 사용됩니다.

이 단계에서는 Django 앱에 대한 제3자 인증 제공업체로 DigitalOcean을 구성했습니다. 최종 단계에서는 DigitalOcean 계정을 사용하여 사이트에 로그인합니다.

단계 5 — 인증 테스트

이 단계에서는 DigitalOcean 계정을 사용하여 Django 사이트에 로그인합니다. 먼저 관리자로 로그아웃하고 로그인 페이지(http://127.0.0.1:8000/accounts/login/)로 이동하십시오:

DigitalOcean 링크를 클릭하여 DigitalOcean을 사용하여 로그인합니다. (스크린샷에 표시된 대로 다른 인증 방법은 사용자 이름과 비밀번호를 사용하여 가입하는 것입니다.)

다음 화면에서 계속을 클릭하십시오. DigitalOcean 팀 계정을 선택하고 애플리케이션 승인 버튼을 클릭해야하는 새 페이지가 나타납니다.

승인은 개인에게 리소스에 액세스 할 수있는 능력을 부여하는 과정입니다. 이 경우 웹 사이트에게 DigitalOcean의 로그인 자격 증명에 대한 액세스 권한을 부여합니다.

로그인 한 후에는 다음과 같이 홈페이지가 표시됩니다:

성공적인 로그인 후 웹 사이트에 사용자 이름과 로그아웃 링크가 표시됩니다.

참고: 이 과정 중에 SocialApp matching query does not exist라는 오류 메시지를 받을 수 있습니다:

이 문제는 일반적으로 사이트 ID 번호를 잘못 참조할 때 발생합니다. 예를 들어 사이트에서 첫 번째 사이트로 example.com을 사용하는 경우입니다. 이를 해결하려면 settings.py에서 SITE_ID를 찾아 해당 오류가 사라질 때까지 값을 1씩 증가시킵니다.

이 단계에서는 DigitalOcean 로그인 정보를 사용하여 사이트에 로그인하여 인증 구성을 테스트했습니다.

결론

이 튜토리얼에서는 django-allauth를 사용하여 소셜 인증을 처리하는 Django 앱을 구축했습니다. DigitalOcean 소셜 로그인을 통합하고 사이트에 로그인하여 테스트했습니다. 프로젝트 코드는 GitHub에서 확인할 수 있습니다.

다음 단계로는 django-allauth를 사용하여 다른 Django 애플리케이션 프로젝트를 django-allauth 제공자 중 하나를 사용하여 인증할 수 있습니다. django-allauth를 사용한 Django 인증에 대한 자세한 내용은 Django-Allauth 공식 문서와 인증에 대한 Django 공식 문서를 참조하세요.

allauth 페이지에 스타일을 추가할 수도 있습니다. 기본 기본 스타일이 있습니다. allauth 페이지에 스타일을 추가하려면 GitHub에서 django-allauth 프로젝트를 복제하고 복제된 저장소에서 django-allauth/allauth/templates 디렉토리를 사용하여 페이지를 스타일링할 수 있습니다.

Source:
https://www.digitalocean.com/community/tutorials/how-to-authenticate-django-apps-using-django-allauth