Auth0：如何使用带有 React 前端的 M2M 令牌提交 POST

Question

我无法找到任何解决方案来集成有效的 POST 请求提交，使用 Auth0 的 M2M 令牌客户端凭据流流程从我的 React 前端向我的 Django 后端提交 POST 条目。

我目前完全建立在一个折衷以下的设置之上，其中 Auth0 在某种程度上完全集成：

1. 前端：

   • React 浏览器设置进行 POST 以通过 Auth0 服务器检索 AUTH0 令牌。
   • React Browser Setup 使用基于 JWT 身份验证检索到的 M2M 令牌，执行 GET 请求到后端获取数据。

2. 后端：

   • Django 后端设置使用 GET 请求对 M2M 令牌进行身份验证以释放数据。

---

上述设置目前在没有任何 Auth0 实现的情况下运行，随后使用 GET 数据请求。然而，当我尝试发出 POST 数据请求时，这个问题终于出现了。

---

我确实意识到，鉴于我的设置，

• 基于 React 的请求代码，
• 通过 M2M 设置检索到使用的令牌，

我无法找到任何解决方案来将有效的 POST 请求提交集成到我的 Django 后端。

let getBackendConfig = {
            headers: { 
                "Content-Type": "application/json",
                Authorization: process.env.REACT_APP_JWT_AUTH0_HEADER + " " + auth0Token,
            },
        };

async function submitLocationViaPOST( dataToPOST ) {
            setIsLocationUploaded("process");
            try {
                Promise.all([
                    await axios
                        .post(urlSubmitLocationPOSTAPI, dataToPOST, getBackendConfig)
                        .then(response => {
                            console.log("???? urlSubmitLocationPOSTAPI Reply Data: ", response);
                            if (response.status === 201) {
                                // EXECUTE ONLY IF RESPONSE IS "201" --- MEANING ENTRY CREATED SUCCESSFULLY
                                setIsLocationUploaded("finish");
                            }
                        })
                ]);
            }
            catch (err) {
                setIsLocationUploaded("error");
                console.log("???? urlSubmitLocationPOSTAPI Error: " + err);
            }
        }

我目前确实知道，如果没有任何 Auth0 身份验证，当前的整体 POST 请求都可以工作。

以上代码是以前在没有 Auth0 的情况下工作的示例 POST 请求代码，并且在实现 Auth0 时突然抛出 500 错误，当时可能抛出的 500 错误是 JWT 身份验证配置可能被错误编码。我希望有人可以帮助查明我可以进行的潜在代码更改，以尝试纠正它以通过 Auth0 POST 请求提交：

---

希望能在此问题上提供帮助。非常感谢您的帮助！

Answer 1

经过 7 天的测试后，我对自己的方式进行了试验和测试，最终找到了可行的工作答案。希望此解决方案可以在此过程中对其他人有所帮助。

但是，在这个时刻，我不得不说我只进行了 1-3 次成功的测试，并且没有对解决方案进行大力测试。但到目前为止，它完成了每一项测试。

---

基本上，这里有一些关键指针：

1. 可以通过使用 JWT 令牌提交 POST 请求，只是有一个非常具体的方法可以让它工作。
2. 当 'permission_classes((IsAuthenticated, ))' 和 'authentication_classes((JSONWebTokenAuthentication,))' 为已启用，但如果您在后端使用 Django，则在禁用它们时将起作用。
3. 在 views.py 中使用 API_View 代码将是允许 'permission_classes((IsAuthenticated, ))' 和 'authentication_classes(( JSONWebTokenAuthentication,))' 完全启用。
4. 在带有 React 前端的发送请求中，无论是使用 AXIOS 还是 FETCH，当您包含 "Content-Type": "application/x-www-form-urlencoded" 时，它似乎确实非常有效 而不是 "Content-Type": "application/json" 在您的 POST 请求标头中。

---

需要注意的示例关键代码：

A.前线——反应

// HANDLES "POST" REQUESTS CONFIGS
        let postBackendConfig = {
            headers: { 
                "Content-Type": "application/x-www-form-urlencoded",
                Authorization: process.env.REACT_APP_JWT_AUTH0_HEADER + " " + auth0Token,
            },
        };

B.后端 --- DJANGO REST 框架

views.py

@csrf_exempt
@permission_classes((IsAuthenticated, ))
@authentication_classes((JSONWebTokenAuthentication,))
def newsubmission(request):
    if request.method == 'POST':
        data = JSONParser().parse(request)
        serializer = SubmissionsSerializer(data=data)


        if serializer.is_valid():
            submitted = serializer.save()
            return JsonResponse(serializer.data, status=201)
        return JsonResponse(serializer.errors, status=400)

最后一个需要注意的关键事项是您的发送/接收授权标头，这对于确保所有这些代码正常工作非常关键。

以下是您查看自己的代码的示例，因为这是个人在使用 JWT 令牌时面临的常见问题之一。我相信只要两端相同，无论是“JWT”还是“Bearer”，它仍然可以工作，但强烈建议仅使用“JWT”或“Bearer”作为您的选项：

---

A. FRONTEND --- REACT --- SENDER AUTHORIZATION HEADER

Authorization: "JWT " + auth0Token,

B.后端 --- DJANGO REST 框架 --- 接收器授权头

settings.py


# JWT settings
JWT_AUTH = {
    ...
    'JWT_AUTH_HEADER_PREFIX': "JWT",
    ...

}

我还要感谢 @Dan Woda 之前提供的帮助。