Firebase를 사용한 Chrome 확장 프로그램의 Google 인증

Google의 공식 가이드에는 몇 가지 중요한 단계가 누락되어 있어 이 가이드를 작성하고 있습니다. 아래 링크를 참조하세요.

Chrome 확장 프로그램에서 Firebase로 인증

이 방법은 모든 운영 체제에서 작동합니다. 이 가이드에서는 Mac OS를 사용합니다

전제 조건

• Google 크롬 브라우저
• 구글 계정
• Chrome 웹 스토어 개발자 계정(1회 수수료 5달러)
• Node.js 및 npm 설치

1단계: 프로젝트 구조 생성

a) 프로젝트를 위한 새 디렉터리를 만듭니다.

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

b) 두 개의 하위 디렉터리를 만듭니다.

mkdir chrome-extension
mkdir firebase-project

2단계: Firebase 프로젝트 설정

a) Firebase 콘솔로 이동합니다.
b) "프로젝트 추가"를 클릭하고 단계에 따라 새 프로젝트를 만듭니다.
c) 생성이 완료되면 "웹"을 클릭하여 프로젝트에 웹 앱을 추가하세요.
d) 닉네임(예: "Chrome Extension Auth")으로 앱을 등록하세요.
e) Firebase 구성 객체를 복사합니다. 나중에 필요합니다.

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

f) firebase-project 디렉토리로 이동
CD Firebase 프로젝트
g) 새 npm 프로젝트 초기화
npm 초기화 -y
h) Firebase 설치:
npm Firebase 설치
i) firebase-project/index.html
에 index.html 파일을 생성합니다.

 
  <title>Firebase Auth for Chrome Extension</title>
 
 
  <h1 id="Firebase-Auth-for-Chrome-Extension">Firebase Auth for Chrome Extension</h1>
  <script type="module" src="signInWithPopup.js"></script>
 

j) firebase-project/signInWithPopup.js
에 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) Firebase 프로젝트 배포

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

배포 후 제공된 호스팅 URL을 기록해 두세요. Chrome 확장 프로그램에 필요합니다.

3단계: Chrome 확장 프로그램 설정

a) chrome-extension 디렉토리로 이동
CD ../크롬 확장

b) chrome-extension/manifest.json
에 매니페스트.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-----"
}
</all_urls>

c) chrome-extension/popup.html
에 popup.html 파일을 만듭니다.

    <title>Firebase Auth Extension</title>


    <h1 id="Firebase-Auth-Extension">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>

d) chrome-extension/popup.js
에 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) chrome-extension/Background.js
에 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) chrome-extension/offscreen.html
에서 offscreen.html 파일을 만듭니다.

    <title>Offscreen Document</title>


    <script src="offscreen.js"></script>

g) _chrome-extension/offscreen.js에 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
    }
});

4단계: Firebase 인증 구성

a) Firebase 콘솔에서 인증 > 로그인 방법.
b) Google을 로그인 공급자로 활성화합니다.
c) 승인된 도메인 목록에 Chrome 확장 프로그램의 ID를 추가하세요.
형식은 chrome-extension://YOUR_EXTENSION_ID
입니다. 압축이 풀린 확장 프로그램으로 로드한 후 Chrome의 확장 프로그램 관리 페이지에서 확장 프로그램 ID를 찾을 수 있습니다.

5단계: 확장 로드 및 테스트

a) Google Chrome을 열고 chrome://extensions/로 이동합니다.
b) 오른쪽 상단에서 '개발자 모드'를 활성화하세요.
c) "압축해제된 항목 로드"를 클릭하고 chrome-extension 디렉토리를 선택하세요.
d) Chrome 툴바에서 확장 프로그램 아이콘을 클릭하여 팝업을 엽니다.
e) "로그인" 버튼을 클릭하고 인증 흐름을 테스트하세요.

문제 해결

CORS 문제가 발생하면 background.js와 offscreen.js 모두에서 Firebase 호스팅 URL이 올바르게 설정되었는지 확인하세요.

Chrome 확장 프로그램의 ID가 Firebase의 승인된 도메인에 올바르게 추가되었는지 확인하세요.

팝업, 백그라운드 스크립트, 오프스크린 문서의 콘솔 로그에서 오류 메시지를 확인하세요.

결론

이제 오프스크린 문서와 함께 Firebase 인증을 사용하여 로그인 프로세스를 처리하는 Chrome 확장 프로그램이 생겼습니다. 이 설정을 사용하면 민감한 Firebase 구성 세부정보를 확장 코드에 직접 노출하지 않고도 보안 인증이 가능합니다.

확장 프로그램을 게시하기 전에 자리 표시자 값(예: YOUR_EXTENSION_ID, YOUR-CLIENT-ID, YOUR_PUBLIC_KEY 및 your-project-id)을 실제 값으로 바꾸는 것을 잊지 마세요.

위 내용은 Firebase를 사용한 Chrome 확장 프로그램의 Google 인증의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!