如何使用 Django REST 和 React.js 关系处理 CSRFToken 真实性?
How to Handle CSRFToken Authenticity with Django REST and React.js Relation?
我正在创建 Django REST 项目。
我创建了一个自定义用户模型,其中我使用 rest-knox 进行令牌身份验证。对于登录和注册用户端点,我使用了自定义视图,我在其中通过用户的 knox 令牌对用户进行身份验证。对于 password_change 端点,我使用了 django auth 的视图。
这是我面临的问题:
- 当我在可浏览的 API 中尝试 password_change 端点时;它再次将我重定向到登录页面,但什么也没做。但是,用户的 Knox 令牌是在 JSON.
中创建和返回的
- 当我在 Postman 中尝试端点时,它给出了 CSRF 令牌错误,因为我无法获取 CSRF 令牌。
我尝试创建自己的 front-end 页面来更改密码,有时 'csrftoken' 在 chrome 的 cookie table 中返回,但并非总是如此。由于我获得了带有 JSON 响应的用户令牌,因此我将其设置为 React.js 上的 cookie,并可以随时访问。然而,react-cookie 的 get 方法不适用于 csrftoken,它被设置为未定义。最后,我尝试为我的 post 请求使用 axios 库,并为 'csrftoken' 设置默认值 header 但看不到任何结果。 front-end 'localhost:3000/change_password/' 页面只是通过将传递的参数添加到 url.
的末尾来重定向到自身
views.py
from django.shortcuts import render
from rest_framework import viewsets, generics
from rest_framework.authtoken.models import Token
from rest_framework.response import Response
from knox.auth import TokenAuthentication
from knox.models import AuthToken
from rest_framework.permissions import IsAuthenticated, AllowAny
from .models import UserProfile
from .serializers import UserSerializer, LoginSerializer, KnoxSerializer, RegisterSerializer
from django.contrib.auth import views, decorators
from django.contrib.auth.decorators import user_passes_test
class UserListAPI(generics.ListAPIView):
authentication_classes = (TokenAuthentication,)
permission_classes = (AllowAny,)
queryset = UserProfile.objects.all()
serializer_class = UserSerializer
class UserDetailAPI(generics.RetrieveAPIView):
authentication_classes = (TokenAuthentication,)
permission_classes = (AllowAny,)
queryset = UserProfile.objects.all()
serializer_class = UserSerializer
lookup_field = 'username'
class LoginAPI(generics.GenericAPIView):
serializer_class = LoginSerializer
def post(self, request, *args, **kwargs):
serializer = self.get_serializer(data=request.data)
serializer.is_valid(raise_exception=True)
user = serializer.validated_data
token = AuthToken.objects.create(user)[1]
return Response({
"user": UserSerializer(user, context=self.get_serializer_context()).data,
"token": token
})
class RegisterAPI(generics.GenericAPIView):
serializer_class = RegisterSerializer
queryset = UserProfile.objects.all()
def post(self, request, *args, **kwargs):
serializer = self.get_serializer(data=request.data)
serializer.is_valid(raise_exception=True)
user = serializer.save()
return Response({
"user": UserSerializer(user, context=self.get_serializer_context()).data,
"token": AuthToken.objects.create(user)[1]
})
settings.py
import os
from decouple import config
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.0/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = config('SECRET_KEY')
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'knox',
'rest_framework.authtoken',
'accounts',
'rest_auth',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'Book_Lib_Project.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'Book_Lib_Project.wsgi.application'
# Database
# https://docs.djangoproject.com/en/3.0/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
# Password validation
# https://docs.djangoproject.com/en/3.0/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/3.0/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/
STATIC_URL = '/static/'
REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': ('knox.auth.TokenAuthentication',),
'DATETIME_FORMAT': ("%m/%d/%Y %H:%M:%S",),
'DEFAULT_PERMISSION_CLASSES':(
'rest_framework.permissions.AllowAny',),
}
AUTHENTICATION_BACKENDS = [
"django.contrib.auth.backends.ModelBackend",
# #"accounts.backends.EmailAuthenticationBackend",
]
PASSWORD_HASHERS = [
'django.contrib.auth.hashers.BCryptSHA256PasswordHasher',
'django.contrib.auth.hashers.PBKDF2PasswordHasher',
'django.contrib.auth.hashers.PBKDF2SHA1PasswordHasher',
'django.contrib.auth.hashers.Argon2PasswordHasher',
]
from datetime import timedelta
from rest_framework.settings import api_settings
REST_KNOX = {
'SECURE_HASH_ALGORITHM': 'cryptography.hazmat.primitives.hashes.SHA512',
'AUTH_TOKEN_CHARACTER_LENGTH': 64,
'TOKEN_TTL': timedelta(hours=10),
'USER_SERIALIZER': 'knox.serializers.UserSerializer',
'TOKEN_LIMIT_PER_USER': None,
'AUTO_REFRESH': False,
'EXPIRY_DATETIME_FORMAT': api_settings.DATETIME_FORMAT,
}
urls.py
from django.urls import path, include
from .views import UserListAPI, UserDetailAPI, LoginAPI, RegisterAPI, PasswordChangeAPI
from knox import views as knox_views
urlpatterns = [
path('logout/', knox_views.LogoutView.as_view(), name = "knox_logout"),
path('users/', UserListAPI.as_view()),
path('users/<str:username>/', UserDetailAPI.as_view()),
path('login/', LoginAPI.as_view()),
path('register/', RegisterAPI.as_view()),
path('', include('django.contrib.auth.urls')),
]
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import axios from 'axios';
axios.defaults.withCredentials = true
axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = 'X-CSRFToken'
axios.interceptors.request.use(request => {
console.log(request.headers);
// Edit request config
return request;
}, error => {
console.log(error);
return Promise.reject(error);
});
axios.interceptors.response.use(response => {
console.log(response);
// Edit response config
return response;
}, error => {
console.log(error);
return Promise.reject(error);
});
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
ChangePassword.js
import React, {Component} from 'react';
//import ReactDOM from 'react-dom';
import { withCookies } from 'react-cookie';
import './ChangePassword.css';
import Axios from 'axios'
class ChangePassword extends Component {
state = {
credentials: {
old_password: '',
new_password1: '',
new_password2: '',
},
token: this.props.cookies.get('usertoken'),
}
inputChanged = event => {
let cred = this.state.credentials;
cred[event.target.name] = event.target.value;
this.setState({credentials: cred});
}
pressedEnter = event => {
if (event.key === 'Enter') {
this.changePassword();
}
}
changePassword = event => {
Axios.post('http://127.0.0.1:8000/accounts/password_change/', this.state.credentials, {headers: {
'Authorization': `Token ${this.state.token}`
}})
.then(res => {
console.log(res);
window.location.href = "/";
})
.catch( error => console.log(error))
}
render() {
return (
<div className="Login">
<form onSubmit={this.changePassword}>
<label>Old Password</label>
<input type="text" name="old_password" value={this.state.credentials.email} onChange={this.inputChanged} onKeyPress={this.pressedEnter}/><br/>
<label>New Password</label>
<input type="password" name="new_password1" value={this.state.credentials.password} onChange={this.inputChanged} onKeyPress={this.pressedEnter}/><br/>
<label>Confirm New Password</label>
<input type="password" name="new_password2" value={this.state.credentials.password} onChange={this.inputChanged} onKeyPress={this.pressedEnter}/><br/>
<input type="submit" value="Change" data-test="submit" />
</form>
</div>
)
}
}
export default withCookies(ChangePassword);
我解决了这个问题,如果有人遇到同样的问题并看这里,这里是解决方案。
起初,我需要将域用作 http://127.0.0.1:3000 instead of http://localhost:3000 because of the restrictions given in https://curl.haxx.se/rfc/cookie_spec.html(检查名为 DOMAIN 的部分)。此外,需要对 setting.py 文件进行一些更改。
将以下信息添加到我的 settings.py 文件中
CORS_ORIGIN_WHITELIST = (
'http://127.0.0.1:3000',
)
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
CORS_EXPOSE_HEADERS = (
'Access-Control-Allow-Origin: http://127.0.0.1:3000',
)
将 index.js 中的 axios 配置更改为
axios.defaults.withCredentials = true
axios.defaults.baseURL = 'http://127.0.0.1:8000/';
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = 'x-csrftoken'
为登录页面制作 post 的正确方法如下:
Axios.post('http://127.0.0.1:8000/accounts/login/', this.state.credentials).then(res => {
console.log(res);
this.props.cookies.set('usertoken', res.data.token);
// Used token based authentication. A token is returned from backend in JSON format.
}).catch( error => console.log(error))
我正在创建 Django REST 项目。 我创建了一个自定义用户模型,其中我使用 rest-knox 进行令牌身份验证。对于登录和注册用户端点,我使用了自定义视图,我在其中通过用户的 knox 令牌对用户进行身份验证。对于 password_change 端点,我使用了 django auth 的视图。
这是我面临的问题:
- 当我在可浏览的 API 中尝试 password_change 端点时;它再次将我重定向到登录页面,但什么也没做。但是,用户的 Knox 令牌是在 JSON. 中创建和返回的
- 当我在 Postman 中尝试端点时,它给出了 CSRF 令牌错误,因为我无法获取 CSRF 令牌。 我尝试创建自己的 front-end 页面来更改密码,有时 'csrftoken' 在 chrome 的 cookie table 中返回,但并非总是如此。由于我获得了带有 JSON 响应的用户令牌,因此我将其设置为 React.js 上的 cookie,并可以随时访问。然而,react-cookie 的 get 方法不适用于 csrftoken,它被设置为未定义。最后,我尝试为我的 post 请求使用 axios 库,并为 'csrftoken' 设置默认值 header 但看不到任何结果。 front-end 'localhost:3000/change_password/' 页面只是通过将传递的参数添加到 url. 的末尾来重定向到自身
views.py
from django.shortcuts import render
from rest_framework import viewsets, generics
from rest_framework.authtoken.models import Token
from rest_framework.response import Response
from knox.auth import TokenAuthentication
from knox.models import AuthToken
from rest_framework.permissions import IsAuthenticated, AllowAny
from .models import UserProfile
from .serializers import UserSerializer, LoginSerializer, KnoxSerializer, RegisterSerializer
from django.contrib.auth import views, decorators
from django.contrib.auth.decorators import user_passes_test
class UserListAPI(generics.ListAPIView):
authentication_classes = (TokenAuthentication,)
permission_classes = (AllowAny,)
queryset = UserProfile.objects.all()
serializer_class = UserSerializer
class UserDetailAPI(generics.RetrieveAPIView):
authentication_classes = (TokenAuthentication,)
permission_classes = (AllowAny,)
queryset = UserProfile.objects.all()
serializer_class = UserSerializer
lookup_field = 'username'
class LoginAPI(generics.GenericAPIView):
serializer_class = LoginSerializer
def post(self, request, *args, **kwargs):
serializer = self.get_serializer(data=request.data)
serializer.is_valid(raise_exception=True)
user = serializer.validated_data
token = AuthToken.objects.create(user)[1]
return Response({
"user": UserSerializer(user, context=self.get_serializer_context()).data,
"token": token
})
class RegisterAPI(generics.GenericAPIView):
serializer_class = RegisterSerializer
queryset = UserProfile.objects.all()
def post(self, request, *args, **kwargs):
serializer = self.get_serializer(data=request.data)
serializer.is_valid(raise_exception=True)
user = serializer.save()
return Response({
"user": UserSerializer(user, context=self.get_serializer_context()).data,
"token": AuthToken.objects.create(user)[1]
})
settings.py
import os
from decouple import config
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.0/howto/deployment/checklist/
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = config('SECRET_KEY')
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'knox',
'rest_framework.authtoken',
'accounts',
'rest_auth',
]
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'Book_Lib_Project.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'Book_Lib_Project.wsgi.application'
# Database
# https://docs.djangoproject.com/en/3.0/ref/settings/#databases
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
# Password validation
# https://docs.djangoproject.com/en/3.0/ref/settings/#auth-password-validators
AUTH_PASSWORD_VALIDATORS = [
{
'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
},
{
'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
},
]
# Internationalization
# https://docs.djangoproject.com/en/3.0/topics/i18n/
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'
USE_I18N = True
USE_L10N = True
USE_TZ = True
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/
STATIC_URL = '/static/'
REST_FRAMEWORK = {
'DEFAULT_AUTHENTICATION_CLASSES': ('knox.auth.TokenAuthentication',),
'DATETIME_FORMAT': ("%m/%d/%Y %H:%M:%S",),
'DEFAULT_PERMISSION_CLASSES':(
'rest_framework.permissions.AllowAny',),
}
AUTHENTICATION_BACKENDS = [
"django.contrib.auth.backends.ModelBackend",
# #"accounts.backends.EmailAuthenticationBackend",
]
PASSWORD_HASHERS = [
'django.contrib.auth.hashers.BCryptSHA256PasswordHasher',
'django.contrib.auth.hashers.PBKDF2PasswordHasher',
'django.contrib.auth.hashers.PBKDF2SHA1PasswordHasher',
'django.contrib.auth.hashers.Argon2PasswordHasher',
]
from datetime import timedelta
from rest_framework.settings import api_settings
REST_KNOX = {
'SECURE_HASH_ALGORITHM': 'cryptography.hazmat.primitives.hashes.SHA512',
'AUTH_TOKEN_CHARACTER_LENGTH': 64,
'TOKEN_TTL': timedelta(hours=10),
'USER_SERIALIZER': 'knox.serializers.UserSerializer',
'TOKEN_LIMIT_PER_USER': None,
'AUTO_REFRESH': False,
'EXPIRY_DATETIME_FORMAT': api_settings.DATETIME_FORMAT,
}
urls.py
from django.urls import path, include
from .views import UserListAPI, UserDetailAPI, LoginAPI, RegisterAPI, PasswordChangeAPI
from knox import views as knox_views
urlpatterns = [
path('logout/', knox_views.LogoutView.as_view(), name = "knox_logout"),
path('users/', UserListAPI.as_view()),
path('users/<str:username>/', UserDetailAPI.as_view()),
path('login/', LoginAPI.as_view()),
path('register/', RegisterAPI.as_view()),
path('', include('django.contrib.auth.urls')),
]
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import axios from 'axios';
axios.defaults.withCredentials = true
axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = 'X-CSRFToken'
axios.interceptors.request.use(request => {
console.log(request.headers);
// Edit request config
return request;
}, error => {
console.log(error);
return Promise.reject(error);
});
axios.interceptors.response.use(response => {
console.log(response);
// Edit response config
return response;
}, error => {
console.log(error);
return Promise.reject(error);
});
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
ChangePassword.js
import React, {Component} from 'react';
//import ReactDOM from 'react-dom';
import { withCookies } from 'react-cookie';
import './ChangePassword.css';
import Axios from 'axios'
class ChangePassword extends Component {
state = {
credentials: {
old_password: '',
new_password1: '',
new_password2: '',
},
token: this.props.cookies.get('usertoken'),
}
inputChanged = event => {
let cred = this.state.credentials;
cred[event.target.name] = event.target.value;
this.setState({credentials: cred});
}
pressedEnter = event => {
if (event.key === 'Enter') {
this.changePassword();
}
}
changePassword = event => {
Axios.post('http://127.0.0.1:8000/accounts/password_change/', this.state.credentials, {headers: {
'Authorization': `Token ${this.state.token}`
}})
.then(res => {
console.log(res);
window.location.href = "/";
})
.catch( error => console.log(error))
}
render() {
return (
<div className="Login">
<form onSubmit={this.changePassword}>
<label>Old Password</label>
<input type="text" name="old_password" value={this.state.credentials.email} onChange={this.inputChanged} onKeyPress={this.pressedEnter}/><br/>
<label>New Password</label>
<input type="password" name="new_password1" value={this.state.credentials.password} onChange={this.inputChanged} onKeyPress={this.pressedEnter}/><br/>
<label>Confirm New Password</label>
<input type="password" name="new_password2" value={this.state.credentials.password} onChange={this.inputChanged} onKeyPress={this.pressedEnter}/><br/>
<input type="submit" value="Change" data-test="submit" />
</form>
</div>
)
}
}
export default withCookies(ChangePassword);
我解决了这个问题,如果有人遇到同样的问题并看这里,这里是解决方案。
起初,我需要将域用作 http://127.0.0.1:3000 instead of http://localhost:3000 because of the restrictions given in https://curl.haxx.se/rfc/cookie_spec.html(检查名为 DOMAIN 的部分)。此外,需要对 setting.py 文件进行一些更改。
将以下信息添加到我的 settings.py 文件中
CORS_ORIGIN_WHITELIST = (
'http://127.0.0.1:3000',
)
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
CORS_EXPOSE_HEADERS = (
'Access-Control-Allow-Origin: http://127.0.0.1:3000',
)
将 index.js 中的 axios 配置更改为
axios.defaults.withCredentials = true
axios.defaults.baseURL = 'http://127.0.0.1:8000/';
axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = 'x-csrftoken'
为登录页面制作 post 的正确方法如下:
Axios.post('http://127.0.0.1:8000/accounts/login/', this.state.credentials).then(res => {
console.log(res);
this.props.cookies.set('usertoken', res.data.token);
// Used token based authentication. A token is returned from backend in JSON format.
}).catch( error => console.log(error))