Bu dokümanda, kullanıcıların Manifest V3 kullanan bir Chrome uzantısında oturum açmasını sağlamak için Firebase Authentication'ın nasıl kullanılacağı gösterilmektedir.
Firebase Authentication, kullanıcıların bir Chrome uzantısından oturum açmasını sağlamak için birden çok kimlik doğrulama yöntemi sunar. Bazı yöntemler, diğerlerine kıyasla daha fazla geliştirme çalışması gerektirir.
Manifest V3 Chrome uzantılarında aşağıdaki yöntemleri kullanmak için uzantıları firebase/auth/web-extension
kaynağından içe aktarmanız yeterlidir:
- E-posta ve şifre ile oturum açın (
createUserWithEmailAndPassword
vesignInWithEmailAndPassword
) - E-posta bağlantısıyla oturum aç (
sendSignInLinkToEmail
,isSignInWithEmailLink
vesignInWithEmailLink
) - Anonim olarak oturum aç (
signInAnonymously
) - Özel kimlik doğrulama sistemiyle (
signInWithCustomToken
) oturum açın - Sağlayıcı oturum açma işlemini bağımsız olarak işleyip
signInWithCredential
kullanın
Aşağıdaki oturum açma yöntemleri de desteklenir ancak bazı ek işlemler gerekir:
- Pop-up pencereyle oturum açın (
signInWithPopup
,linkWithPopup
vereauthenticateWithPopup
) - Oturum açma sayfasına (
signInWithRedirect
,linkWithRedirect
vereauthenticateWithRedirect
) yönlendirerek oturum açın - reCAPTCHA üzerinden Telefon Numarasıyla oturum açma
- reCAPTCHA ile SMS çok öğeli kimlik doğrulaması
- reCAPTCHA Enterprise koruması
Bu yöntemleri Manifest V3 Chrome uzantısında kullanmak için Ekran Dışı Dokümanlar'ı kullanmanız gerekir.
firebase/auth/web-extension giriş noktasını kullanın
firebase/auth/web-extension
ürününden içe aktarma, kullanıcıların Chrome uzantısından
oturum açmasını bir web uygulamasına benzer hale getirir.
firebase/auth/web-extension yalnızca v10.8.0 ve üzeri Web SDK sürümlerinde desteklenir.
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; });
Ekran Dışı Dokümanları Kullanma
signInWithPopup
, linkWithPopup
ve reauthenticateWithPopup
gibi bazı kimlik doğrulama yöntemleri, kodun uzantı paketinin dışından yüklenmesi gerektiğinden Chrome uzantılarıyla doğrudan uyumlu değildir.
Manifest V3'ten itibaren buna izin verilmez ve uzantı platformu tarafından engellenir. Bu sorunu aşmak için ekran dışı bir doküman kullanarak bu kodu bir iframe içine yükleyebilirsiniz.
Ekran dışındaki dokümanda normal kimlik doğrulama akışını uygulayın ve ekran dışı dokümandan elde edilen sonucu uzantıya geri temsil edin.
Bu kılavuzda signInWithPopup
örnek olarak kullanılmıştır. Ancak aynı kavram diğer kimlik doğrulama yöntemleri için de geçerlidir.
Başlamadan önce
Bu teknik, iframe içinde yükleyeceğiniz, web'de bulunan bir web sayfası ayarlamanızı gerektirir. Firebase Hosting de dahil olmak üzere tüm barındırıcılar bu işlem için çalışır. Aşağıdaki içeriğe sahip bir web sitesi oluşturun:
<!DOCTYPE html> <html> <head> <title>signInWithPopup</title> <script src="signInWithPopup.js"></script> </head> <body><h1>signInWithPopup</h1></body> </html>
Birleşik oturum açma
Google, Apple, SAML veya OIDC ile oturum açma gibi birleşik oturum açma özelliğini kullanıyorsanız Chrome uzantı kimliğinizi yetkili alanlar listesine eklemeniz gerekir:
- Firebase konsolunda projenizi açın.
- Kimlik Doğrulama bölümünde Ayarlar sayfasını açın.
- Yetkilendirilen Alanlar listesine aşağıdakine benzer bir URI ekleyin:
chrome-extension://CHROME_EXTENSION_ID
Chrome uzantınızın manifest dosyasında aşağıdaki URL'leri content_security_policy
izin verilenler listesine eklediğinizden emin olun:
https://apis.google.com
https://www.gstatic.com
https://www.googleapis.com
https://securetoken.googleapis.com
Kimlik doğrulamayı uygulama
HTML belgenizde, signInWithPopup.js, kimlik doğrulama işlemini yapan JavaScript kodudur. Uzantıda doğrudan desteklenen bir yöntemi uygulamanın iki farklı yolu vardır:
firebase/auth/web-extension
yerinefirebase/auth
kullanın.web-extension
giriş noktası, uzantı içinde çalışan kod içindir. Bu kod sonunda uzantıda (bir iframe'de, ekran dışı dokümanınızda) çalışırken, çalıştırıldığı içerik standart web'dir.- Kimlik doğrulama isteğine ve yanıtına proxy uygulamak için kimlik doğrulama mantığını bir
postMessage
işleyiciye sarmalayın.
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 Uzantınızı oluşturun
Web siteniz yayınlanmaya başladıktan sonra siteyi Chrome Uzantınızda kullanabilirsiniz.
- Manifest.json dosyanıza
offscreen
iznini ekleyin: - Ekran dışındaki dokümanın kendisini oluşturun. Bu, ekran dışı belge JavaScript'inizin mantığını yükleyen, uzantı paketinizin içinde bulunan minimal bir HTML dosyasıdır:
- Uzantı paketinize
offscreen.js
öğesini dahil edin. 1. adımda ayarlanan herkese açık web sitesi ile uzantınız arasında proxy görevi görür. - Arka plan.js hizmet çalışanınızdan ekran dışı dokümanı ayarlayın.
{ "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; }
Artık hizmet çalışanınızda firebaseAuth()
çağrısı yaptığınızda ekran dışı doküman oluşturulur ve siteyi iframe içinde yükler. Bu iframe arka planda işlenir ve Firebase, standart kimlik doğrulama akışından geçer. Kimlik doğrulama nesnesi çözümlendikten veya reddedildiğinde, ekran dışı belge kullanılarak iframe'inizden hizmet çalışanınıza proxy gönderilir.