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

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

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

ก่อนจะเริ่ม

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

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

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

  • ผู้ออก : สตริงที่ระบุผู้ให้บริการของคุณ ค่านี้ต้องเป็น 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 ด้วย Identity Platform ให้ดำเนินการดังกล่าว การตรวจสอบสิทธิ์ OpenID Connect ใช้ได้เฉพาะในโปรเจ็กต์ที่อัปเกรดแล้ว

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

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

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

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

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

  7. บันทึกการเปลี่ยนแปลงของคุณ

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

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

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

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

    Web version 9

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('oidc.example-provider');
    

    Web version 8

    var provider = new firebase.auth.OAuthProvider('oidc.example-provider');
    
  2. ไม่บังคับ : ระบุพารามิเตอร์ OAuth ที่กำหนดเองเพิ่มเติมที่คุณต้องการส่งด้วยคำขอ OAuth

    Web version 9

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

    Web version 8

    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 version 9

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

    Web version 8

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

    ตรวจสอบกับผู้ให้บริการของคุณสำหรับขอบเขตที่รองรับ

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

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

    โฟลว์การเปลี่ยนเส้นทาง

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

    Web version 9

    import { getAuth, signInWithRedirect } from "firebase/auth";
    
    const auth = getAuth();
    signInWithRedirect(auth, provider);
    

    Web version 8

    firebase.auth().signInWithRedirect(provider);
    

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

    Web version 9

    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 version 8

    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 version 9

    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 version 8

    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 ในแอปแล้ว คุณสามารถใช้โทเค็น ID เพื่อตรวจสอบสิทธิ์กับ Firebase ได้โดยตรง:

Web version 9

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 version 8

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