Pengesahan Google dalam Sambungan Chrome dengan Firebase
Kami menulis panduan ini kerana panduan rasmi oleh Google kehilangan beberapa langkah penting, kami telah memautkan di bawah:
Sahkan dengan Firebase dalam sambungan Chrome
Ini akan berfungsi pada mana-mana sistem pengendalian. Untuk tujuan panduan ini, kami akan menggunakan Mac OS
Prasyarat
- Pelayar Google Chrome
- Akaun Google
- Akaun pembangun kedai web Chrome ($5 bayaran sekali)
- Node.js dan npm dipasang
Langkah 1: Buat Struktur Projek
a) Cipta direktori baharu untuk projek anda:
mkdir firebase-chrome-auth cd firebase-chrome-auth
b) Cipta dua subdirektori:
mkdir chrome-extension mkdir firebase-project
Langkah 2: Sediakan Projek Firebase
a) Pergi ke Firebase Console.
b) Klik "Tambah projek" dan ikut langkah untuk mencipta projek baharu.
c) Setelah dibuat, klik pada "Web" untuk menambahkan apl web pada projek anda.
d) Daftarkan apl anda dengan nama panggilan (cth., "Pengesahan Sambungan Chrome").
e) Salin objek konfigurasi Firebase. Anda perlukan ini nanti.
const firebaseConfig = {
apiKey: "example",
authDomain: "example.firebaseapp.com",
projectId: "example",
storageBucket: "example",
messagingSenderId: "example",
appId: "example"
};
f) Navigasi ke direktori projek firebase
cd firebase-project
g) Mulakan projek npm baharu
npm init -y
h) Pasang Firebase:
npm pasang firebase
i) Cipta fail index.html dalam firebase-project/index.html
<!DOCTYPE html> <html> <head> <title>Firebase Auth for Chrome Extension</title> </head> <body> <h1>Firebase Auth for Chrome Extension</h1> <script type="module" src="signInWithPopup.js"></script> </body> </html>
j) Cipta fail signInWithPopup.js dalam firebase-project/signInWithPopup.js
import { initializeApp } from 'firebase/app';
import { getAuth, signInWithPopup, GoogleAuthProvider } from 'firebase/auth';
const firebaseConfig = {
// Your web app's Firebase configuration
// Replace with the config you copied from Firebase Console
};
const app = initializeApp(firebaseConfig);
const auth = getAuth();
// This gives you a reference to the parent frame, i.e. the offscreen document.
const PARENT_FRAME = document.location.ancestorOrigins[0];
const PROVIDER = new GoogleAuthProvider();
function sendResponse(result) {
window.parent.postMessage(JSON.stringify(result), PARENT_FRAME);
}
window.addEventListener('message', function({data}) {
if (data.initAuth) {
signInWithPopup(auth, PROVIDER)
.then(sendResponse)
.catch(sendResponse);
}
});
k) Gunakan projek Firebase
npm install -g firebase-tools firebase login firebase init hosting firebase deploy
Perhatikan URL pengehosan yang disediakan selepas penggunaan. Anda memerlukan ini untuk sambungan Chrome.
Langkah 3: Sediakan Sambungan Chrome
a) Navigasi ke direktori sambungan krom
cd ../chrome-extension
b) Cipta fail manifest.json dalam chrome-extension/manifest.json
{
"manifest_version": 3,
"name": "Firebase Auth Extension",
"version": "1.0",
"description": "Chrome extension with Firebase Authentication",
"permissions": [
"identity",
"storage",
"offscreen"
],
"host_permissions": [
"https://*.firebaseapp.com/*"
],
"background": {
"service_worker": "background.js",
"type": "module"
},
"action": {
"default_popup": "popup.html"
},
"web_accessible_resources": [
{
"resources": ["offscreen.html"],
"matches": ["<all_urls>"]
}
],
"oauth2": {
"client_id": "YOUR-ID.apps.googleusercontent.com",
"scopes": [
"openid",
"email",
"profile"
]
},
"key": "-----BEGIN PUBLIC KEY-----\nYOURPUBLICKEY\n-----END PUBLIC KEY-----"
}
c) Cipta fail popup.html dalam chrome-extension/popup.html
<!DOCTYPE html>
<html>
<head>
<title>Firebase Auth Extension</title>
</head>
<body>
<h1>Firebase Auth Extension</h1>
<div id="userInfo"></div>
<button id="signInButton">Sign In</button>
<button id="signOutButton" style="display:none;">Sign Out</button>
<script src="popup.js"></script>
</body>
</html>
d) Cipta fail popup.js dalam chrome-extension/popup.js
document.addEventListener('DOMContentLoaded', function() {
const signInButton = document.getElementById('signInButton');
const signOutButton = document.getElementById('signOutButton');
const userInfo = document.getElementById('userInfo');
function updateUI(user) {
if (user) {
userInfo.textContent = `Signed in as: ${user.email}`;
signInButton.style.display = 'none';
signOutButton.style.display = 'block';
} else {
userInfo.textContent = 'Not signed in';
signInButton.style.display = 'block';
signOutButton.style.display = 'none';
}
}
chrome.storage.local.get(['user'], function(result) {
updateUI(result.user);
});
signInButton.addEventListener('click', function() {
chrome.runtime.sendMessage({action: 'signIn'}, function(response) {
if (response.user) {
updateUI(response.user);
}
});
});
signOutButton.addEventListener('click', function() {
chrome.runtime.sendMessage({action: 'signOut'}, function() {
updateUI(null);
});
});
});
e) Cipta fail background.js dalam chrome-extension/background.js
const OFFSCREEN_DOCUMENT_PATH = 'offscreen.html';
const FIREBASE_HOSTING_URL = 'https://your-project-id.web.app'; // Replace with your Firebase hosting URL
let creatingOffscreenDocument;
async function hasOffscreenDocument() {
const matchedClients = await clients.matchAll();
return matchedClients.some((client) => client.url.endsWith(OFFSCREEN_DOCUMENT_PATH));
}
async function setupOffscreenDocument() {
if (await hasOffscreenDocument()) return;
if (creatingOffscreenDocument) {
await creatingOffscreenDocument;
} else {
creatingOffscreenDocument = chrome.offscreen.createDocument({
url: OFFSCREEN_DOCUMENT_PATH,
reasons: [chrome.offscreen.Reason.DOM_SCRAPING],
justification: 'Firebase Authentication'
});
await creatingOffscreenDocument;
creatingOffscreenDocument = null;
}
}
async function getAuthFromOffscreen() {
await setupOffscreenDocument();
return new Promise((resolve, reject) => {
chrome.runtime.sendMessage({action: 'getAuth', target: 'offscreen'}, (response) => {
if (chrome.runtime.lastError) {
reject(chrome.runtime.lastError);
} else {
resolve(response);
}
});
});
}
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.action === 'signIn') {
getAuthFromOffscreen()
.then(user => {
chrome.storage.local.set({user: user}, () => {
sendResponse({user: user});
});
})
.catch(error => {
console.error('Authentication error:', error);
sendResponse({error: error.message});
});
return true; // Indicates we will send a response asynchronously
} else if (message.action === 'signOut') {
chrome.storage.local.remove('user', () => {
sendResponse();
});
return true;
}
});
f) Cipta fail offscreen.html dalam chrome-extension/offscreen.html
<!DOCTYPE html>
<html>
<head>
<title>Offscreen Document</title>
</head>
<body>
<script src="offscreen.js"></script>
</body>
</html>
g) Cipta fail offscreen.js dalam _chrome-extension/offscreen.js
_
const FIREBASE_HOSTING_URL = 'https://your-project-id.web.app'; // Replace with your Firebase hosting URL
const iframe = document.createElement('iframe');
iframe.src = FIREBASE_HOSTING_URL;
document.body.appendChild(iframe);
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
if (message.action === 'getAuth' && message.target === 'offscreen') {
function handleIframeMessage({data}) {
try {
const parsedData = JSON.parse(data);
window.removeEventListener('message', handleIframeMessage);
sendResponse(parsedData.user);
} catch (e) {
console.error('Error parsing iframe message:', e);
}
}
window.addEventListener('message', handleIframeMessage);
iframe.contentWindow.postMessage({initAuth: true}, FIREBASE_HOSTING_URL);
return true; // Indicates we will send a response asynchronously
}
});
Langkah 4: Konfigurasikan Pengesahan Firebase
a) Dalam Firebase Console, pergi ke Pengesahan > Kaedah log masuk.
b) Dayakan Google sebagai penyedia log masuk.
c) Tambahkan ID sambungan Chrome anda pada senarai domain yang dibenarkan:
Formatnya ialah: chrome-extension://YOUR_EXTENSION_ID
Anda boleh menemui ID sambungan anda dalam halaman pengurusan sambungan Chrome selepas memuatkannya sebagai sambungan yang tidak dibungkus.
Langkah 5: Muatkan dan Uji Sambungan
a) Buka Google Chrome dan pergi ke chrome://extensions/.
b) Dayakan "Mod pembangun" di penjuru kanan sebelah atas.
c) Klik "Muat dibongkar" dan pilih direktori sambungan krom anda.
d) Klik pada ikon sambungan dalam bar alat Chrome untuk membuka pop timbul.
e) Klik butang "Log Masuk" dan uji aliran pengesahan.
Menyelesaikan masalah
Jika anda menghadapi isu CORS, pastikan URL pengehosan Firebase anda ditetapkan dengan betul dalam kedua-dua background.js dan offscreen.js.
Pastikan ID sambungan Chrome anda ditambahkan dengan betul pada domain dibenarkan Firebase.
Semak log konsol dalam pop timbul, skrip latar belakang dan dokumen luar skrin untuk sebarang mesej ralat.
Kesimpulan
Anda kini mempunyai sambungan Chrome yang menggunakan Pengesahan Firebase dengan dokumen luar skrin untuk mengendalikan proses log masuk. Persediaan ini membolehkan pengesahan selamat tanpa mendedahkan butiran konfigurasi Firebase yang sensitif terus dalam kod sambungan.
Ingat untuk menggantikan nilai pemegang tempat (seperti YOUR_EXTENSION_ID, YOUR-CLIENT-ID, YOUR_PUBLIC_KEY dan your-project-id) dengan nilai sebenar anda sebelum menerbitkan sambungan anda.
Atas ialah kandungan terperinci Pengesahan Google dalam Sambungan Chrome dengan Firebase. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Ganti aksara rentetan dalam javascript
Mar 11, 2025 am 12:07 AM
Penjelasan terperinci mengenai kaedah penggantian rentetan javascript dan Soalan Lazim Artikel ini akan meneroka dua cara untuk menggantikan watak rentetan dalam JavaScript: Kod JavaScript dalaman dan HTML dalaman untuk laman web. Ganti rentetan di dalam kod JavaScript Cara yang paling langsung ialah menggunakan kaedah pengganti (): str = str.replace ("cari", "ganti"); Kaedah ini hanya menggantikan perlawanan pertama. Untuk menggantikan semua perlawanan, gunakan ungkapan biasa dan tambahkan bendera global g: str = str.replace (/fi
periksa jQuery jika tarikh sah
Mar 01, 2025 am 08:51 AM
Fungsi JavaScript mudah digunakan untuk memeriksa sama ada tarikh sah. fungsi isvaliddate (s) { var bits = s.split ('/'); var d = tarikh baru (bit [2] '/' bits [1] '/' bits [0]); kembali !! (d && (d.getmonth () 1) == bit [1] && d.getdate () == nombor (bit [0])); } // ujian var
jQuery mendapatkan padding/margin elemen
Mar 01, 2025 am 08:53 AM
Artikel ini membincangkan cara menggunakan jQuery untuk mendapatkan dan menetapkan margin dalaman dan nilai margin elemen DOM, terutama lokasi tertentu margin luar dan margin dalaman elemen. Walaupun ada kemungkinan untuk menetapkan margin dalaman dan luar elemen menggunakan CSS, nilai yang tepat boleh menjadi rumit. // Sediakan $ ("div.header"). css ("margin", "10px"); $ ("div.header"). css ("padding", "10px"); Anda mungkin menganggap kod ini
10 Tab Accordion JQuery
Mar 01, 2025 am 01:34 AM
Artikel ini meneroka sepuluh tab jQuery yang luar biasa dan akordion. Perbezaan utama antara tab dan akordion terletak pada bagaimana panel kandungan mereka dipaparkan dan tersembunyi. Mari kita menyelidiki sepuluh contoh ini. Artikel Berkaitan: 10 JQuery Tab Plugin
10 patut diperiksa plugin jQuery
Mar 01, 2025 am 01:29 AM
Temui sepuluh plugin jQuery yang luar biasa untuk meningkatkan dinamisme dan daya tarikan visual laman web anda! Koleksi ini menawarkan pelbagai fungsi, dari animasi imej ke galeri interaktif. Mari kita meneroka alat yang berkuasa ini: Posting Berkaitan: 1
HTTP Debugging dengan Node dan HTTP-Console
Mar 01, 2025 am 01:37 AM
HTTP-CONSOLE adalah modul nod yang memberi anda antara muka baris arahan untuk melaksanakan arahan HTTP. Ia bagus untuk menyahpepijat dan melihat apa yang sedang berlaku dengan permintaan HTTP anda, tanpa mengira sama ada mereka dibuat terhadap pelayan web, Serv Web
Tutorial Persediaan API Carian Google Custom
Mar 04, 2025 am 01:06 AM
Tutorial ini menunjukkan kepada anda bagaimana untuk mengintegrasikan API carian Google tersuai ke dalam blog atau laman web anda, menawarkan pengalaman carian yang lebih halus daripada fungsi carian tema WordPress standard. Ia menghairankan mudah! Anda akan dapat menyekat carian ke y
jQuery tambah bar scroll ke div
Mar 01, 2025 am 01:30 AM
Coretan kod jQuery berikut boleh digunakan untuk menambah bar skrol apabila kandungan div melebihi kawasan elemen kontena. (Tiada demonstrasi, sila salin terus ke Firebug) // d = dokumen // w = tetingkap // $ = jQuery var contentArea = $ (ini), Wintop = contentArea.scrollTop (), docheight = $ (d) .height (), winheight = $ (w) .height (), Divheight = $ ('#c
