В настоящее время я работаю над приложением с бэкэндом Django и реагирую на внешний интерфейс.
Мне нужно аутентифицировать пользователя с помощью внешнего приложения, используя oAuth2, и мне трудно получить чистый URL-адрес после перенаправления назад.в приложение после аутентификации с oAuth2.
URL выглядит следующим образом после перенаправления:
http://127.0.0.1:8000/?state=&code=thelongcoderetrievedfromoathusedtogettoken&scope=#/
Я не могу перенаправить обратно на http://127.0.0.1:8000/
из внешнего интерфейса (React).Кажется, что я ничего не могу коснуться за #
Моя идея заключается в следующем:
- Создать другую целевую страницу, которая затем передается с параметром oAuth2
redirect
. - В бэкэнде я создаю новый вид, извлекаю код и перехожу к исходному виду.
- Передача данных из бэкэнда во внешний интерфейс.
Мое решение этой проблемы:
- Просто добавьте
/landingpage
к URL, переданному в oAuth2. - Довольно легко обрабатывается путем создания нового представления, в котором мы сохраняем токен в сеансе:
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?