Authentification Google dans une extension Chrome avec Firebase-js tutoriel-php.cn

Google Authentication in a Chrome Extension with Firebase

Nous rédigeons ce guide car il manque quelques étapes importantes dans le guide officiel de Google, dont nous avons lié le lien ci-dessous :

Authentifier avec Firebase dans une extension Chrome

Cela fonctionnera sur n’importe quel système d’exploitation. Pour les besoins de ce guide, nous utiliserons Mac OS

Conditions préalables

Navigateur Google Chrome
Un compte Google
Un compte développeur Chrome Web Store (frais uniques de 5 $)
Node.js et npm installés

Étape 1 : Créer la structure du projet

a) Créez un nouveau répertoire pour votre projet :

mkdir firebase-chrome-auth
cd firebase-chrome-auth

Copier après la connexion

b) Créez deux sous-répertoires :

mkdir chrome-extension
mkdir firebase-project

Copier après la connexion

Étape 2 : Configurer le projet Firebase

a) Accédez à la console Firebase.
b) Cliquez sur "Ajouter un projet" et suivez les étapes pour créer un nouveau projet.
c) Une fois créée, cliquez sur "Web" pour ajouter une web app à votre projet.
d) Enregistrez votre application avec un pseudo (par exemple, "Chrome Extension Auth").
e) Copiez l'objet de configuration Firebase. Vous en aurez besoin plus tard.

const firebaseConfig = {
  apiKey: "example",
  authDomain: "example.firebaseapp.com",
  projectId: "example",
  storageBucket: "example",
  messagingSenderId: "example",
  appId: "example"
};

Copier après la connexion

f) Accédez au répertoire du projet Firebase
cd projet Firebase
g) Initialiser un nouveau projet npm
npm init -y
h) Installer Firebase :
npm installer Firebase
i) Créez un fichier index.html dans 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>

Copier après la connexion

j) Créez un fichier signInWithPopup.js dans 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);
  }
});

Copier après la connexion

k) Déployer le projet Firebase

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

Copier après la connexion

Notez l'URL d'hébergement fournie après le déploiement. Vous en aurez besoin pour l'extension Chrome.

Étape 3 : Configurer l'extension Chrome

a) Accédez au répertoire de l'extension Chrome
cd ../extension-chrome

b) Créez un fichier manifest.json dans 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-----"
}

Copier après la connexion

c) Créez un fichier popup.html dans 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>

Copier après la connexion

d) Créez un fichier popup.js dans 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);
        });
    });
});

Copier après la connexion

e) Créez un fichier background.js dans 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;
    }
});

Copier après la connexion

f) Créez un fichier offscreen.html dans chrome-extension/offscreen.html

<!DOCTYPE html>
<html>
<head>
    <title>Offscreen Document</title>
</head>
<body>
    <script src="offscreen.js"></script>
</body>
</html>

Copier après la connexion

g) Créez un fichier offscreen.js dans _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
    }
});

Copier après la connexion

Étape 4 : Configurer l'authentification Firebase

a) Dans la console Firebase, accédez à Authentification > Méthode de connexion.
b) Activez Google en tant que fournisseur de connexion.
c) Ajoutez l'identifiant de votre extension Chrome à la liste des domaines autorisés :
Le format est : chrome-extension://YOUR_EXTENSION_ID
Vous pouvez trouver votre ID d'extension sur la page de gestion des extensions de Chrome après l'avoir chargé en tant qu'extension décompressée.

Étape 5 : charger et tester l'extension

a) Ouvrez Google Chrome et accédez à chrome://extensions/.
b) Activez le « Mode développeur » dans le coin supérieur droit.
c) Cliquez sur "Charger décompressé" et sélectionnez votre répertoire d'extension Chrome.
d) Cliquez sur l'icône d'extension dans la barre d'outils de Chrome pour ouvrir la fenêtre contextuelle.
e) Cliquez sur le bouton « Connexion » et testez le flux d'authentification.

Dépannage

Si vous rencontrez des problèmes CORS, assurez-vous que votre URL d'hébergement Firebase est correctement définie dans background.js et offscreen.js.

Assurez-vous que l'ID de votre extension Chrome est correctement ajouté aux domaines autorisés de Firebase.

Vérifiez les journaux de la console dans la fenêtre contextuelle, le script d'arrière-plan et le document hors écran pour détecter tout message d'erreur.

Conclusion

Vous disposez désormais d'une extension Chrome qui utilise l'authentification Firebase avec un document hors écran pour gérer le processus de connexion. Cette configuration permet une authentification sécurisée sans exposer les détails de configuration sensibles de Firebase directement dans le code d'extension.

N'oubliez pas de remplacer les valeurs d'espace réservé (comme YOUR_EXTENSION_ID, YOUR-CLIENT-ID, YOUR_PUBLIC_KEY et your-project-id) par vos valeurs réelles avant de publier votre extension.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!