Меня интересует, как реализовать OAuth в React с помощью popup ( window.open
).
Например у меня есть:
mysite.com
- здесь я открываю всплывающее окно.passport.mysite.com/oauth/authorize
- неожиданно возникнуть.
Основной вопрос - как создать соединение между window.open
(popup) и window.opener
(как известно, window.opener имеет значение null из-за междоменной безопасности, поэтому мы больше не можем его использовать).
⇑
window.opener
удаляется всякий раз, когда вы переходите на другой хост (из соображений безопасности), обходить его невозможно. Единственный вариант должен делать оплату в кадре, если это возможно. Верхний документ должен оставаться на том же хосте.
Схема:
Возможные решения:
- Проверьте открытое окно, используя
setInterval
описанное здесь . Использование кросс-хранилища (не стоило имхо).
Каков наилучший рекомендуемый подход в 2019 году?
Оболочка для React - https://github.com/Ramshackle-Jamathon/react-oauth-popup
setInterval
может быть использован как запасной вариант для localStoragelocalStorage
, но он работает только для того же домена, поэтому он не работает в моем состоянииwindow.opener
после перенаправления обратно на наш домен, но это не такОтветы:
Предложил Ханг TO . OAuth всплывающее окно с localStorage. Основано на реакции-oauth-popup .
Схема:
Код:
oauth-popup.tsx:
app.tsx
источник
Однажды я столкнулся с проблемой в моем потоке входа в систему oauth с ошибкой window.open/window.opener на ms-edge
Мой поток до этой проблемы был
Мой поток после этой проблемы был
источник