ตรวจสอบสิทธิ์โดยใช้ 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 ให้คลิกเพิ่มผู้ให้บริการใหม่ แล้วคลิก SAML

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

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

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

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

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