Django后端身份验证与NextJS前端表单-最佳实践

jexiocij  于 2023-06-05  发布在  Go
关注(0)|答案(1)|浏览(174)

我在Django中构建了一个API中心,在NextJS中构建了一个前端应用程序。我目前正在Nextjs中对Django API进行身份验证,我对最佳实践感到好奇。
目前,NextJS应用程序将用户的用户名/密码发布到端点。此终结点返回用户令牌或说明问题的错误。
React

const login = async () => {
    let token = await axios.post('/api/accounts/', {
      email: email,
      password: password
    }).then(r => r.data.token).catch(function (error) { console.log(error) })

      if (token) {
        router.push({
            pathname: '/home/',
            query: { token: token },
          })
        }
      }

nexjs服务器api/accounts

export default async (req, res) => {
  if (req.method === 'POST') {
    try {
      // retrieve payment intent data
      const {data} = await axios.post('https://website/api/api-token-auth/', req.body)
      res.status(200).send(data)
    } catch (err) {
      res.status(500).json({ statusCode: 500, message: err.message })
    }
  } else {
    res.setHeader('Allow', 'POST')
    res.status(405).end('Method Not Allowed')
  }
}

Django API

@csrf_exempt
@api_view(["POST"])
@permission_classes((AllowAny,))
def obtain_auth_token(request):
    email = request.data.get("email")
    password = request.data.get("password")
    if email is None or password is None:
        return Response({'error': 'Please provide both email and password'},
                        status=HTTP_400_BAD_REQUEST)
    user = authenticate(email=email, password=password)
    if not user:
        return Response({'error': 'Invalid Credentials'},
                        status=HTTP_404_NOT_FOUND)

    token, _ = Token.objects.get_or_create(user=user)
    return Response({'token': token.key},
                    status=HTTP_200_OK)

一旦我收到令牌,我就把用户推到主页。
我的问题是:
1.我对用户进行身份验证的方式是一种好方法吗?我是不是忽略了什么?这是我第一次尝试对我构建的东西进行身份验证,所以我想把它做好。
1.我应该如何存储这个代币?在身份验证凭据方面,什么是“最佳实践”?我考虑过将令牌传递给每个需要它的组件。我也曾尝试过使用LocalStorage,但我还是不确定大多数人在这种情况下会怎么做。
任何帮助你都可以提供将不胜感激!
先谢谢你了!

0wi1tuuw

0wi1tuuw1#

我对用户进行身份验证的方式是一种好方法吗?我是不是忽略了什么?这是我第一次尝试对我构建的东西进行身份验证,所以我想把它做好。

  • Python后端看起来很不错。你的代码唯一的缺点就是你在重新发明轮子。令牌身份验证已经实现,因此您不必担心实现它,而是可以直接使用TokenAuthentication
  • nexjs server looks...为什么你需要这个作为前端和API REST之间的中间服务?无论如何,你应该注意到响应重定向覆盖身份验证失败的状态代码为500状态代码:
try {
    // retrieve payment intent data
    const {data} = await axios.post('https://website/api/api-token-auth/', req.body)
    res.status(200).send(data)
 } catch (err) {
    // if err status code is 404 e.g. bad credentials, response status is 500 where it should be 404.
    res.status(500).json({ statusCode: 500, message: err.message })
 }

我应该如何存储这个代币?在身份验证凭据方面,什么是“最佳实践”?我考虑过将令牌传递给每个需要它的组件。我也曾尝试过使用LocalStorage,但我还是不确定大多数人在这种情况下会怎么做。
不要使用cookie来避免CSRF攻击。本地存储是“快速和简单”的答案,因为你已经使用HTTPS。本地存储的一个缺点是你的令牌容易受到XSS攻击,但如果发生这种攻击,你已经严重受损。(XSS攻击者可以拦截密码和登录,那么访问令牌的意义何在?)。您可以找到更多信息here

相关问题