Как я могу установить 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>