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

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

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

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

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

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

  • ผู้ออกบัตร: สตริงที่ระบุผู้ให้บริการ ค่านี้ต้องเป็น 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 ให้ไปที่ความปลอดภัย > การตรวจสอบสิทธิ์

  4. ในแท็บวิธีการลงชื่อเข้าใช้ ให้คลิกเพิ่มผู้ให้บริการใหม่ แล้วคลิก OpenID Connect

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

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

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

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

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

จัดการขั้นตอนการลงชื่อเข้าใช้ด้วย 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.
    });