Ich bin daran interessiert, wie OAuth in React mit popup ( window.open
) implementiert wird .
Zum Beispiel habe ich:
mysite.com
- Hier öffne ich das Popup.passport.mysite.com/oauth/authorize
- Pop-up.
Die Hauptfrage ist, wie eine Verbindung zwischen window.open
(Popup) und window.opener
(wie bekannt, ist window.opener aufgrund der domänenübergreifenden Sicherheit null, daher können wir es nicht mehr verwenden) hergestellt wird.
⇑
window.opener
wird entfernt, wenn Sie zu einem anderen Host navigieren (aus Sicherheitsgründen). Daran führt kein Weg vorbei. Die einzige Möglichkeit sollte darin bestehen, die Zahlung in einem Rahmen durchzuführen, wenn dies möglich ist. Das oberste Dokument muss sich auf demselben Host befinden.
Planen:
Mögliche Lösungen:
- Überprüfen Sie ein geöffnetes Fenster mit
setInterval
der hier beschriebenen . Mit Cross-Lagerung (nicht wert IMHO).
Was ist der am besten empfohlene Ansatz für 2019?
Wrapper for React - https://github.com/Ramshackle-Jamathon/react-oauth-popup
quelle
setInterval
könnte als Fallback für localStoragelocalStorage
, aber es funktioniert nur für dieselbe Domain, so dass es in meinem Zustand nicht funktioniertwindow.opener
nach der Umleitung zurück zu unserer Domain wiederhergestellt würde , aber dies ist nicht der FallAntworten:
Vorgeschlagen von Khanh TO . OAuth-Popup mit localStorage. Basierend auf React-Oauth-Popup .
Planen:
Code:
oauth-popup.tsx:
app.tsx
quelle
Ich habe einmal ein Problem mit meinem oauth-Anmeldefluss mit dem Fehler window.open/window.opener auf ms-edge festgestellt
Mein Fluss vor diesem Problem war
Mein Fluss nach diesem Problem war
quelle