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

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

Firebase Authentication รองรับเฉพาะขั้นตอนการทำงานของ SAML ที่เริ่มต้นโดยผู้ให้บริการ

ก่อนเริ่มต้น

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

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

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

1. เพิ่ม Firebase ลงในโปรเจ็กต์ JavaScript

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

3. ในคอนโซล Firebase ให้ไปที่ความปลอดภัย > การตรวจสอบสิทธิ์

4. ในแท็บวิธีการลงชื่อเข้าใช้ ให้คลิกเพิ่มผู้ให้บริการใหม่ แล้วคลิก SAML

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

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

7. บันทึกการเปลี่ยนแปลง

8. หากยังไม่ได้ดำเนินการ ให้ให้สิทธิ์โดเมนของแอปโดยทำดังนี้

   1. ในคอนโซลFirebase ให้ไปที่แท็บ ความปลอดภัย > การตรวจสอบสิทธิ์ > การตั้งค่า

   2. ในส่วนโดเมนที่ได้รับอนุญาต ให้คลิกเพิ่มโดเมน แล้วเพิ่ม โดเมน

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

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

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

   Web

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

   Web

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

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

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

   ขั้นตอนการเปลี่ยนเส้นทาง

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

   Web

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

   Web

   firebase.auth().signInWithRedirect(provider);
   

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

   Web

   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.
     });
   

   Web

   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.
     });
   

   ขั้นตอนการทำงานแบบป๊อปอัป

   Web

   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.
     });
   

   Web

   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.
     });
   

   โทเค็นรหัสและออบเจ็กต์ 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() ซึ่งใช้เพื่อดึงข้อมูลเข้าสู่ระบบใหม่สำหรับการดำเนินการที่ละเอียดอ่อนซึ่งต้องมีการเข้าสู่ระบบล่าสุด