Interesuje mnie, jak zaimplementować OAuth w React za pomocą popup ( window.open
).
Na przykład mam:
mysite.com
- tutaj otwieram wyskakujące okienko.passport.mysite.com/oauth/authorize
- wyskakujące okienko.
Główne pytanie brzmi: jak utworzyć połączenie między window.open
(wyskakującym oknem) a window.opener
(jak wiadomo, window.opener ma wartość zerową ze względu na bezpieczeństwo w wielu domenach, dlatego nie możemy go więcej używać).
⇑
window.opener
jest usuwany za każdym razem, gdy nawigujesz do innego hosta (ze względów bezpieczeństwa), nie można tego obejść. Jedyną opcją powinno być dokonywanie płatności w ramce, jeśli jest to możliwe. Najważniejszy dokument musi pozostać na tym samym hoście.
Schemat:
Możliwe rozwiązania:
- Sprawdź otwarte okno, używając
setInterval
opisanego tutaj . Korzystanie z przechowywania krzyżowego (nie warto imho).
Jakie jest zatem najlepsze zalecane podejście w 2019 roku?
Wrapper for React - https://github.com/Ramshackle-Jamathon/react-oauth-popup
setInterval
może być wykorzystany jako zapasowy dla localStoragelocalStorage
, ale działa tylko w tej samej domenie, więc nie działa w moim staniewindow.opener
po przekierowaniu z powrotem do naszej domeny, ale tak nie jestOdpowiedzi:
Sugerowane przez Khanh TO . Wyskakujące okienko OAuth z localStorage. Na podstawie wyskakującego wyskakującego polecenia .
Schemat:
Kod:
oauth-popup.tsx:
app.tsx
źródło
Raz napotkałem problem z moim oauth logowaniem z błędem window.open/window.opener na ms-edge
Mój przepływ przed tym problemem był
Mój przepływ po tym problemie był
źródło