Рубрики
Без рубрики

Настройка аутентификации пользователя с помощью структуры REST NUXTJS и Django [Part – 1]

Учебное пособие было разделено на две части- настраивая бэкэнд и настройку фронта. … с меткой Vue, Django, Python, новичками.

Учебное пособие было разделено на две части- настраивая бэкэнд и настройку фронта.

Репо имеет две ветви: Часть 1 и Часть 2 Анкет Часть 1 Содержит файлы для этого урока, Часть 2 содержит Файлы для этого урока и следующее.

Учебное пособие, часть 2: Здесь

GitHub Repo: https://github.com/IgnisDa/django-nuxtjs-authentication

Мы будем использовать аутентификацию токена, используя Джозер Пакет в Реализуйте API аутентификации и потребляйте его с помощью фронта Nuxtjs.

ПРИМЕЧАНИЕ: Ради краткости, я опустим все комментарии объясняя работу. Однако код хорошо прокомментирован и можно получить доступ через репозиторий GitHub.

  1. Знакомство с Django-Rest-Framework
  2. Знание Nuxt-Auth: этого видео будет достаточно

Установите следующие пакеты в вашей виртуальной среде:

  • Джанго
  • djangorestframework
  • Джозер
  • Django-Cors Headers
  • httpie
  • подтвердить адрес электронной почты

Начните с создания общего каталога nuxtjs+drf-user-auth/ где фронт (Nuxtjs) и Backend (Django Rest Framework) будут жить отдельно в Frontend/ и Бэкэнд/ каталоги соответственно.

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

Добавьте новое приложение и аддоны в настройки.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. Пользователь обеспечивает, а также Используйте Электронная почта как идентификатор по умолчанию вместо имя пользователя .

# 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)

Добавьте соответствующие настройки в вашем настройки.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 , мигрировать , и создайте новый суперпонент, используя CreateSuperuser Анкет Запустите сервер разработки, используя Рансервер и затем посетите токен/логин/ в вашем браузере. Введите правильные учетные данные И убедитесь, что вы получаете токен в качестве ответа в auth_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')

Затем мы определяем представления и виды, которые будут использовать эти сериализаторы, чтобы доставить данные на фронт.

# 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.
токен/логин/ ПОЧТА Отправьте запрос сообщения с правильными учетными данными, и это ответит токеном для входа в систему под названием AUTH_TOKEN.
токен/вход/ ПОЧТА Отправьте запрос сообщения с AUTH_TOKEN в заголовке, и соответствующий пользователь будет вычеркнут.

Давайте использовать httpie Чтобы проверить, Наши конечные точки работают.

# Register a new user
$ http POST http://127.0.0.1:8000/accounts/users/ email='email1@email.com' 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='email1@email.com' 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": "email1@email.com",
    "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. Вы можете настроить свой соответственно. Вот и все для этой части.

Убедитесь, что вы проверили часть 2, чтобы узнать, как добавить аутентификацию на свой фронт Nuxtjs.

Учебное пособие, часть 2: Здесь

Оригинал: “https://dev.to/ignisda/setting-up-user-authentication-with-nuxtjs-and-django-rest-framework-part-1-5gji”