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

หากอัปเกรดเป็น Firebase Authentication with 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 Authentication with 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 

    import { OAuthProvider } from "firebase/auth";

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

    Web 

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

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

    Web 

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

    Web 

    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 

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

    Web 

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

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

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

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

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

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

    Web 

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

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

    Web 

    firebase.auth().signInWithRedirect(provider);

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

    Web 

    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.
  });

    Web 

    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 

    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.
  });

    Web 

    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 

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.
    });

Web 

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.
    });