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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. สร้างอินสแตนซ์ของ SAMLAuthProvider โดยใช้รหัสผู้ให้บริการที่คุณได้รับในคอนโซล 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.
     });
   

   โทเค็น ID และออบเจ็กต์ UserInfo มีที่อยู่อีเมลของผู้ใช้เฉพาะในกรณีที่ระบุไว้ในแอตทริบิวต์ NameID ของการยืนยัน SAML จากผู้ให้บริการข้อมูลประจำตัว:

   <Subject>
     <NameID Format="urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress">test@email.com</NameID>
   </Subject>
   

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