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

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