Как я могу установить JWT на Frontend с помощью bootstrap html, а не react, в то время как API создается с помощью Django?

В последнее время я изучаю и создаю API с помощью Django. Я успешно настроил API системы аутентификации с помощью Django API. Мне интересно узнать, есть ли какое-нибудь решение, чтобы добавить этот JWT с фронтендом, при этом фронтенд должен быть только с формой входа, разработанной на bootstrap. Я не хочу использовать react или что-то подобное. Возможно ли это сделать только через Django views? Будет очень полезно, если есть какой-нибудь способ. Или если требуется только js я с удовольствием приму, но я просто хочу вызывать шаблоны login.html файл не хочу добавлять ни react ни nodejs. Я искал в интернете, но везде либо react, либо nodejs.

Здесь я добавляю функции JWT, которые я использую в своем коде

#settings.py

from datetime import timedelta  # for JWT

REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
        # 'rest_framework.permissions.IsAuthenticated',
    ],
    'DEFAULT_AUTHENTICATION_CLASSES': [
        # 'rest_framework.authentication.SessionAuthentication',
        # 'rest_framework.authentication.TokenAuthentication',
        'rest_framework_simplejwt.authentication.JWTAuthentication',
    ]
}

SIMPLE_JWT = {
'ACCESS_TOKEN_LIFETIME': timedelta(minutes=360),
'REFRESH_TOKEN_LIFETIME': timedelta(days=90),
'ROTATE_REFRESH_TOKENS': True,
'BLACKLIST_AFTER_ROTATION': True,
'UPDATE_LAST_LOGIN': False,

'ALGORITHM': 'HS256',
# 'SIGNING_KEY': settings.SECRET_KEY,
'VERIFYING_KEY': None,
'AUDIENCE': None,
'ISSUER': None,
'JWK_URL': None,
'LEEWAY': 0,

'AUTH_HEADER_TYPES': ('Bearer',),
'AUTH_HEADER_NAME': 'HTTP_AUTHORIZATION',
'USER_ID_FIELD': 'id',
'USER_ID_CLAIM': 'user_id',
'USER_AUTHENTICATION_RULE': 'rest_framework_simplejwt.authentication.default_user_authentication_rule',

'AUTH_TOKEN_CLASSES': ('rest_framework_simplejwt.tokens.AccessToken',),
'TOKEN_TYPE_CLAIM': 'token_type',

'JTI_CLAIM': 'jti',

'SLIDING_TOKEN_REFRESH_EXP_CLAIM': 'refresh_exp',
'SLIDING_TOKEN_LIFETIME': timedelta(minutes=5),
'SLIDING_TOKEN_REFRESH_LIFETIME': timedelta(days=1),
}


#views.py

from rest_framework_simplejwt.serializers import TokenObtainPairSerializer
from rest_framework_simplejwt.views import TokenObtainPairView

class MyTokenObtainPairSerializer(TokenObtainPairSerializer):
    @classmethod
    def get_token(cls, user):
        token = super().get_token(user)

        # Add custom claims
        token['user_name'] = user.user_name
        token['first_name'] = user.first_name
        token['last_name'] = user.last_name
        token['user_email'] = user.email
        token['user_mobile'] = user.mobile
        token['user_credit'] = user.point
        # ...

        return token


class MyTokenObtainPairView(TokenObtainPairView):
    serializer_class = MyTokenObtainPairSerializer



#urls.py

from rest_framework_simplejwt.views import TokenRefreshView
from .views import MyTokenObtainPairView

urlpatterns = [
    path('auth/login/', MyTokenObtainPairView.as_view(), name='login'),
    path('auth/refresh-token', TokenRefreshView.as_view(), name='refreshtoken'),
]

Если я пропустил какую-либо часть моего кодирования, чтобы добавить сюда, пожалуйста, дайте мне знать, я постараюсь предоставить ее здесь.

Спасибо.

Надеюсь, этот вариант сработает. Вставьте это в свой html

<script>
        let email = 'get user email from input';
        let password = 'get user password from input';
        $.ajax({
            url: 'localhost:8000/auth/login',
            type: 'post',
            contentType: 'json',
            data: {email, password},
            dataType: 'json',
            success: function (data) {
                console.log(data);
                localStorage.setItem("token", data.token);
            },
            error: function (XHR, status, err) {
                console.log(err)
            }
        })
</script>
Вернуться на верх