Аутентификация Django через API - PullRequest
Новая
       31

Аутентификация Django через API

0 голосов
/ 31 января 2019

Я хочу предоставить некоторые API, такие как вход и выход через интерфейс ReactJS.Я вижу документ Django здесь , который учитывает / предоставляет некоторые URL, такие как логин и выход из системы.Возможно ли, что я просто использую API для входа и выхода из системы под учетными записями / без создания шаблона и пробую их в Postman?Я пытался с POST-запросом: 

{
    "username": "admin",
    "password": "admin"
}

и cookie с csrfmiddlewaretoken и csrftoken, но получил ошибку Forbidden (CSRF token missing or incorrect.): /accounts/login/

1 Ответ

0 голосов
/ 31 января 2019

Что касается использования встроенных форм Django для аутентификации, то это невозможно сделать путем передачи данных JSON.Вместо этого гораздо лучше создать собственную конечную точку API и вернуть клиенту какой-нибудь токен аутентификации для использования в будущих запросах.В таких случаях вам может не понадобиться токен CSRF.

В качестве альтернативы, вы можете разместить свое приложение реагирования на странице Django и использовать Django для аутентификации, и в этом случае вам не нужно обрабатывать токен какДжанго сделает это за тебя.Но это не очень распространенный подход и может работать не во всех случаях.

Что касается введения токена CSRF, есть несколько различных способов сделать это при использовании ReactJS

Обработка токенов CSRF в React / Axios

ДляУ клиента Axios есть три варианта:

  1. , вы можете вручную прикрепить токен CSRF в заголовок каждого вызова Axios
  2. , вы можете использовать Axios xsrfHeaderName для каждого вызова
  3. вы можете использовать имя по умолчанию xsrfHeaderName (axios.defaults.xsrfHeaderName = "X-CSRFToken")

Вот как вы можете просто использовать токен CSRF с Axios без дальнейшей настройки: 

import axios from 'axios';

axios.defaults.xsrfCookieName = 'csrftoken'
axios.defaults.xsrfHeaderName = 'X-CSRFToken'

Обработка CSRF-токенов в React / Fetch 

fetch(url, {
    credentials: 'include',
    method: 'POST',
    mode: 'same-origin',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'X-CSRFToken': csrftoken
    },
    body: {}
   })
  }

Обработка CSRF с использованием React / Redux

Если вы используете Redux для управления состоянием приложения, вы можете использовать redux-csrf дляобрабатывать токен CSRF в Redux.

Вы можете использовать его, сначала установив его из npm с помощью 

npm install redux-csrf --save

Затем вы можете использовать API setCsrfToken(token), который устанавливает токен CSRF в хранилище Redux.

...