Firebase를 사용한 Chrome 확장 프로그램의 Google 인증-JS 튜토리얼-php.cn

Google Authentication in a Chrome Extension with Firebase

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 파일을 생성합니다.

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

로그인 후 복사

c) chrome-extension/popup.html
에 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) 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 파일을 만듭니다.

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

로그인 후 복사

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) "로그인" 버튼을 클릭하고 인증 흐름을 테스트하세요.