ตรวจสอบสิทธิ์โดยใช้ 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 ด้วย Identity Platform การตรวจสอบสิทธิ์ SAML จะใช้ได้ในโปรเจ็กต์ที่อัปเกรดเท่านั้น

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

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

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

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