Saya tertarik pada cara mengimplementasikan OAuth di Bereaksi menggunakan popup ( window.open
).
Misalnya saya punya:
mysite.com
- ini adalah tempat saya membuka popup.passport.mysite.com/oauth/authorize
- muncul.
Pertanyaan utamanya adalah bagaimana membuat koneksi antara window.open
(popup) dan window.opener
(seperti yang diketahui window.opener adalah null karena keamanan lintas-domain oleh karena itu kami tidak dapat menggunakannya lagi).
⇑
window.opener
dihapus setiap kali Anda menavigasi ke host yang berbeda (untuk alasan keamanan), tidak ada jalan lain. Satu-satunya opsi harus melakukan pembayaran dalam bingkai jika memungkinkan. Dokumen teratas harus tetap di host yang sama.
Skema:
Solusi yang memungkinkan:
- Periksa jendela yang terbuka menggunakan
setInterval
dijelaskan di sini . Menggunakan cross-storage (tidak layak dilakukan).
Jadi apa pendekatan terbaik yang direkomendasikan pada tahun 2019?
Wrapper untuk Bereaksi - https://github.com/Ramshackle-Jamathon/react-oauth-popup
sumber
setInterval
dapat digunakan sebagai fallback untuk penyimpanan lokallocalStorage
, tetapi hanya bekerja untuk domain yang sama sehingga tidak berfungsi dalam kondisi sayawindow.opener
setelah mengarahkan kembali ke domain kami, tetapi ini tidak terjadiJawaban:
Disarankan oleh Khanh TO . Munculan OAuth dengan localStorage. Berdasarkan reaksi-oauth-popup .
Skema:
Kode:
oauth-popup.tsx:
app.tsx
sumber
Saya pernah mengalami masalah pada aliran masuk oauth saya dengan bug window.open/window.opener di ms-edge
Alur saya sebelum masalah ini adalah
Alur saya setelah masalah ini adalah
sumber