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

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

ก่อนที่คุณจะเริ่มต้น

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

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

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

• ผู้ออก : สตริงที่ระบุผู้ให้บริการของคุณ ค่านี้ต้องเป็น 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. ตั้งชื่อให้กับผู้ให้บริการรายนี้ สังเกตรหัสผู้ให้บริการที่สร้างขึ้น: คล้ายกับ oidc.example-provider คุณต้องใช้รหัสนี้เมื่อเพิ่มรหัสลงชื่อเข้าใช้ในแอป

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

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

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

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

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

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

   เว็บโมดูลาร์ 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

   เว็บโมดูลาร์ 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 เพิ่มเติมนอกเหนือจากโปรไฟล์พื้นฐานที่คุณต้องการร้องขอจากผู้ให้บริการตรวจสอบสิทธิ์

   เว็บโมดูลาร์ API

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

   API เนมสเปซของเว็บ

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

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

4. รับรองความถูกต้องกับ Firebase โดยใช้วัตถุผู้ให้บริการ OAuth

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

   เปลี่ยนเส้นทางการไหล

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

   เว็บโมดูลาร์ API

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

   API เนมสเปซของเว็บ

   firebase.auth().signInWithRedirect(provider);
   

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

   เว็บโมดูลาร์ 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.
     });
   

   โฟลว์ป๊อปอัป

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

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

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