Pengesahan Google dalam Sambungan Chrome dengan Firebase-tutorial js-php.cn

Google Authentication in a Chrome Extension with 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

Salin selepas log masuk

b) Cipta dua subdirektori:

mkdir chrome-extension
mkdir firebase-project

Salin selepas log masuk

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"
};

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

k) Gunakan projek Firebase

npm install -g firebase-tools
firebase login
firebase init hosting
firebase deploy

Salin selepas log masuk

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-----"
}

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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

Salin selepas log masuk

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!