django-allauthを使用してDjangoアプリを認証する方法

チュートリアル
Django

著者は、フリーおよびオープンソース基金をWrite for Donationsプログラムの一環として寄付先として選択しました。

はじめに

認証は、システムに認証済みのユーザーを確認するプロセスであり、ソフトウェアアプリケーションを不正なアクセスから保護するのに役立ちます。ユーザーを認証するためには、ユーザー名/パスワードの確認、生体認証、または画像パスワードなどのさまざまな技術が使用されます。Djangoウェブフレームワークでは、認証処理をハードコーディングするか、django-allauth、django-rest-social-auth、django-registrationなどの既製のモジュールを使用することができます。

django-allauthは、アカウントの認証、登録、管理、およびサードパーティー（ソーシャル）アカウントの認証を扱うDjangoアプリケーションの統合セットです。ローカルとソーシャルの両方のログインを処理できる能力から、最も人気のある認証モジュールの1つです。アプリの共通コードベースで追加のOAuth/OAuth2プロバイダーのサポートを追加できます。認証ロジックを処理するだけでなく、デザインニーズに合わせてカスタマイズすることもできます。

このチュートリアルでは、django-allauthを使用して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認証と共に使用するシンプルな1ページの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', # 新しいアプリ
]

ウェブサイトのために1つのページをレンダリングしているため、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 ディレクトリパスから、次のコマンドを使用して Web アプリを起動します。

  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管理ダッシュボードを介したユーザーのユーザー名によるログインに使用されます。2番目の行は、django-allauth 特有の認証メソッド、例えばOAuthプロバイダーによるログインに使用されます。

次に、次のように2つの認証リダイレクトを追加します:

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 — サードパーティ認証プロバイダの追加

このステップでは、django-allauthを使用してDjangoアプリにサードパーティ認証を追加します。Google、Facebook、Twitterなどの多くのサードパーティ認証プロバイダをdjango-allauthと使用できます。django-allauthのプロバイダ一覧に記載されている他のプロバイダも含まれます。

このチュートリアルでは、ソーシャルログインとしてDigitalOceanを使用します。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とクライアントシークレットにアクセスしてください：

これらの詳細をコピーして保存してください。

DigitalOceanでAPIを設定した後、Djangoアプリケーションの管理パネルに追加できます。Django管理パネルにアクセスするには、まずスーパーユーザーが必要です。次のコマンドを使用してスーパーユーザーを作成できます：

  1. python manage.py createsuperuser

リクエストされた詳細を入力して、サーバーを再度実行してください。

URL http://127.0.0.1:8000/admin/ を使用して管理パネルにアクセスします。スーパーユーザーの詳細でログインし、以下のような管理ダッシュボードにアクセスします:

左パネルで、サイト をクリックし、サイトの追加 + をクリックして、既存のサイト（example.com）を編集するか、http://127.0.0.1:8000 を使用して新しいサイトを追加します:

この設定は、DigitalOcean の認証が実装されるサイトの URL サーバーを設定します。この場合、http://127.0.0.1:8000 です。

保存 をクリックします。

次に、ホーム をクリックしてメインダッシュボードに戻ります。 ソーシャルアカウント セクションで、ソーシャルアプリケーション をクリックし、ソーシャルアプリケーションの追加 + をクリックします。DigitalOcean コンソールからコピーした詳細を使用して、サービスプロバイダー、アプリ名、クライアント ID、およびクライアントシークレットキーの必要な詳細を入力します。サイト の下で、利用可能なサイト の下に作成したばかりのサイトを選択し、矢印（—>）をクリックしてそれを 選択されたサイト パネルに移動させます。詳細を保存するために 保存 ボタンをクリックします。

この設定は、ソーシャルログインプロバイダーに接続するために使用されます。これには、クライアントID と シークレットキー が使用されます。これらは、アプリケーションの公開識別子と機密識別子としてそれぞれ使用され、アプリケーションを認証し、DigitalOcean の API にリクエストを行うために使用されます。

このステップでは、Djangoアプリケーションのサードパーティ認証プロバイダーとして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認証に関する詳細は、django-allauth を使用したDjango認証について、django-allauthプロバイダーのいずれかで詳細をご覧ください。 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