ตรวจสอบสิทธิ์โดยใช้ SAML ในเว็บแอป

หากคุณอัปเกรดเป็น Firebase Authentication ด้วย Identity Platform คุณจะตรวจสอบสิทธิ์ผู้ใช้ด้วย Firebase โดยใช้ผู้ให้บริการข้อมูลประจำตัว SAML ที่คุณเลือกได้ ทำให้สามารถใช้โซลูชัน SSO ที่ใช้ SAML เพื่อลงชื่อเข้าใช้แอป Firebase ให้ผู้ใช้

การตรวจสอบความถูกต้องของ Firebase รองรับเฉพาะโฟลว์ SAML ที่เริ่มต้นโดยผู้ให้บริการเท่านั้น

ก่อนที่คุณจะเริ่มต้น

ในการลงชื่อเข้าใช้ผู้ใช้โดยใช้ผู้ให้บริการข้อมูลประจำตัว SAML คุณต้องรวบรวมข้อมูลบางอย่างจากผู้ให้บริการก่อน:

• ID เอนทิตีของผู้ให้บริการ : URI ที่ระบุผู้ให้บริการข้อมูลประจำตัว
• SAML SSO URL ของผู้ให้บริการ : URL ของหน้าลงชื่อเข้าใช้ของผู้ให้บริการข้อมูลประจำตัว
• ใบรับรองคีย์สาธารณะของผู้ให้บริการ : ใบรับรองที่ใช้ในการตรวจสอบโทเค็นที่ลงนามโดยผู้ให้บริการข้อมูลประจำตัว
• รหัสเอนทิตีของแอปของคุณ : URI ที่ระบุแอปของคุณ ซึ่งเป็น "ผู้ให้บริการ"

หลังจากมีข้อมูลข้างต้นแล้ว ให้เปิดใช้ SAML เป็นผู้ให้บริการลงชื่อเข้าใช้สำหรับโปรเจ็กต์ Firebase ของคุณ:

1. เพิ่ม Firebase ในโครงการ JavaScript ของคุณ

2. หากคุณยังไม่ได้อัปเกรดเป็น Firebase Authentication ด้วย Identity Platform ให้ดำเนินการดังกล่าว การตรวจสอบสิทธิ์ SAML ใช้ได้เฉพาะในโครงการที่อัปเกรดเท่านั้น

3. ในหน้า ผู้ให้บริการลงชื่อเข้าใช้ ของคอนโซล Firebase ให้คลิก เพิ่มผู้ให้บริการใหม่ แล้วคลิก SAML

4. ตั้งชื่อให้กับผู้ให้บริการรายนี้ สังเกตรหัสผู้ให้บริการที่สร้างขึ้น: บางอย่างเช่น saml.example-provider คุณต้องใช้รหัสนี้เมื่อเพิ่มรหัสลงชื่อเข้าใช้ในแอป

5. ระบุ ID เอนทิตีของผู้ให้บริการข้อมูลประจำตัวของคุณ, SSO URL และใบรับรองคีย์สาธารณะ ระบุรหัสเอนทิตีของแอปของคุณ (ผู้ให้บริการ) ด้วย ค่าเหล่านี้ต้องตรงกับค่าที่ผู้ให้บริการกำหนดให้กับคุณทุกประการ

6. บันทึกการเปลี่ยนแปลงของคุณ

7. หากคุณยังไม่ได้อนุญาตโดเมนของแอป ให้เพิ่มลงในรายการอนุญาตในหน้า การตรวจสอบสิทธิ์ > การตั้งค่า ของคอนโซล Firebase

จัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase SDK

หากต้องการจัดการขั้นตอนการลงชื่อเข้าใช้ด้วย Firebase JavaScript SDK ให้ทำตามขั้นตอนเหล่านี้:

1. สร้างอินสแตนซ์ของ SAMLAuthProvider โดยใช้ ID ผู้ให้บริการที่คุณได้รับในคอนโซล Firebase

   เว็บโมดูลาร์ API

   import { SAMLAuthProvider } from "firebase/auth";
   
   const provider = new SAMLAuthProvider('saml.example-provider');
   

   API เนมสเปซของเว็บ

   var provider = new firebase.auth.SAMLAuthProvider('saml.example-provider');
   ``
   

1. ตรวจสอบสิทธิ์กับ Firebase โดยใช้วัตถุผู้ให้บริการ SAML

   คุณสามารถเปลี่ยนเส้นทางผู้ใช้ไปยังหน้าลงชื่อเข้าใช้ของผู้ให้บริการ หรือเปิดหน้าลงชื่อเข้าใช้ในหน้าต่างเบราว์เซอร์ป๊อปอัป

   เปลี่ยนเส้นทางการไหล

   เปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ของผู้ให้บริการโดยเรียก signInWithRedirect() :

   เว็บโมดูลาร์ API

   import { getAuth, signInWithRedirect } from "firebase/auth";
   
   const auth = getAuth();
   signInWithRedirect(auth, provider);
   

   API เนมสเปซของเว็บ

   firebase.auth().signInWithRedirect(provider);
   

   หลังจากที่ผู้ใช้ลงชื่อเข้าใช้และกลับมาที่แอปของคุณแล้ว คุณสามารถรับผลการลงชื่อเข้าใช้ได้โดยเรียก getRedirectResult()

   เว็บโมดูลาร์ API

   import { getAuth, getRedirectResult, SAMLAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   getRedirectResult(auth)
     .then((result) => {
       // User is signed in.
   
       // Provider data available using getAdditionalUserInfo()
     })
     .catch((error) => {
       // Handle error.
     });
   

   API เนมสเปซของเว็บ

   firebase.auth().getRedirectResult()
     .then((result) => {
       // User is signed in.
   
       // Provider data available in result.additionalUserInfo.profile,
       // or from the user's ID token obtained from result.user.getIdToken()
       // as an object in the firebase.sign_in_attributes custom claim.
     })
     .catch((error) => {
       // Handle error.
     });
   

   โฟลว์ป๊อปอัป

   เว็บโมดูลาร์ API

   import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
   
   const auth = getAuth();
   signInWithPopup(auth, provider)
     .then((result) => {
       // User is signed in.
   
       // Provider data available in result.additionalUserInfo.profile,
       // or from the user's ID token obtained from result.user.getIdToken()
       // as an object in the firebase.sign_in_attributes custom claim.
     })
     .catch((error) => {
       // Handle error.
     });
   

   API เนมสเปซของเว็บ

   firebase.auth().signInWithPopup(provider)
     .then((result) => {
       // User is signed in.
   
       // Provider data available in result.additionalUserInfo.profile,
       // or from the user's ID token obtained from result.user.getIdToken()
       // as an object in the firebase.sign_in_attributes custom claim.
     })
     .catch((error) => {
       // Handle error.
     });
   

2. แม้ว่าตัวอย่างด้านบนจะมุ่งเน้นไปที่ขั้นตอนการลงชื่อเข้าใช้ คุณสามารถใช้รูปแบบเดียวกันเพื่อเชื่อมโยงผู้ให้บริการ SAML กับผู้ใช้ที่มีอยู่โดยใช้ linkWithRedirect() และ linkWithPopup() และตรวจสอบสิทธิ์ผู้ใช้อีกครั้งด้วย reauthenticateWithRedirect() และ reauthenticateWithPopup() ซึ่งสามารถใช้เพื่อดึงข้อมูลรับรองใหม่สำหรับการดำเนินการที่ละเอียดอ่อนซึ่งต้องมีการเข้าสู่ระบบล่าสุด