Rumah  >  Artikel  >  hujung hadapan web  >  Cara melaksanakan oAuth dengan PKCE untuk penyepaduan pihak ketiga dalam tindak balas

Cara melaksanakan oAuth dengan PKCE untuk penyepaduan pihak ketiga dalam tindak balas

Patricia Arquette
Patricia Arquetteasal
2024-10-01 06:35:031016semak imbas

Semasa melaksanakan oAuth untuk penyepaduan pihak ketiga, saya terjumpa beberapa maklumat yang tidak dikemas kini untuk beberapa lama. Di sini saya cuba menangkap pengalaman saya dan cara ia berfungsi

Nota: Artikel ini tidak akan bercakap secara terperinci tentang oAuth dan cara ia berfungsi. Kebanyakan fokus pada cara mengkonfigurasi dan melaksanakannya dalam aplikasi tindak balas. Jika anda ingin membaca tentang oAuth, baca di sini. Menyediakan maklumat yang jelas.

Aliran:

How to implement oAuth with PKCE for third-party integration in react

Secara kasar aliran berfungsi seperti yang diterangkan di atas.

Jadi, apa masalahnya:

Biasanya apabila anda cuba mendapatkan kod & code_verifier daripada tapak web pihak ketiga secara langsung, anda mungkin menghadapi masalah CORS. Ini dijangka.

Bagaimana untuk menyelesaikannya?

  1. Semak dengan pembekal pihak ketiga - Jika mereka boleh menyenarai putih tapak web anda, hebat. Anda tidak memerlukan bahagian belakang sama sekali

  2. Jika penyenaraian putih tidak berjaya, anda mungkin memerlukan bahagian belakang untuk berfungsi sebagai reverse_proxy untuk anda. Dalam kes kami, kami menggunakan persediaan skrip taip mudah yang memproksi panggilan kami dan menggunakannya sebagai bahagian belakang untuk proksi terbalik. Anda boleh mencapainya dengan persediaan hujung belakang anda juga.

Mengapa ia mencecah CORS?

Sebab kemungkinan besar, jika anda menggunakan PKCE, anda perlu menghantar pengepala Pengesahan bersama-sama dengan permintaan anda, untuk mendapatkan token. Menghantar Pengesahan adalah tidak-tidak daripada UI atas sebab keselamatan.

CORs ialah ciri terbina dalam penyemak imbas untuk keselamatan tambahan. Ia menghalang mana-mana tapak web rawak daripada menggunakan kuki anda yang disahkan untuk menghantar permintaan API ke tapak web bank anda dan melakukan perkara seperti mengeluarkan wang secara rahsia.

Perpustakaan manakah yang saya gunakan untuk menyelesaikannya dengan mudah dalam tindak balas?

https://github.com/authts/react-oidc-context
? yang ini. Ini menyediakan konfigurasi sebagai konteks dan turut menyokong webstoragestatestore yang bagus untuk dimiliki.

Adakah anda mempunyai lebih banyak soalan?

Balas di sini. Sukacita ingin membantu jika saya boleh :)

Selamat mengekod..

Atas ialah kandungan terperinci Cara melaksanakan oAuth dengan PKCE untuk penyepaduan pihak ketiga dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:AI tempatan dengan API ChromeArtikel seterusnya:AI tempatan dengan API Chrome