NuxtjsとDjango RESTフレームワークによるユーザ認証の設定［パート‐1］

チュートリアルは2つの部分に分割されている-バックエンドを設定し、フロントエンドを設定します.
repoには二つの分岐があります.part-1 and part-2 . part-1 このチュートリアルのファイルを含みます.part-2 含む
このチュートリアルおよび次のファイル.
チュートリアル2
ギタブレポhttps://github.com/IgnisDa/django-nuxtjs-authentication
トークン認証を使用しますdjoser パッケージ
認証バックエンドAPIを実装して、nuxtjsフロントエンドでそれを消費してください.
注意:簡潔さのために、私はすべてのコメントを省略します
作業の説明しかしながら、コードはよくコメントされます
githubリポジトリ経由でアクセスできます.

必要条件

Djangoレストフレームワークに精通して

Nuxt Authに関する知識

バックエンドの設定
次のパッケージを仮想環境にインストールします

ジャンゴ

フレームワーク

ドジョーザ

ジャンゴコープス

httpie

メールの検証

共通のディレクトリを作ることから始めるnuxtjs+drf-user-auth/ フロントエンド(Nuxtjs)とバックエンド(Djangoレストフレームワーク)が別々に住んでいるところfrontend/ and backend/ ディレクトリ.

mkdir nuxtjs+drf-user-auth && cd nuxtjs+drf-user-auth/
django-admin startproject backend && cd backend/
python manage.py startapp accounts

新しいアプリとアドオンを追加しますsettings.py .

# backend/settings.py
INSTALLED_APPS = [
  # other stuff
  'rest_framework',
  'rest_framework.authtoken',
  'corsheaders',
  'accounts.apps.AccountsConfig',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    # Other stuff
]

次に、ユーザー認証を処理するカスタムユーザーモデルを定義します.これにより、ユーザモデルにより多くのフィールドを追加することができます
デフォルト値django.contrib.auth.models.User 提供する
用途email の代わりにデフォルト識別子としてusername .

# accounts/models.py
from django.contrib.auth.models import AbstractUser
from django.db import models
from django.utils.translation import gettext_lazy as _

from . import managers # we will write this file shortly


class CustomUser(AbstractUser):
    username = None
    email = models.EmailField(_('email address'), unique=True)
    bio = models.TextField()
    gender = models.CharField(
        max_length=140,
        null=True,
        choices=(
            ('Male', 'Male'),
            ('Female', 'Female'),
            ('Other', 'Other')
        )
    )
    birth_date = models.DateField(null=True, blank=True)
    pro = models.BooleanField(default=False)

    USERNAME_FIELD = 'email'
    REQUIRED_FIELDS = []

    objects = managers.CustomUserManager()

    def __str__(self):
        return f"{self.email}'s custom account"

# accounts/managers.py
from django.contrib.auth.base_user import BaseUserManager
from django.utils.translation import gettext_lazy as _
from validate_email import validate_email


class CustomUserManager(BaseUserManager):
    def create_user(self, email, password, **extra_fields):
        if not email:
            raise ValueError(_('The Email must be set'))
        email = self.normalize_email(email)
        if not validate_email(email):
            raise ValueError(_('Invalid email set'))
        user = self.model(email=email, **extra_fields)
        user.set_password(password)
        user.save()
        return user

    def create_superuser(self, email, password, **extra_fields):
        extra_fields.setdefault('is_staff', True)
        extra_fields.setdefault('is_superuser', True)
        extra_fields.setdefault('is_active', True)

        if extra_fields.get('is_staff') is not True:
            raise ValueError(_('Superuser must have is_staff=True.'))
        if extra_fields.get('is_superuser') is not True:
            raise ValueError(_('Superuser must have is_superuser=True.'))
        return self.create_user(email, password, **extra_fields)

関連する設定をsettings.py ファイル.

# backend/settings.py
AUTH_USER_MODEL = 'accounts.CustomUser'

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': [
        'rest_framework.authentication.TokenAuthentication',
        'rest_framework.authentication.BasicAuthentication',
        'rest_framework.authentication.SessionAuthentication',
    ],
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.IsAuthenticated',
    ]
}

次に、基本的なURLを設定します.

# backend/urls.py
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('accounts/', include('accounts.urls')),
    path('', include('djoser.urls.authtoken')),
    path('admin/', admin.site.urls),
]

ランmakemigrations , migrate , を使って新しいスーパーユーザを作成するcreatesuperuser . 開発サーバーを起動するrunserver , and
その後token/login/ あなたのブラウザで.正しい資格情報を入力します
そして、auth_tokenプロパティ.また訪問token/logout/ , それは使えませんが.
次にシリアライズを設定しますCustomUser モデル.

# accounts/serializers.py
from django.contrib.auth import get_user_model
from rest_framework import serializers, validators

CustomUser = get_user_model()


class CustomUserSerializer(serializers.ModelSerializer):
    email = serializers.CharField(
        write_only=True, validators=[validators.UniqueValidator(
            message='This email already exists',
            queryset=CustomUser.objects.all()
        )]
    )
    password = serializers.CharField(write_only=True)
    birth_date = serializers.CharField(required=False)
    bio = serializers.CharField(required=False)
    gender = serializers.CharField(required=False)
    last_name = serializers.CharField(required=False)
    first_name = serializers.CharField(required=False)
    birth_date = serializers.CharField(required=False)

    class Meta:
        model = CustomUser
        fields = ('first_name', 'last_name', 'email',
                  'password', 'bio', 'gender', 'birth_date')


class CustomUserRetrieveSerializer(serializers.ModelSerializer):
    birth_date = serializers.CharField(required=False)
    bio = serializers.CharField(required=False)
    gender = serializers.CharField(required=False)

    class Meta:
        model = CustomUser
        fields = ('first_name', 'last_name', 'email',
                  'bio', 'gender', 'birth_date', 'id')

次に、これらのserializersを使用してフロントエンドにデータを配信するビューとビューセットを定義します.

# accounts/views.py
from django.contrib.auth import get_user_model
from rest_framework import generics, permissions

from . import serializers

CustomUser = get_user_model()


class UserRetrieveUpdateDestroyAPIView(generics.RetrieveUpdateDestroyAPIView):
    queryset = CustomUser.objects.all()
    serializer_class = serializers.CustomUserRetrieveSerializer
    permission_classes = (permissions.IsAuthenticated,)


    def get_object(self):
        return self.request.user

# accounts/viewsets.py
from django.contrib.auth import get_user_model
from rest_framework import permissions, viewsets

from . import serializers

CustomUser = get_user_model()


class CustomUserModelViewSet(viewsets.ModelViewSet):
    serializer_class = serializers.CustomUserSerializer
    permission_classes = (permissions.AllowAny,)
    queryset = CustomUser.objects.all()

    def perform_create(self, serializer):
        instance = serializer.save()
        instance.set_password(instance.password)
        instance.save()

# accounts/routers.py
from rest_framework import routers

from . import viewsets

router = routers.DefaultRouter()
router.register('', viewsets.CustomUserModelViewSet)


# accounts/urls.py
from django.urls import include, path

from . import routers, views

urlpatterns = [
    path('data/', views.UserRetrieveUpdateDestroyAPIView.as_view(),
         name='user-data'),
    path('users/', include(routers.router.urls)),
]

新しいURLは以下の目的のためにいくつかのエンドポイントを公開します.
方法
パス
目的
ゲット
アカウント/データ
現在ログインしているユーザのデータを取得します.匿名ユーザーはこのページにアクセスできません.
ゲット
アカウント/ユーザー/
データベース内のすべてのユーザーの一覧.
ポスト
アカウント/ユーザー/
POSTリクエストを伴うデータを使用して新しいユーザーを作成します.
パッチ/プット
アカウント/ユーザー/<pk>/
更新、またはユーザーのすべてのユーザーの詳細を変更するpk .
ポスト
トークン/ログイン/
Aを送るPOST 正しい資格情報を要求し、ログイントークンと呼ばれるauth_token .
ポスト
トークン/ログアウト
Aを送るPOST リクエストauth_token ヘッダーと対応するユーザでログアウトされます.
使おうhttpie かどうかを調べる
私たちのエンドポイントの仕事.

# Register a new user
$ http POST http://127.0.0.1:8000/accounts/users/ email='[email protected]' password="test-pass" first_name="Dabreil" last_name="Ignis"
{
    "bio": "",
    "birth_date": null,
    "first_name": "Dabreil",
    "gender": null,
    "last_name": "Ignis"
}

# Login using the new user
# You can visit `admin/authtoken/token/` to see the new token generated
$ http POST http://127.0.0.1:8000/token/login/ email='[email protected]' password="test-pass"
{
    "auth_token": "b1a73afd0431c87b5e0c4afb4b085d401d652edb"
}

# Access data using  the token generated. Make sure you use the correct token that you got in the above step
$ http GET http://127.0.0.1:8000/accounts/data/ "Authorization: Token b1a73afd0431c87b5e0c4afb4b085d401d652edb"
{
    "bio": "",
    "birth_date": null,
    "email": "[email protected]",
    "first_name": "Dabreil",
    "gender": null,
    "id": 3,
    "last_name": "Ignis"
}

# Logout the user
$ http POST http://127.0.0.1:8000/token/logout/ 'Authorization: Token b1a73afd0431c87b5e0c4afb4b085d401d652edb'
# You won't get a response but the token will be deleted from the database. Check this from the admin.

ああ!すべての作品!今、我々はいくつかの設定を追加する必要があります
我々のフロントエンドが
私たちのバックエンドを使用してdjango-corsheaders パッケージ.

# backend/settings.py
CORS_ORIGIN_WHITELIST = ('http://127.0.0.1:3000', 'http://localhost:3000')

これはnuxtjsが使用するデフォルトの開発サーバです.あなたはそれに応じて設定できます.それがこの部分です.
あなたのNuxtjsフロントエンドに認証を加える方法を学ぶために、パート2をチェックアウトしてください.
チュートリアル2