Джанго - ReactJS - OAuth2 - PullRequest
       4

Джанго - ReactJS - OAuth2

0 голосов
/ 09 октября 2018

В настоящее время я работаю над приложением с бэкэндом Django и реагирую на внешний интерфейс.

Мне нужно аутентифицировать пользователя с помощью внешнего приложения, используя oAuth2, и мне трудно получить чистый URL-адрес после перенаправления назад.в приложение после аутентификации с oAuth2.

URL выглядит следующим образом после перенаправления:

http://127.0.0.1:8000/?state=&code=thelongcoderetrievedfromoathusedtogettoken&scope=#/

Я не могу перенаправить обратно на http://127.0.0.1:8000/ из внешнего интерфейса (React).Кажется, что я ничего не могу коснуться за #

Моя идея заключается в следующем:

  1. Создать другую целевую страницу, которая затем передается с параметром oAuth2 redirect.
  2. В бэкэнде я создаю новый вид, извлекаю код и перехожу к исходному виду.
  3. Передача данных из бэкэнда во внешний интерфейс.

Мое решение этой проблемы:

  1. Просто добавьте /landingpage к URL, переданному в oAuth2.
  2. Довольно легко обрабатывается путем создания нового представления, в котором мы сохраняем токен в сеансе:

views.py:

    def landingpage(request):
        request.session['auth_token']=request.GET.get('code')
        return redirect('homepage')

urls.py:

urlpatterns = [
    path(r'', views.index,name='homepage' ),
    path(r'landingpage/', views.landingpage,name='landing-redirect' ),
]

Это также довольно просто, если у нас есть токен в сеансе.В представлении orignal мы можем передать токен в файл index.html или куда бы мы ни импортировали реагирующее приложение.Сначала переписайте исходное представление в view.py, чтобы оно было:

def index(request):
    try:
       token=request.session['auth_token']
    except:
        token='no_auth'
    return render(request, 'frontend/index.html',{'the_token':token})

Затем в файле index.html перепишите контейнер, чтобы приложение взяло переменную из django.

<div id="app" data-authToken={{ the_token }}></div>

Тогда, наконец, в App.js

const wrapper = document.getElementById("app");
//log the data and see if it exists.
console.log('dataset',wrapper.dataset)
//If we got redux we can pass data to store by
store.dispatch({type:'THE TOKEN PASSED FROM 
BACKEND',value:wrapper.dataset.authtoken})

Это решение немного хакерское.Есть ли какой-нибудь более чистый способ сделать это?

Я получил идею передать данные из бэкэнда, чтобы отреагировать следующим постом. Существует ли правильный способ передачи данных в компонент React со страницы HTML?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...