Auth0: как отправить POST с помощью токена M2M с React-интерфейсом

Question

Мне не удалось найти какое-либо решение по интеграции рабочей отправки POST-запроса с использованием процесса авторизации M2M Token Client Auth0 для отправки записи POST в мой бэкэнд Django из моего интерфейса React.

В настоящее время я полностью основывался на компрометации следующих параметров, при этом Auth0 несколько полностью интегрирован:

1. Frontend :

   • ReactНастройка браузера, выполняющая POST для получения токена AUTH0 через сервер Auth0.
   • Реагирует на настройку браузера, используя полученный токен M2M на основе аутентификации JWT, для выполнения запросов GET к бэкэнду для данных.

2. Backend :

   • Django Backend Setup аутентифицирует токен M2M с GET-запросами на освобождение данных.

---

Вышеуказанная настройка в настоящее время работает изначально без какой-либо реализации 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.

Приведенные выше коды являются примером кода запроса POSTранее работал без Auth0 и внезапно выдавал ошибку 500 при реализации Auth0, когда, по-видимому, выдается 500 ошибок из-за неправильной кодировки конфигурации аутентификации JWT.Я надеюсь, что кто-то может помочь точно определить потенциальные изменения кода, которые я могу внести, в попытке исправить его для работы через отправку POST-запроса Auth0:

---

Надеюсь получить ответ от кого-то, кто может помочь в этом вопросе,Заранее признателен за помощь!

Answer 1

Просто испытал и проверил мой путь и нашел жизнеспособный рабочий ответ после 7 дней тестирования.Надеемся, что это решение может помочь кому-то еще в этом процессе.

Однако на данном этапе я должен сказать, что я провел только 1-3 успешных сеанса тестирования, и решение не было тщательно протестировано.Но до сих пор он работал на каждом из тестов.

---

В основном, вот несколько ключевых указателей:

1. Отправка запросов POST возможна благодаря использованиюJWT Tokens , просто есть очень специфический способ заставить его работать .
2. Использование классов на сервере на основе Django Rest Framework не будет работать, когда ' license_classes ((IsAuthenticated,)) * ' и ' authentication_classes ((JSONWebTokenAuthentication,)) 'включен, но будет работать, когда они отключены, если вы используете Django в качестве бэкэнда.
3. Использование API_View кодов в views.py будет рабочим решением, позволяющим использовать оба missions_classes ((IsAuthenticated,)) 'и' authentication_classes ((JSONWebTokenAuthentication,)) 'должно быть полностью включено.
4. В запросе отправки с React Frontend, либо сAXIOS или FETCH, кажется, что он очень хорошо работает, когда вы включаете «Content-Type»: «application / x-www-form-urlencoded» вместо «Content-Type»: «application / json» вЗаголовки вашего запроса POST.

---

Образцы кодов образца ключа для заметок:

A.FRONTEND --- РЕАКЦИЯ

// 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

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 --- РЕАКЦИЯ --- ГОЛОВКА ДЛЯ АВТОРИЗАЦИИ ОТПРАВИТЕЛЯ

Authorization: "JWT " + auth0Token,

B.BACKEND --- DJANGO REST FRAMEWORK --- HEADORATION HEADORATION HEADER

settings.py


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

}

Я также хотел бы поблагодарить @Dan Woda за оказанную помощь.