เอกสารนี้แสดงวิธีใช้การตรวจสอบสิทธิ์ของ Firebase เพื่อลงชื่อเข้าใช้ส่วนขยาย Chrome ที่ใช้ Manifest V3 สำหรับผู้ใช้
การตรวจสอบสิทธิ์ Firebase มีวิธีการตรวจสอบสิทธิ์หลายวิธีในการลงชื่อเข้าใช้ผู้ใช้จากส่วนขยาย Chrome ซึ่งบางวิธีต้องใช้ความพยายามในการพัฒนามากกว่าวิธีอื่นๆ
หากต้องการใช้เมธอดต่อไปนี้ในส่วนขยาย Chrome ซึ่งใช้ไฟล์ Manifest V3 คุณเพียงต้องนำเข้าจาก firebase/auth/web-extension
เท่านั้น
- ลงชื่อเข้าใช้ด้วยอีเมลและรหัสผ่าน (
createUserWithEmailAndPassword
และsignInWithEmailAndPassword
) - ลงชื่อเข้าใช้ด้วยลิงก์อีเมล (
sendSignInLinkToEmail
,isSignInWithEmailLink
และsignInWithEmailLink
) - ลงชื่อเข้าใช้โดยไม่ระบุชื่อ (
signInAnonymously
) - ลงชื่อเข้าใช้ด้วยระบบการตรวจสอบสิทธิ์ที่กำหนดเอง (
signInWithCustomToken
) - จัดการการลงชื่อเข้าใช้ของผู้ให้บริการแยกต่างหาก จากนั้นใช้
signInWithCredential
นอกจากนี้ยังรองรับวิธีการลงชื่อเข้าใช้ต่อไปนี้ด้วย แต่ต้องดำเนินการเพิ่มเติมดังนี้
- ลงชื่อเข้าใช้ด้วยหน้าต่างป๊อปอัป (
signInWithPopup
,linkWithPopup
และreauthenticateWithPopup
) - ลงชื่อเข้าใช้โดยเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ (
signInWithRedirect
,linkWithRedirect
และreauthenticateWithRedirect
) - ลงชื่อเข้าใช้ด้วยหมายเลขโทรศัพท์ด้วย reCAPTCHA
- การตรวจสอบสิทธิ์แบบหลายปัจจัยทาง SMS ด้วย reCAPTCHA
- การปกป้อง reCAPTCHA Enterprise
หากต้องการใช้วิธีการเหล่านี้ในส่วนขยาย Chrome ซึ่งใช้ไฟล์ Manifest V3 คุณต้องใช้เอกสารนอกหน้าจอ
ใช้จุดแรกเข้าของ firebase/auth/web-ส่วนขยาย
การนำเข้าจาก firebase/auth/web-extension
จะทำให้ผู้ใช้ที่ลงชื่อเข้าใช้จากส่วนขยาย Chrome คล้ายกับเว็บแอป
Firebase/auth/web-extension ได้รับการสนับสนุนใน Web SDK เวอร์ชัน 10.8.0 ขึ้นไปเท่านั้น
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth/web-extension'; const auth = getAuth(); signInWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed in const user = userCredential.user; // ... }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; });
ใช้เอกสารนอกหน้าจอ
วิธีการตรวจสอบสิทธิ์บางวิธี เช่น signInWithPopup
, linkWithPopup
และ reauthenticateWithPopup
ใช้งานร่วมกับส่วนขยาย Chrome ไม่ได้โดยตรง เนื่องจากต้องโหลดโค้ดจากภายนอกแพ็กเกจส่วนขยาย
ตั้งแต่ไฟล์ Manifest V3 เป็นต้นไปจะไม่ได้รับอนุญาตและจะถูกบล็อกโดยแพลตฟอร์มส่วนขยาย ในการแก้ปัญหานี้ คุณสามารถโหลดโค้ดนั้นใน iframe โดยใช้เอกสารนอกหน้าจอ
ในเอกสารนอกหน้าจอ ให้ใช้ขั้นตอนการตรวจสอบสิทธิ์ปกติและพร็อกซีผลลัพธ์จากเอกสารนอกหน้าจอกลับไปยังส่วนขยาย
คู่มือนี้ใช้ signInWithPopup
เป็นตัวอย่าง แต่แนวคิดเดียวกันนี้ยังคงมีผลกับวิธีการตรวจสอบสิทธิ์อื่นๆ
ก่อนเริ่มต้น
เทคนิคนี้กำหนดให้คุณต้องตั้งค่าหน้าเว็บที่พร้อมใช้งานบนเว็บ ซึ่งคุณจะโหลดใน iframe ทุกโฮสต์ใช้งานได้ รวมถึงโฮสติ้งของ Firebase สร้างเว็บไซต์ที่มีเนื้อหาต่อไปนี้
<!DOCTYPE html> <html> <head> <title>signInWithPopup</title> <script src="signInWithPopup.js"></script> </head> <body><h1>signInWithPopup</h1></body> </html>
การลงชื่อเข้าใช้แบบรวมศูนย์
หากใช้การลงชื่อเข้าใช้แบบรวมศูนย์ เช่น ลงชื่อเข้าใช้ด้วย Google, Apple, SAML หรือ OIDC คุณต้องเพิ่มรหัสส่วนขยาย Chrome ลงในรายการโดเมนที่ได้รับอนุญาต โดยทำดังนี้
- เปิดโปรเจ็กต์ในคอนโซล Firebase
- ในส่วน Authentication ให้เปิดหน้า Settings
- เพิ่ม URI เหมือนตัวอย่างต่อไปนี้ในรายการโดเมนที่ได้รับอนุญาต
chrome-extension://CHROME_EXTENSION_ID
ในไฟล์ Manifest ของส่วนขยาย Chrome โปรดตรวจสอบว่าได้เพิ่ม URL ต่อไปนี้ลงในรายการที่อนุญาตของ content_security_policy
แล้ว
https://apis.google.com
https://www.gstatic.com
https://www.googleapis.com
https://securetoken.googleapis.com
ใช้การตรวจสอบสิทธิ์
ในเอกสาร HTML SignInWithPopup.js คือโค้ด JavaScript ที่จัดการการตรวจสอบสิทธิ์ มี 2 วิธีในการใช้งานส่วนขยายที่รองรับโดยตรง ดังนี้
- ใช้
firebase/auth
แทนfirebase/auth/web-extension
จุดแรกเข้าweb-extension
ใช้สำหรับโค้ดที่ทำงานภายในส่วนขยาย แม้ว่าสุดท้ายแล้วโค้ดนี้จะทำงานในส่วนขยาย (ใน iframe, ในเอกสารนอกหน้าจอ) แต่บริบทที่กำลังทำงานอยู่คือเว็บมาตรฐาน - รวมตรรกะการตรวจสอบสิทธิ์ใน Listener ของ
postMessage
เพื่อพร็อกซีคำขอการตรวจสอบสิทธิ์และการตอบกลับ
import { signInWithPopup, GoogleAuthProvider, getAuth } from'firebase/auth'; import { initializeApp } from 'firebase/app'; import firebaseConfig from './firebaseConfig.js' const app = initializeApp(firebaseConfig); const auth = getAuth(); // This code runs inside of an iframe in the extension's offscreen document. // This gives you a reference to the parent frame, i.e. the offscreen document. // You will need this to assign the targetOrigin for postMessage. const PARENT_FRAME = document.location.ancestorOrigins[0]; // This demo uses the Google auth provider, but any supported provider works. // Make sure that you enable any provider you want to use in the Firebase Console. // https://console.firebase.google.com/project/_/authentication/providers const PROVIDER = new GoogleAuthProvider(); function sendResponse(result) { globalThis.parent.self.postMessage(JSON.stringify(result), PARENT_FRAME); } globalThis.addEventListener('message', function({data}) { if (data.initAuth) { // Opens the Google sign-in page in a popup, inside of an iframe in the // extension's offscreen document. // To centralize logic, all respones are forwarded to the parent frame, // which goes on to forward them to the extension's service worker. signInWithPopup(auth, PROVIDER) .then(sendResponse) .catch(sendResponse) } });
สร้างส่วนขยาย Chrome
หลังจากเว็บไซต์ทำงานแล้ว คุณจะใช้เว็บไซต์ดังกล่าวในส่วนขยาย Chrome ได้
- เพิ่มสิทธิ์
offscreen
ลงในไฟล์ Manifest.json ด้วยคำสั่งต่อไปนี้ - สร้างเอกสารนอกหน้าจอด้วยตนเอง นี่เป็นไฟล์ HTML ขั้นต่ำในแพ็กเกจส่วนขยายที่โหลดตรรกะของ JavaScript ของเอกสารนอกหน้าจอ
- รวม
offscreen.js
ในแพ็กเกจส่วนขยาย ทำหน้าที่เป็นพร็อกซีระหว่างเว็บไซต์สาธารณะที่สร้างในขั้นตอนที่ 1 กับส่วนขยาย - ตั้งค่าเอกสารนอกหน้าจอจาก Service Worker background.js
{ "name": "signInWithPopup Demo", "manifest_version" 3, "background": { "service_worker": "background.js" }, "permissions": [ "offscreen" ] }
<!DOCTYPE html> <script src="./offscreen.js"></script>
// This URL must point to the public site const _URL = 'https://example.com/signInWithPopupExample'; const iframe = document.createElement('iframe'); iframe.src = _URL; document.documentElement.appendChild(iframe); chrome.runtime.onMessage.addListener(handleChromeMessages); function handleChromeMessages(message, sender, sendResponse) { // Extensions may have an number of other reasons to send messages, so you // should filter out any that are not meant for the offscreen document. if (message.target !== 'offscreen') { return false; } function handleIframeMessage({data}) { try { if (data.startsWith('!_{')) { // Other parts of the Firebase library send messages using postMessage. // You don't care about them in this context, so return early. return; } data = JSON.parse(data); self.removeEventListener('message', handleIframeMessage); sendResponse(data); } catch (e) { console.log(`json parse failed - ${e.message}`); } } globalThis.addEventListener('message', handleIframeMessage, false); // Initialize the authentication flow in the iframed document. You must set the // second argument (targetOrigin) of the message in order for it to be successfully // delivered. iframe.contentWindow.postMessage({"initAuth": true}, new URL(_URL).origin); return true; }
const OFFSCREEN_DOCUMENT_PATH = '/offscreen.html'; // A global promise to avoid concurrency issues let creatingOffscreenDocument; // Chrome only allows for a single offscreenDocument. This is a helper function // that returns a boolean indicating if a document is already active. async function hasDocument() { // Check all windows controlled by the service worker to see if one // of them is the offscreen document with the given path const matchedClients = await clients.matchAll(); return matchedClients.some( (c) => c.url === chrome.runtime.getURL(OFFSCREEN_DOCUMENT_PATH) ); } async function setupOffscreenDocument(path) { // If we do not have a document, we are already setup and can skip if (!(await hasDocument())) { // create offscreen document if (creating) { await creating; } else { creating = chrome.offscreen.createDocument({ url: path, reasons: [ chrome.offscreen.Reason.DOM_SCRAPING ], justification: 'authentication' }); await creating; creating = null; } } } async function closeOffscreenDocument() { if (!(await hasDocument())) { return; } await chrome.offscreen.closeDocument(); } function getAuth() { return new Promise(async (resolve, reject) => { const auth = await chrome.runtime.sendMessage({ type: 'firebase-auth', target: 'offscreen' }); auth?.name !== 'FirebaseError' ? resolve(auth) : reject(auth); }) } async function firebaseAuth() { await setupOffscreenDocument(OFFSCREEN_DOCUMENT_PATH); const auth = await getAuth() .then((auth) => { console.log('User Authenticated', auth); return auth; }) .catch(err => { if (err.code === 'auth/operation-not-allowed') { console.error('You must enable an OAuth provider in the Firebase' + ' console in order to use signInWithPopup. This sample' + ' uses Google by default.'); } else { console.error(err); return err; } }) .finally(closeOffscreenDocument) return auth; }
ตอนนี้ เมื่อเรียกใช้ firebaseAuth()
ภายใน Service Worker โปรแกรมจะสร้างเอกสารนอกหน้าจอและโหลดเว็บไซต์ใน iframe iframe ดังกล่าวจะประมวลผลในเบื้องหลังและ Firebase จะผ่านขั้นตอนการตรวจสอบสิทธิ์มาตรฐาน เมื่อแก้ไขหรือปฏิเสธแล้ว ออบเจ็กต์การตรวจสอบสิทธิ์จะส่งผ่านพร็อกซีจาก iframe ไปยัง Service Worker โดยใช้เอกสารนอกหน้าจอ