oidc client

@AXA-FR/OIDC-CLIENT

• Tentang
• Memulai
• Jalankan demo
• Cara kerjanya
• Paket
  • @axa-fr/oidc-client
  • @axa-fr/react-oidc
  • @axa-fr/svelte-oidc : kami mencari kontributor
  • @axa-fr/vue-oidc : kami mencari kontributor
  • @axa-fr/angular-oidc : kami mencari kontributor
• FAQ
• Migrasi
• Menyumbang

Tentang

@AXA-FR/OIDC-CLIENT Perpustakaan paling ringan dan terpencil untuk mengelola otentikasi dengan OpenId Connect (OIDC) dan Protokol OAuth2. Ini kompatibel dengan semua penyedia OIDC. @AXA-FR/OIDC-CLIENT adalah perpustakaan JavaScript murni. Ini bekerja dengan kerangka kerja atau perpustakaan JavaScript. @axa-fr/react-oidc adalah untuk bereaksi (kompatibel selanjutnya.js, dll.), Kami berharap segera menyediakan satu untuk vue , sudut dan langsing .

Demo:

• Coba demo React di https://black-rock-0dc6b0d03.1.azurestaticapps.net/ (paling canggih)
• Coba demo JavaScript murni di https://icy-glacier-004ab4303.2.azurestaticapps.net/

@AXA-FR/OIDC-CLIENT adalah:

• Aman :
  • Dengan menunjukkan bukti kepemilikan (dpop), akses_token dan refresh_token Anda tidak dapat digunakan di luar konteks browser Anda (perlindungan besar)
  • Dengan penggunaan pekerja layanan, token Anda (refresh_token dan/atau access_token) tidak dapat diakses ke kode klien JavaScript (jika Anda mengikuti praktik yang baik dari bagian FAQ )
  • OIDC Menggunakan Hibah Kredensial Kode Sisi Klien dengan PKCE saja
• Ringan : Ukuran tanpa kemasan pada NPM adalah 274 kb , Minified 61.1kB , Minified+Gzipped 16.8kB PKG Statistik via bundephobia.com
• Sederhana
  • Refresh_token dan access_token adalah Auto Refreshed di latar belakang
  • Dengan menggunakan pekerja layanan, Anda tidak perlu menyuntikkan akses_token di setiap fetch, Anda hanya perlu mengkonfigurasi file oidctrustedDomains.js
• Beberapa otentikasi :
  • Anda dapat mengotentikasi berkali -kali ke penyedia yang sama dengan ruang lingkup yang berbeda (misalnya Anda dapat memperoleh ruang lingkup 'pembayaran' baru untuk pembayaran)
  • Anda dapat mengautentikasi ke beberapa penyedia berbeda di dalam situs web SPA (aplikasi satu halaman) yang sama
• Fleksibel :
  • Bekerja dengan pekerja layanan (lebih aman) dan tanpa untuk browser yang lebih lama (kurang aman).
  • Anda dapat menonaktifkan pekerja layanan jika Anda mau (tetapi kurang aman) dan cukup gunakan Sesi Sesi atau Mode LocalStorage.

Bekerja dengan sangat baik dengan:

• Auth0
• Duende Identity Server
• Identity Server 4
• Azure AD
• Google
• AWS
• Keycloak
• dll., semua penyedia OIDC

Memulai

Memulai dengan @axa-fr/oidc-klien

npm install @axa-fr/oidc-client --save

# To install or update OidcServiceWorker.js file, you can run
node ./node_modules/@axa-fr/oidc-client/bin/copy-service-worker-files.mjs public

# If you have a "public" folder, the 2 files will be created :
# ./public/OidcServiceWorker.js <-- will be updated at each "npm install"
# ./public/OidcTrustedDomains.js <-- won't be updated if already exist 

Peringatan

Jika Anda menggunakan mode Service Worker , file OidcServiceWorker.js harus selalu up to date dengan versi perpustakaan. Anda dapat mengatur skrip postInstall di file package.json Anda untuk memperbaruinya di setiap instal NPM. Misalnya :

  "scripts" : {
    ...
    "postinstall" : " node ./node_modules/@axa-fr/oidc-client/bin/copy-service-worker-files.mjs public "
  },

Lebih banyak dokumentasi:

• @axa-fr/oidc-client

Memulai dengan @axa-fr/react-oidc

npm install @axa-fr/react-oidc --save

# To install or update OidcServiceWorker.js file, you can run
node ./node_modules/@axa-fr/react-oidc/bin/copy-service-worker-files.mjs public

# If you have a "public" folder, the 2 files will be created :
# ./public/OidcServiceWorker.js <-- will be updated at each "npm install"
# ./public/OidcTrustedDomains.js <-- won't be updated if already exist 

Peringatan

Jika Anda menggunakan mode pekerja layanan, file oidcserviceworker.js harus selalu terkini dengan versi perpustakaan. Anda dapat mengatur skrip postInstall di file package.json Anda untuk memperbaruinya di setiap instal NPM. Misalnya :

  "scripts" : {
    ...
    "postinstall" : " node ./node_modules/@axa-fr/react-oidc/bin/copy-service-worker-files.mjs public "
  },

Lebih banyak dokumentasi:

• @axa-fr/react-oidc

Jalankan demo

git clone https://github.com/AxaFrance/oidc-client.git

cd oidc-client
pnpm install

# oidc client demo
cd examples/oidc-client-demo
pnpm install
pnpm start
# then navigate to http://localhost:5174

# react vite demo
cd examples/react-oidc-demo
pnpm install
pnpm start
# then navigate to http://localhost:4200

# react NextJS demo
cd examples/nextjs-demo
pnpm install
pnpm run dev
# then navigate to http://localhost:3001 

Cara kerjanya

Pekerja layanan Catch Access_Token dan Refresh_Token yang tidak akan pernah dapat diakses oleh klien.

Komponen-komponen ini merangkum penggunaan " @axa-fr/oidc-client " untuk menyembunyikan kompleksitas alur kerja. Secara internal untuk " @axa-fr/react-oidc ", API riwayat asli digunakan untuk menjadi router pustaka agnostik.

Informasi lebih lanjut tentang OIDC:

• Prancis: Augmentez La Sécurité et la Simplicité de votre Système d'Enformation OpenId Connect
• Bahasa Inggris: Tingkatkan keamanan dan kesederhanaan sistem informasi Anda dengan OpenID Connect
• Bahasa Inggris: YouTube React-oidc Pendahuluan
• Prancis: YouTube React-oidc Pendahuluan

FAQ

• FAQ Pertanyaan yang Dikeringkan

Migrasi

• Migrasi dari V3 ke V4 guide
• Migrasi dari V3 ke V5 guide
• Bermigrasi dari V4 ke V5 guide
• Bermigrasi dari V5 ke V6 guide
• Migrasi dari V6 ke V7 guide

Menyumbang

• Cara menjalankan solusi dan berkontribusi
• Harap hormati Kode Etik kami