Auth0：如何使用带有REACT前端的M2M令牌提交帖子 [英] Auth0: How to Submit POST Using M2M Token with React Frontend

问题描述

我找不到任何类型的解决方案，无法使用AUTHO的M2M令牌客户端凭据流流程集成正在工作的POST请求深渊翻滚，以便将POST条目从我的Reaction前端提交到我的Django后端。

我目前已经完全基于以下折衷的设置构建，Auth0在某种程度上完全集成了：

1. 前端：

   • 响应浏览器安装程序进行POST以通过Auth0服务器检索AUTH0令牌。
   • 使用基于JWT身份验证检索到的M2M令牌对浏览器安装进行反应，以向后端执行GET请求以获取数据。

2. 后端：

   • Django后端安装程序使用GET请求验证M2M令牌以释放数据。

---

上述设置目前最初在没有任何Auth0实现的情况下工作，随后使用GET DATA请求工作。但是，最近当我尝试发出POST数据请求时，问题终于出现了。

---

我确实意识到，根据我的设置，

• 根据Reaction请求代码，
• 通过M2M安装程序检索到的令牌

我找不到任何将正在工作的请求后深渊翻滚集成到我的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的情况下工作，并在实现Auth0时突然抛出500错误，当时抛出的500错误可能是JWT身份验证配置可能编码错误。我希望有人能帮我找出我可以做的潜在代码更改，尝试更正它以通过Auth0 POST请求深渊翻滚工作：

---

希望收到可以在此问题上提供帮助的人的反馈。非常感谢您的帮助！

推荐答案

只是对我的方法进行了一些试验和测试，经过7天的测试，我找到了一个可行的工作答案。希望这个解决方案可以帮助这个过程中的其他人。

但是，在这一点上，我不得不说我只进行了1-3次成功的测试，并且该解决方案没有经过严格的测试。但到目前为止，它解决了每一项测试的问题。

---

基本上，以下是一些关键提示：

1. POST请求提交可以通过使用JWT令牌，只是有一个非常具体的方法可以使其正常工作。
2. 在基于Django睡觉框架的服务器中使用类在启用‘PERMISSION_CLASSES((IsAuthenticated，))’和‘authentication_classes((JSONWebTokenAuthentication，)’时不起作用，但如果您在后端使用Django时禁用它们，则会起作用。
3. 在views.py中使用API_VIEW代码将是允许同时启用"PERMISSION_CLASS((IsAuthenticated，))"和"‘authentication_classes((JSONWebTokenAuthentication，")的有效解决方案。
4. 在使用AXIOS或FETCH的带有Reaction前端的发送请求中，在POST请求头中包含"Content-Type"："application/x-www-form-urlencode"而不是"Content-Type"："application/json"似乎非常有效。

---

要注意的示例按键代码示例：

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.后台-姜戈睡觉框架

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"还是"持有者"，还是可以的，但强烈建议您只使用"JWT"或"持有者"中的一种作为您的选项：

---

A.前端-Reaction-发件人授权头

Authorization: "JWT " + auth0Token,

B.后台-姜戈睡觉框架-接收方授权头

settings.py


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

}

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

这篇关于Auth0：如何使用带有REACT前端的M2M令牌提交帖子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！