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

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

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

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

  • รหัสไคลเอ็นต์: สตริงที่ไม่ซ้ำกันสำหรับผู้ให้บริการที่ระบุแอปของคุณ ผู้ให้บริการอาจกำหนดรหัสไคลเอ็นต์ที่แตกต่างกันสำหรับแต่ละแพลตฟอร์มที่คุณรองรับ นี่เป็นค่าหนึ่งของการอ้างสิทธิ์ aud ในโทเค็นรหัสที่ออกโดยผู้ให้บริการของคุณ

  • รหัสลับไคลเอ็นต์: สตริงลับที่ผู้ให้บริการใช้เพื่อยืนยันการเป็นเจ้าของรหัสไคลเอ็นต์ คุณจะต้องมีรหัสลับไคลเอ็นต์ที่ตรงกันสำหรับรหัสลูกค้าแต่ละรหัส (ค่านี้ต้องใช้เฉพาะในกรณีที่ใช้ขั้นตอนการใช้รหัสการให้สิทธิ์เท่านั้น ซึ่งเราขอแนะนำเป็นอย่างยิ่ง)

  • Issuer: สตริงที่ระบุผู้ให้บริการ ค่านี้ต้องเป็น URL ที่เมื่อต่อท้ายด้วย /.well-known/openid-configuration แล้ว จะเป็นตําแหน่งของเอกสารการค้นพบ OIDC ของผู้ให้บริการ ตัวอย่างเช่น หากผู้ออกบัตรคือ https://auth.example.com เอกสารการค้นพบจะต้องอยู่ที่ https://auth.example.com/.well-known/openid-configuration

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

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

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

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

  4. เลือกว่าคุณจะใช้ขั้นตอนรหัสการให้สิทธิ์หรือขั้นตอนการให้สิทธิ์โดยนัย

    คุณควรใช้โฟลว์ของรหัสเสมอหากผู้ให้บริการรองรับ ขั้นตอนโดยนัยมีความปลอดภัยน้อยกว่า และเราไม่สนับสนุนให้ใช้ขั้นตอนดังกล่าว

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

  6. ระบุรหัสไคลเอ็นต์และรหัสลับไคลเอ็นต์ รวมถึงสตริงผู้ออกใบรับรองของผู้ให้บริการ ค่าเหล่านี้ต้องตรงกับค่าที่ผู้ให้บริการกำหนดให้คุณทุกประการ

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

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

วิธีที่ง่ายที่สุดในการตรวจสอบสิทธิ์ผู้ใช้ด้วย Firebase โดยใช้ผู้ให้บริการ OIDC คือการจัดการขั้นตอนการลงชื่อเข้าใช้ทั้งหมดด้วย Firebase SDK

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

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

    Web Modular API 

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('oidc.example-provider');

    API ที่ใช้เนมสเปซในเว็บ 

    var provider = new firebase.auth.OAuthProvider('oidc.example-provider');

  2. ไม่บังคับ: ระบุพารามิเตอร์ OAuth ที่กำหนดเองเพิ่มเติมที่ต้องการส่งด้วยคำขอ OAuth

    Web Modular API 

    provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});

    API ที่ใช้เนมสเปซในเว็บ 

    provider.setCustomParameters({
  // Target specific email with login hint.
  login_hint: 'user@example.com'
});

    โปรดตรวจสอบพารามิเตอร์ที่รองรับกับผู้ให้บริการของคุณ โปรดทราบว่าคุณไม่สามารถส่งพารามิเตอร์ที่จำเป็นสำหรับ Firebase ด้วย setCustomParameters พารามิเตอร์เหล่านี้คือ client_id, response_type, redirect_uri, state, scope และ response_mode

  3. ไม่บังคับ: ระบุขอบเขต OAuth 2.0 เพิ่มเติมนอกเหนือจากโปรไฟล์พื้นฐานที่คุณต้องการขอจากผู้ให้บริการการตรวจสอบสิทธิ์

    Web Modular API 

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    API ที่ใช้เนมสเปซในเว็บ 

    provider.addScope('mail.read');
provider.addScope('calendars.read');

    โปรดตรวจสอบขอบเขตที่ผู้ให้บริการรองรับ

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

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

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

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

    Web Modular API 

    import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);

    API ที่ใช้เนมสเปซในเว็บ 

    firebase.auth().signInWithRedirect(provider);

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

    Web Modular API 

    import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // User is signed in.
    // IdP data available in result.additionalUserInfo.profile.

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

    API ที่ใช้เนมสเปซในเว็บ 

    firebase.auth().getRedirectResult()
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

    ขั้นตอนป๊อปอัป

    Web Modular API 

    import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // User is signed in.
    // IdP data available using getAdditionalUserInfo(result)

    // Get the OAuth access token and ID Token
    const credential = OAuthProvider.credentialFromResult(result);
    const accessToken = credential.accessToken;
    const idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

    API ที่ใช้เนมสเปซในเว็บ 

    firebase.auth().signInWithPopup(provider)
  .then((result) => {
    // IdP data available in result.additionalUserInfo.profile.
    // ...

    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // OAuth access and id tokens can also be retrieved:
    var accessToken = credential.accessToken;
    var idToken = credential.idToken;
  })
  .catch((error) => {
    // Handle error.
  });

  5. แม้ว่าตัวอย่างข้างต้นจะเน้นที่ขั้นตอนการลงชื่อเข้าใช้ คุณสามารถใช้รูปแบบเดียวกันในการลิงก์ผู้ให้บริการ OIDC กับผู้ใช้ที่มีอยู่โดยใช้ linkWithRedirect() และ linkWithPopup() และตรวจสอบสิทธิ์ผู้ใช้อีกครั้งด้วย reauthenticateWithRedirect() และ reauthenticateWithPopup() ได้ ซึ่งสามารถใช้เพื่อเรียกข้อมูลข้อมูลเข้าสู่ระบบใหม่สำหรับการดำเนินการที่มีความละเอียดอ่อนที่ต้องมีการเข้าสู่ระบบล่าสุด

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

หากคุณใช้ขั้นตอนการลงชื่อเข้าใช้ OpenID Connect ในแอปอยู่แล้ว คุณจะใช้โทเค็นรหัสโดยตรงเพื่อตรวจสอบสิทธิ์กับ Firebase ได้โดยทำดังนี้

Web Modular API 

import { getAuth, signInWithCredential, OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
signInWithCredential(getAuth(), credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });

API ที่ใช้เนมสเปซในเว็บ 

const provider = new OAuthProvider("oidc.example-provider");
const credential = provider.credential({
    idToken: idToken,
});
firebase.auth().signInWithCredential(credential)
    .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.

        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
    })
    .catch((error) => {
        // Handle error.
    });