oidc client

@axa-fr/oidc-client

• เกี่ยวกับ
• เริ่มต้น
• เรียกใช้การสาธิต
• มันทำงานอย่างไร
• แพ็คเกจ
  • @axa-fr/oidc-client
  • @axa-fr/react-oidc
  • @axa-fr/svelte-oidc : เรากำลังมองหาผู้สนับสนุน
  • @axa-fr/vue-oidc : เรากำลังมองหาผู้สนับสนุน
  • @axa-fr/angular-oidc : เรากำลังมองหาผู้สนับสนุน
• คำถามที่พบบ่อย
• การอพยพ
• มีส่วนช่วย

เกี่ยวกับ

@AXA-FR/OIDC-client ไลบรารีที่เบาที่สุดและมีความปลอดภัยเพื่อจัดการการรับรองความถูกต้องด้วย OpenID Connect (OIDC) และ OAUTH2 โปรโตคอล มันเข้ากันได้กับผู้ให้บริการ OIDC ทั้งหมด @AXA-FR/OIDC-Client เป็นไลบรารี JavaScript บริสุทธิ์ มันทำงานกับกรอบ JavaScript หรือห้องสมุดใด ๆ @axa-fr/react-oidc มีไว้สำหรับ การตอบสนอง (เข้ากันได้ next.js ฯลฯ ) เราคาดว่าจะให้เร็ว ๆ นี้สำหรับ Vue , Angular และ Svelte

การสาธิต:

• ลองใช้ React Demo ที่ https://black-rock-0dc6b0d03.1.azurestaticapps.net/ (ขั้นสูงที่สุด)
• ลองสาธิต JavaScript บริสุทธิ์ที่ https://icy-glacier-004ab4303.2.azurestaticapps.net/

@axa-fr/oidc-client คือ:

• ปลอดภัย :
  • ด้วยการสาธิตการพิสูจน์การครอบครอง (DPOP) ACCESS_TOKEN และ Refresh_Token ของคุณไม่สามารถใช้งานได้นอกบริบทของเบราว์เซอร์ (การป้องกันขนาดใหญ่)
  • ด้วยการใช้งานของผู้ให้บริการโทเค็นของคุณ (Refresh_Token และ/หรือ Access_Token) ไม่สามารถเข้าถึงรหัสไคลเอนต์ JavaScript (ถ้าคุณปฏิบัติตามแนวทางปฏิบัติที่ดีจากส่วน FAQ )
  • OIDC โดยใช้สิทธิ์การรับรองรหัสฝั่งไคลเอ็นต์ด้วย PKCE เท่านั้น
• น้ำหนักเบา : ขนาดที่ไม่ได้บรรจุใน NPM คือ 274 kb , minified 61.1kB , minified+gzipped 16.8kB PKG สถิติผ่าน bundlephobia.com
• เรียบง่าย
  • refresh_token และ access_token จะรีเฟรชอัตโนมัติในพื้นหลัง
  • ด้วยการใช้งานของผู้ปฏิบัติงานคุณไม่จำเป็นต้องฉีด Access_Token ในทุกการดึงข้อมูลคุณมีเพียงกำหนดค่า oidctrustedDomains.js ไฟล์
• การรับรองความถูกต้องหลายครั้ง :
  • คุณสามารถตรวจสอบความถูกต้องหลายครั้งกับผู้ให้บริการรายเดียวกันที่มีขอบเขตที่แตกต่างกัน (ตัวอย่างเช่นคุณสามารถรับขอบเขตการชำระเงินใหม่สำหรับการชำระเงินได้)
  • คุณสามารถรับรองความถูกต้องของผู้ให้บริการที่แตกต่างกันหลายรายภายในเว็บไซต์ SPA (แอปพลิเคชันหน้าเดียว) เดียวกัน
• ยืดหยุ่นได้ :
  • ทำงานกับพนักงานบริการ (ปลอดภัยมากขึ้น) และไม่มีเบราว์เซอร์รุ่นเก่า (ปลอดภัยน้อยกว่า)
  • คุณสามารถปิดการใช้งานผู้ปฏิบัติงานบริการหากคุณต้องการ (แต่ปลอดภัยน้อยกว่า) และใช้โหมด SessionStorage หรือ LocalStorage

ใช้งานได้ดีกับ:

• Auth0
• เซิร์ฟเวอร์ Duende Identity
• เซิร์ฟเวอร์ข้อมูลประจำตัว 4
• Azure ad
• Google
• aws
• กุญแจมือ
• ฯลฯ ผู้ให้บริการ OIDC ทั้งหมด

เริ่มต้น

เริ่มต้นใช้งาน @Axa-Fr/OIDC-client

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 

คำเตือน

หากคุณใช้โหมด Service Worker ไฟล์ OidcServiceWorker.js ควรเป็นรุ่นล่าสุดกับเวอร์ชันของไลบรารี คุณสามารถตั้งค่าสคริปต์ postinstall ในไฟล์ package.json ของคุณเพื่ออัปเดตได้ที่การติดตั้ง NPM แต่ละครั้ง ตัวอย่างเช่น :

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

เอกสารเพิ่มเติม:

• @axa-fr/oidc-client

เริ่มต้นใช้งาน @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 

คำเตือน

หากคุณใช้โหมดผู้ปฏิบัติงานบริการไฟล์ OIDCServiceWorker.js ควรเป็นวันที่ทันสมัยกับเวอร์ชันของไลบรารี คุณสามารถตั้งค่าสคริปต์ postinstall ในไฟล์ package.json ของคุณเพื่ออัปเดตได้ที่การติดตั้ง NPM แต่ละครั้ง ตัวอย่างเช่น :

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

เอกสารเพิ่มเติม:

• @axa-fr/react-oidc

เรียกใช้การสาธิต

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 

มันทำงานอย่างไร

ผู้ปฏิบัติงานบริการจับ access_token และ refresh_token ที่ไม่สามารถเข้าถึงได้สำหรับลูกค้า

ส่วนประกอบเหล่านี้ห่อหุ้มการใช้ " @axa-fr/oidc-client " เพื่อซ่อนความซับซ้อนของเวิร์กโฟลว์ ภายในสำหรับ " @axa-fr/react-oidc ", API ประวัติศาสตร์ดั้งเดิมใช้เป็นห้องสมุดเราเตอร์ไม่เชื่อเรื่องพระเจ้า

ข้อมูลเพิ่มเติมเกี่ยวกับ OIDC:

• ภาษาฝรั่งเศส: Augmentez la Sécurité et la simplicité de votre système d'fate openid connect
• ภาษาอังกฤษ: เพิ่มความปลอดภัยและความเรียบง่ายของระบบข้อมูลของคุณด้วย OpenID Connect
• ภาษาอังกฤษ: บทนำของ YouTube React-IoDC
• ภาษาฝรั่งเศส: บทนำ YouTube React-IODC

คำถามที่พบบ่อย

• คำถามคำถามที่พบบ่อยถาม FAQ

การอพยพ

• การย้ายจาก guide V3 ถึง V4
• การย้ายจาก guide V3 ถึง V5
• การย้ายจาก guide V4 ถึง V5
• การย้ายจาก guide V5 ถึง V6
• การย้ายจาก guide V6 ถึง V7

มีส่วนช่วย

• วิธีเรียกใช้โซลูชันและมีส่วนร่วม
• โปรดเคารพจรรยาบรรณของเรา