В этом документе показано, как использовать Firebase Authentication для входа пользователей в расширение Chrome, использующее Manifest V3 .
Firebase Authentication предоставляет несколько методов аутентификации для входа пользователей из расширения Chrome, некоторые из которых требуют больше усилий для разработки, чем другие.
Чтобы использовать следующие методы в расширении Chrome Manifest V3, вам нужно только импортировать их из firebase/auth/web-extension
:
- Войдите в систему, используя адрес электронной почты и пароль (
createUserWithEmailAndPassword
иsignInWithEmailAndPassword
). - Войдите в систему, используя ссылку электронной почты (
sendSignInLinkToEmail
,isSignInWithEmailLink
иsignInWithEmailLink
). - Войдите анонимно (
signInAnonymously
). - Войдите в систему с помощью специальной системы аутентификации (
signInWithCustomToken
). - Обработайте вход поставщика независимо, а затем используйте
signInWithCredential
Следующие методы входа также поддерживаются, но требуют некоторых дополнительных действий:
- Войдите в систему с помощью всплывающего окна (
signInWithPopup
,linkWithPopup
иreauthenticateWithPopup
). - Войдите в систему, перенаправив на страницу входа (
signInWithRedirect
,linkWithRedirect
иreauthenticateWithRedirect
). - Войдите по номеру телефона с помощью reCAPTCHA
- Многофакторная аутентификация по SMS с reCAPTCHA
- reCAPTCHA Защита предприятия
Чтобы использовать эти методы в расширении Chrome Manifest V3, необходимо использовать Offscreen Documents .
Используйте точку входа firebase/auth/web-extension.
Импорт из firebase/auth/web-extension
делает вход пользователей из расширения Chrome похожим на веб-приложение.
firebase/auth/web-extension поддерживается только в версиях Web SDK v10.8.0 и выше.
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth/web-extension'; const auth = getAuth(); signInWithEmailAndPassword(auth, email, password) .then((userCredential) => { // Signed in const user = userCredential.user; // ... }) .catch((error) => { const errorCode = error.code; const errorMessage = error.message; });
Используйте закадровые документы
Некоторые методы аутентификации, такие как signInWithPopup
, linkWithPopup
и reauthenticateWithPopup
, несовместимы напрямую с расширениями Chrome, поскольку они требуют загрузки кода из-за пределов пакета расширения. Начиная с Манифеста V3, это не разрешено и будет заблокировано платформой расширений. Чтобы обойти эту проблему, вы можете загрузить этот код в iframe, используя закадровый документ . В закадровом документе реализуйте обычный процесс аутентификации и проксируйте результат из закадрового документа обратно в расширение.
В этом руководстве в качестве примера используется signInWithPopup
, но та же концепция применима и к другим методам аутентификации.
Прежде чем начать
Этот метод требует, чтобы вы создали веб-страницу, доступную в Интернете, которую вы будете загружать в iframe. Для этого подойдет любой хостинг, включая Firebase Hosting . Создайте сайт со следующим содержанием:
<!DOCTYPE html> <html> <head> <title>signInWithPopup</title> <script src="signInWithPopup.js"></script> </head> <body><h1>signInWithPopup</h1></body> </html>
Федеративный вход
Если вы используете федеративный вход, например, с помощью Google, Apple, SAML или OIDC, вам необходимо добавить свой идентификатор расширения Chrome в список авторизованных доменов:
- Откройте свой проект в консоли Firebase .
- В разделе Аутентификация откройте страницу Настройки .
- Добавьте URI, подобный следующему, в список авторизованных доменов:
chrome-extension://CHROME_EXTENSION_ID
В файле манифеста вашего расширения Chrome обязательно добавьте следующие URL-адреса в список разрешений content_security_policy
:
-
https://apis.google.com
-
https://www.gstatic.com
-
https://www.googleapis.com
-
https://securetoken.googleapis.com
Реализация аутентификации
В вашем HTML-документе SignInWithPopup.js — это код JavaScript, который обрабатывает аутентификацию. Существует два разных способа реализации метода, который напрямую поддерживается в расширении:
- Используйте
firebase/auth
вместоfirebase/auth/web-extension
. Точка входаweb-extension
предназначена для кода, выполняющегося внутри расширения. Хотя этот код в конечном итоге выполняется в расширении (в iframe, в вашем закадровом документе), контекст, в котором он выполняется, является стандартным контекстом web. - Оберните логику аутентификации в прослушиватель
postMessage
, чтобы проксировать запрос и ответ аутентификации.
import { signInWithPopup, GoogleAuthProvider, getAuth } from'firebase/auth'; import { initializeApp } from 'firebase/app'; import firebaseConfig from './firebaseConfig.js' const app = initializeApp(firebaseConfig); const auth = getAuth(); // This code runs inside of an iframe in the extension's offscreen document. // This gives you a reference to the parent frame, i.e. the offscreen document. // You will need this to assign the targetOrigin for postMessage. const PARENT_FRAME = document.location.ancestorOrigins[0]; // This demo uses the Google auth provider, but any supported provider works. // Make sure that you enable any provider you want to use in the Firebase Console. // https://console.firebase.google.com/project/_/authentication/providers const PROVIDER = new GoogleAuthProvider(); function sendResponse(result) { globalThis.parent.self.postMessage(JSON.stringify(result), PARENT_FRAME); } globalThis.addEventListener('message', function({data}) { if (data.initAuth) { // Opens the Google sign-in page in a popup, inside of an iframe in the // extension's offscreen document. // To centralize logic, all respones are forwarded to the parent frame, // which goes on to forward them to the extension's service worker. signInWithPopup(auth, PROVIDER) .then(sendResponse) .catch(sendResponse) } });
Создайте свое расширение Chrome
После того, как ваш веб-сайт заработает, вы сможете использовать его в расширении Chrome.
- Добавьте разрешение
offscreen
в файл манифеста.json: - Создайте сам закадровый документ. Это минимальный HTML-файл внутри вашего пакета расширения, который загружает логику JavaScript вашего закадрового документа:
- Включите
offscreen.js
в свой пакет расширения. Он действует как прокси-сервер между общедоступным веб-сайтом, настроенным на шаге 1, и вашим расширением. - Настройте закадровый документ с помощью работника службы background.js.
{ "name": "signInWithPopup Demo", "manifest_version" 3, "background": { "service_worker": "background.js" }, "permissions": [ "offscreen" ] }
<!DOCTYPE html> <script src="./offscreen.js"></script>
// This URL must point to the public site const _URL = 'https://example.com/signInWithPopupExample'; const iframe = document.createElement('iframe'); iframe.src = _URL; document.documentElement.appendChild(iframe); chrome.runtime.onMessage.addListener(handleChromeMessages); function handleChromeMessages(message, sender, sendResponse) { // Extensions may have an number of other reasons to send messages, so you // should filter out any that are not meant for the offscreen document. if (message.target !== 'offscreen') { return false; } function handleIframeMessage({data}) { try { if (data.startsWith('!_{')) { // Other parts of the Firebase library send messages using postMessage. // You don't care about them in this context, so return early. return; } data = JSON.parse(data); self.removeEventListener('message', handleIframeMessage); sendResponse(data); } catch (e) { console.log(`json parse failed - ${e.message}`); } } globalThis.addEventListener('message', handleIframeMessage, false); // Initialize the authentication flow in the iframed document. You must set the // second argument (targetOrigin) of the message in order for it to be successfully // delivered. iframe.contentWindow.postMessage({"initAuth": true}, new URL(_URL).origin); return true; }
const OFFSCREEN_DOCUMENT_PATH = '/offscreen.html'; // A global promise to avoid concurrency issues let creatingOffscreenDocument; // Chrome only allows for a single offscreenDocument. This is a helper function // that returns a boolean indicating if a document is already active. async function hasDocument() { // Check all windows controlled by the service worker to see if one // of them is the offscreen document with the given path const matchedClients = await clients.matchAll(); return matchedClients.some( (c) => c.url === chrome.runtime.getURL(OFFSCREEN_DOCUMENT_PATH) ); } async function setupOffscreenDocument(path) { // If we do not have a document, we are already setup and can skip if (!(await hasDocument())) { // create offscreen document if (creating) { await creating; } else { creating = chrome.offscreen.createDocument({ url: path, reasons: [ chrome.offscreen.Reason.DOM_SCRAPING ], justification: 'authentication' }); await creating; creating = null; } } } async function closeOffscreenDocument() { if (!(await hasDocument())) { return; } await chrome.offscreen.closeDocument(); } function getAuth() { return new Promise(async (resolve, reject) => { const auth = await chrome.runtime.sendMessage({ type: 'firebase-auth', target: 'offscreen' }); auth?.name !== 'FirebaseError' ? resolve(auth) : reject(auth); }) } async function firebaseAuth() { await setupOffscreenDocument(OFFSCREEN_DOCUMENT_PATH); const auth = await getAuth() .then((auth) => { console.log('User Authenticated', auth); return auth; }) .catch(err => { if (err.code === 'auth/operation-not-allowed') { console.error('You must enable an OAuth provider in the Firebase' + ' console in order to use signInWithPopup. This sample' + ' uses Google by default.'); } else { console.error(err); return err; } }) .finally(closeOffscreenDocument) return auth; }
Теперь, когда вы вызываете firebaseAuth()
в своем сервисном работнике, он создаст закадровый документ и загрузит сайт в iframe. Этот iframe будет обрабатываться в фоновом режиме, а Firebase пройдет стандартный процесс аутентификации. Как только проблема будет решена или отклонена, объект аутентификации будет передан из вашего iframe в сервис-воркер с использованием закадрового документа.