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

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

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

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

ก่อนจะเริ่ม

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

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

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

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

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

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

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

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

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

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

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

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

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

    Web version 9

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

    Web version 8

    var provider = new firebase.auth.SAMLAuthProvider('saml.example-provider');
    ``
    
  1. ตรวจสอบสิทธิ์กับ Firebase โดยใช้วัตถุผู้ให้บริการ SAML

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

    โฟลว์การเปลี่ยนเส้นทาง

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

    Web version 9

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

    Web version 8

    firebase.auth().signInWithRedirect(provider);
    

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

    Web version 9

    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 version 8

    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 version 9

    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 version 8

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