"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "giriş", "hProperties": { "id": "giriş" } }, "depth": 2, "value": "Giriş" }, { "data": { "id": "logto-uygulaması-oluşturun", "hProperties": { "id": "logto-uygulaması-oluşturun" } }, "depth": 2, "value": "Logto uygulaması oluşturun" }, { "data": { "id": "chrome-uzantınızı-kurun", "hProperties": { "id": "chrome-uzantınızı-kurun" } }, "depth": 2, "value": "Chrome uzantınızı kurun" }, { "data": { "id": "logto-sdk-yükleyin", "hProperties": { "id": "logto-sdk-yükleyin" } }, "depth": 3, "value": "Logto SDK yükleyin" }, { "data": { "id": "manifestjson-dosyasını-güncelleyin", "hProperties": { "id": "manifestjson-dosyasını-güncelleyin" } }, "depth": 3, "value": "manifest.json dosyasını güncelleyin" }, { "data": { "id": "bir-arka-plan-komut-dosyası-servis-işçisi-kurun", "hProperties": { "id": "bir-arka-plan-komut-dosyası-servis-işçisi-kurun" } }, "depth": 3, "value": "Bir arka plan komut dosyası (servis işçisi) kurun" }, { "data": { "id": "logto-uygulama-ayarlarını-güncelleyin", "hProperties": { "id": "logto-uygulama-ayarlarını-güncelleyin" } }, "depth": 2, "value": "Logto uygulama ayarlarını güncelleyin" }, { "data": { "id": "açılır-penceresine-oturum-açma-ve-kapatma-düğmeleri-ekleyin", "hProperties": { "id": "açılır-penceresine-oturum-açma-ve-kapatma-düğmeleri-ekleyin" } }, "depth": 2, "value": "Açılır penceresine oturum açma ve kapatma düğmeleri ekleyin" }, { "data": { "id": "kontrol-noktası-kimlik-doğrulama-akışını-test-edin", "hProperties": { "id": "kontrol-noktası-kimlik-doğrulama-akışını-test-edin" } }, "depth": 2, "value": "Kontrol noktası: Kimlik doğrulama akışını test edin" }, { "data": { "id": "kimlik-doğrulama-durumunu-kontrol-edin", "hProperties": { "id": "kimlik-doğrulama-durumunu-kontrol-edin" } }, "depth": 2, "value": "Kimlik doğrulama durumunu kontrol edin" }, { "data": { "id": "diğer-hususlar", "hProperties": { "id": "diğer-hususlar" } }, "depth": 2, "value": "Diğer hususlar" }, { "data": { "id": "sonuç", "hProperties": { "id": "sonuç" } }, "depth": 2, "value": "Sonuç" }]; const readingTime = { "minutes": 4, "words": 1111, "text": "4 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", img: "img", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {Info, LogtoCloudButton, Note} = _components; if (!Info) _missingMdxReference("Info", true); if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); if (!Note) _missingMdxReference("Note", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Chrome uzantıları, Chrome tarayıcısının işlevselliğini genişletmenin harika bir yoludur. Popüler bir uzantınız olduğunda, ücretli özellikler sunarak para kazanmak isteyebilirsiniz. Bu amaçla kullanıcı kimlik doğrulaması gereklidir:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Kullanıcı tanımlama" }), ": Kişiselleştirilmiş özellikler sunmak için kullanıcının kim olduğunu bilmeniz gerekir."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Erişim kontrolü" }), ": Ücretli özelliklere kimin erişebileceğini kontrol etmeniz gerekir."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Abonelik yönetimi" }), ": Kullanıcılara abone olma ve aboneliklerini yönetme imkanı sağlamanız gerekir."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Öte yandan, Google hesap sistemine bağlı kalmak istemiyoruz, çünkü kullanıcılarınız başka hesapları kullanmayı tercih edebilir veya aynı kimlik sistemine entegre etmek istediğiniz birden fazla hizmetiniz olabilir." }), "\n", _jsx(_components.p, { children: "OpenID Connect (OIDC) kullanmanın kimlik doğrulaması için sağladığı faydaların kısa bir özeti:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Tedarikçi kilitlemesi yok" }), ": Kullanıcılar çeşitli yöntemlerle oturum açabilir, Google'a zorlanmaz."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Tek Oturum Açma (SSO)" }), ": Kullanıcılar bir kez oturum açabilir ve birden fazla hizmete veya uygulamaya erişebilir."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Standartlaştırılmış" }), ": OIDC, geniş çapta benimsenmiş ve desteklenen, aynı zamanda güvenli bir açık standarttır."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Bu eğitimde, kimlik altyapıları oluşturmak için Auth0 alternatifi olan ", _jsx(_components.a, { href: "https://logto.io/", children: "Logto" }), " OIDC sağlayıcısını kullanacağız."] }), "\n", _jsx(_components.p, { children: "Başlayalım!" }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Bu eğitime ait örnek projeyi ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/HEAD/packages/chrome-extension-sample", children: "GitHub\ndepomuzdan" }), " bulabilirsiniz."] }) }), "\n", _jsxs(_components.h2, { id: "giriş", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#giriş", children: _jsx(_components.span, { children: "#" }) }), "Giriş"] }), "\n", _jsx(_components.p, { children: "Chrome uzantınızın açılır penceresine \"Oturum Aç\" düğmesini koyduğunuz varsayılırsa, kimlik doğrulama akışı şöyle görünecektir:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant A as Uzantı açılır penceresi\n participant B as Uzantı servis işçisi\n participant C as Logto oturum açma deneyimi\n\n A->>B: Oturum açmayı çağırır\n B->>C: Logto'ya yönlendirir\n C->>C: Kullanıcı oturum açar\n C->>B: Uzantıya geri yönlendirir\n B->>A: Açılır pencereyi bilgilendirir\n" }) }), "\n", _jsxs(_components.p, { children: ["Uzantınızdaki diğer etkileşimli sayfalar için sadece ", _jsx(_components.code, { children: "Uzantı açılır penceresi" }), " katılımcısını sayfanın adıyla değiştirmeniz yeterlidir. Bu eğitimde, açılır pencere sayfasına odaklanacağız."] }), "\n", _jsxs(_components.h2, { id: "logto-uygulaması-oluşturun", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#logto-uygulaması-oluşturun", children: _jsx(_components.span, { children: "#" }) }), "Logto uygulaması oluşturun"] }), "\n", _jsx(_components.p, { children: "Başlamak için, \"Tek sayfalık uygulama\" türünde bir Logto uygulaması oluşturun. Bir Logto uygulaması oluşturmak için şu adımları izleyin:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://cloud.logto.io/", children: "Logto Konsolu" }), " 'na oturum açın."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Uygulama oluştur" }), "'a tıklayın."] }), "\n", _jsx(_components.li, { children: "Açılan sayfada, alt kısımda \"Çerçevesiz uygulama oluştur\" düğmesini bulun ve ona tıklayın." }), "\n", _jsx(_components.li, { children: "\"Tek sayfalık uygulama\" türünü seçin ve uygulama adınızı girin." }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Oluştur" }), "'a tıklayın."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "chrome-uzantınızı-kurun", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#chrome-uzantınızı-kurun", children: _jsx(_components.span, { children: "#" }) }), "Chrome uzantınızı kurun"] }), "\n", _jsxs(_components.h3, { id: "logto-sdk-yükleyin", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#logto-sdk-yükleyin", children: _jsx(_components.span, { children: "#" }) }), "Logto SDK yükleyin"] }), "\n", _jsx(_components.p, { children: "Chrome uzantı projenizin içine Logto SDK'yı yükleyin:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# veya pnpm, yarn, vb.\nnpm i @logto/chrome-extension\n" }) }), "\n", _jsxs(_components.h3, { id: "manifestjson-dosyasını-güncelleyin", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#manifestjson-dosyasını-güncelleyin", children: _jsx(_components.span, { children: "#" }) }), _jsx(_components.code, { children: "manifest.json" }), " dosyasını güncelleyin"] }), "\n", _jsxs(_components.p, { children: ["Logto SDK, ", _jsx(_components.code, { children: "manifest.json" }), " dosyasında aşağıdaki izinlere ihtiyaç duyar:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-json", children: "{\n \"permissions\": [\"identity\", \"storage\"],\n \"host_permissions\": [\"https://*.logto.app/*\"]\n}\n" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "permissions.identity" }), ": Chrome Identity API'si için gereklidir, oturum açma ve kapatma işlemlerinde kullanılır."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "permissions.storage" }), ": Kullanıcının oturumunu depolamak için gereklidir."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "host_permissions" }), ": Logto SDK'nın Logto API'leri ile iletişim kurabilmesi için gereklidir."] }), "\n"] }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Eğer Logto Cloud'da özel bir alan adı kullanıyorsanız, ", _jsx(_components.code, { children: "host_permissions" }), " değerini alan adınıza uygun olacak şekilde güncellemeniz gerekir."] }) }), "\n", _jsxs(_components.h3, { id: "bir-arka-plan-komut-dosyası-servis-işçisi-kurun", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#bir-arka-plan-komut-dosyası-servis-işçisi-kurun", children: _jsx(_components.span, { children: "#" }) }), "Bir arka plan komut dosyası (servis işçisi) kurun"] }), "\n", _jsx(_components.p, { children: "Chrome uzantınızın arka plan komut dosyasında, Logto SDK'yı başlatın:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// service-worker.js\nimport LogtoClient from '@logto/chrome-extension';\n\nexport const client = new LogtoClient({\n endpoint: ''\n appId: '',\n});\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "" }), " ve ", _jsx(_components.code, { children: "" }), " değerlerini gerçek değerlerle değiştirin. Bu değerleri Logto Console'da oluşturduğunuz uygulama sayfasında bulabilirsiniz."] }), "\n", _jsxs(_components.p, { children: ["Bir arka plan komut dosyanız yoksa, bir tane oluşturmak için ", _jsx(_components.a, { href: "https://developer.chrome.com/docs/extensions/develop/concepts/service-workers/basics", children: "resmi kılavuzu" }), " izleyebilirsiniz."] }), "\n", _jsxs(Info, { children: [_jsx(_components.p, { children: _jsx(_components.strong, { children: "Arka plan komut dosyasına neden ihtiyacımız var?" }) }), _jsx(_components.p, { children: "Açılır pencere veya seçenekler sayfası gibi normal uzantı sayfaları arka planda çalışamaz ve kimlik doğrulama işlemi sırasında kapatılma olasılığı vardır. Arka plan bir komut dosyası, kimlik doğrulama sürecinin düzgün bir şekilde ele alınmasını sağlar." })] }), "\n", _jsx(_components.p, { children: "Ardından, diğer uzantı sayfalarından gelen mesajları dinlememiz ve kimlik doğrulama sürecini ele almamız gerekiyor:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// service-worker.js\nchrome.runtime.onMessage.addListener((message, sender, sendResponse) => {\n // Aşağıdaki kodda, her eylem için `true` döndürdüğümüzden, göndereni bilgilendirmek için `sendResponse`\n // çağırmamız gerekir. Burada hataları da ele alabilirsiniz veya göndereni bilgilendirmenin başka yollarını kullanabilirsiniz.\n\n if (message.action === 'signIn') {\n const redirectUri = chrome.identity.getRedirectURL('/callback');\n client.signIn(redirectUri).finally(sendResponse);\n return true;\n }\n\n if (message.action === 'signOut') {\n const redirectUri = chrome.identity.getRedirectURL();\n client.signOut(redirectUri).finally(sendResponse);\n return true;\n }\n\n return false;\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Yukarıdaki kodda, iki yönlendirme URI'si kullanıldığını fark edebilirsiniz. Bunlar, kimlik doğrulama akışları için bir yönlendirme URL'si oluşturmak üzere kullanılan ", _jsx(_components.a, { href: "https://developer.chrome.com/docs/extensions/reference/api/identity#method-getRedirectURL", children: "yerleşik bir Chrome API'si" }), " olan ", _jsx(_components.code, { children: "chrome.identity.getRedirectURL" }), " ile oluşturulur. İki URI şu şekilde olacaktır:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Oturum açma için ", _jsx(_components.code, { children: "https://.chromiumapp.org/callback" }), "."] }), "\n", _jsxs(_components.li, { children: ["Oturum kapatma için ", _jsx(_components.code, { children: "https://.chromiumapp.org/" }), "."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Bu URI'lerin erişilebilir olmadığını unutmayın ve yalnızca Chrome'un kimlik doğrulama süreci için belirli eylemleri tetiklemesi için kullanılırlar." }), "\n", _jsxs(_components.h2, { id: "logto-uygulama-ayarlarını-güncelleyin", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#logto-uygulama-ayarlarını-güncelleyin", children: _jsx(_components.span, { children: "#" }) }), "Logto uygulama ayarlarını güncelleyin"] }), "\n", _jsx(_components.p, { children: "Artık oluşturduğumuz yönlendirme URI'lerine izin vermek için Logto uygulama ayarlarını güncellememiz gerekiyor." }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Logto Konsolu'ndaki uygulama sayfasına gidin." }), "\n", _jsxs(_components.li, { children: ["\"Yönlendirme URI'leri\" bölümüne URI'yı ekleyin: ", _jsx(_components.code, { children: "https://.chromiumapp.org/callback" }), "."] }), "\n", _jsxs(_components.li, { children: ["\"Oturum sonu yönlendirme URI'leri\" bölümüne URI'yı ekleyin: ", _jsx(_components.code, { children: "https://.chromiumapp.org/" }), "."] }), "\n", _jsxs(_components.li, { children: ["\"CORS izinli kökenler\" bölümüne URI'yı ekleyin: ", _jsx(_components.code, { children: "chrome-extension://" }), ". Chrome uzantısındaki SDK, Logto API'leri ile iletişim kurmak için bu kökeni kullanacaktır."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Değişiklikleri kaydet" }), "'e tıklayın."] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "" }), " değerini gerçek uzantı kimliğinizle değiştirmeyi unutmayın. Uzantı kimliğini ", _jsx(_components.code, { children: "chrome://extensions" }), " sayfasında bulabilirsiniz."] }), "\n", _jsx(_components.p, { children: "Ayarları güncelledikten sonra, Logto uygulama ayarlarınız şu şekilde görünmelidir:" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/app_settings_f30c24be38.webp", alt: "Uygulama ayarları" }) }), "\n", _jsxs(_components.h2, { id: "açılır-penceresine-oturum-açma-ve-kapatma-düğmeleri-ekleyin", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#açılır-penceresine-oturum-açma-ve-kapatma-düğmeleri-ekleyin", children: _jsx(_components.span, { children: "#" }) }), "Açılır penceresine oturum açma ve kapatma düğmeleri ekleyin"] }), "\n", _jsx(_components.p, { children: "Neredeyse bitti! Hadi açılır pencere sayfasına oturum açma ve kapatma düğmeleri ekleyelim ve gerekli diğer mantığı ekleyelim." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "popup.html" }), " dosyasında:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "popup.js" }), " dosyasında (", _jsx(_components.code, { children: "popup.js" }), "'in ", _jsx(_components.code, { children: "popup.html" }), " içinde olduğunu varsayarak):"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// popup.js\ndocument.getElementById('sign-in').addEventListener('click', async () => {\n await chrome.runtime.sendMessage({ action: 'signIn' });\n // Oturum açma tamamlandı (veya başarısız oldu), burada kullanıcı arayüzünü güncelleyebilirsiniz.\n});\n\ndocument.getElementById('sign-out').addEventListener('click', async () => {\n await chrome.runtime.sendMessage({ action: 'signOut' });\n // Oturum kapama tamamlandı (veya başarısız oldu), burada kullanıcı arayüzünü güncelleyebilirsiniz.\n});\n" }) }), "\n", _jsxs(_components.h2, { id: "kontrol-noktası-kimlik-doğrulama-akışını-test-edin", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#kontrol-noktası-kimlik-doğrulama-akışını-test-edin", children: _jsx(_components.span, { children: "#" }) }), "Kontrol noktası: Kimlik doğrulama akışını test edin"] }), "\n", _jsx(_components.p, { children: "Artık Chrome uzantınızda kimlik doğrulama akışını test edebilirsiniz:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Uzantı açılır penceresini açın." }), "\n", _jsx(_components.li, { children: "\"Oturum Aç\" düğmesine tıklayın." }), "\n", _jsx(_components.li, { children: "Logto oturum açma sayfasına yönlendirileceksiniz." }), "\n", _jsx(_components.li, { children: "Logto hesabınıza giriş yapın." }), "\n", _jsx(_components.li, { children: "Chrome'a geri yönlendirileceksiniz." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "kimlik-doğrulama-durumunu-kontrol-edin", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#kimlik-doğrulama-durumunu-kontrol-edin", children: _jsx(_components.span, { children: "#" }) }), "Kimlik doğrulama durumunu kontrol edin"] }), "\n", _jsx(_components.p, { children: "Chrome, birleşik depolama API'leri sağladığından, oturum açma ve kapatma akışı dışında, diğer tüm Logto SDK yöntemleri doğrudan açılır sayfada kullanılabilir." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "popup.js" }), "'te, arka plan komut dosyasında oluşturulan ", _jsx(_components.code, { children: "LogtoClient" }), " örneğini yeniden kullanabilir veya aynı yapılandırmaya sahip yeni bir tane oluşturabilirsiniz:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// popup.js\nimport LogtoClient from '@logto/chrome-extension';\n\nconst client = new LogtoClient({\n endpoint: ''\n appId: '',\n});\n\n// Veya arka plan komut dosyasında oluşturulan istemci örneğini yeniden kullanın\nimport { client } from './service-worker.js';\n" }) }), "\n", _jsx(_components.p, { children: "Ardından, kimlik doğrulama durumunu ve kullanıcının profilini yüklemek için bir fonksiyon oluşturabilirsiniz:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// popup.js\nconst loadAuthenticationState = async () => {\n const isAuthenticated = await client.isAuthenticated();\n // Kimlik doğrulama durumuna göre kullanıcı arayüzünü güncelleyin\n\n if (isAuthenticated) {\n const user = await client.getIdTokenClaims(); // { sub: '...', email: '...', ... }\n // Kullanıcının profiliyle kullanıcı arayüzünü güncelleyin\n }\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Ayrıca ", _jsx(_components.code, { children: "loadAuthenticationState" }), " fonksiyonunu oturum açma ve kapatma mantığıyla birleştirebilirsiniz:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// popup.js\ndocument.getElementById('sign-in').addEventListener('click', async () => {\n await chrome.runtime.sendMessage({ action: 'signIn' });\n await loadAuthenticationState();\n});\n\ndocument.getElementById('sign-out').addEventListener('click', async () => {\n await chrome.runtime.sendMessage({ action: 'signOut' });\n await loadAuthenticationState();\n});\n" }) }), "\n", _jsx(_components.p, { children: "İşte kimlik doğrulama durumuyla açılır pencere sayfasının bir örneği:" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/extension_popup_03b2ad10b2.webp", alt: "Açılır pencere sayfası" }) }), "\n", _jsxs(_components.p, { children: ["SDK hakkında daha fazla bilgi için, ", _jsx(_components.a, { href: "https://docs.logto.io/sdk/vanilla-js/", children: "tarayıcı SDK resmi belgelerine" }), " başvurabilirsiniz. Tarayıcı SDK'sı, Chrome uzantı SDK'sı ile aynı API'leri paylaşır."] }), "\n", _jsxs(_components.h2, { id: "diğer-hususlar", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#diğer-hususlar", children: _jsx(_components.span, { children: "#" }) }), "Diğer hususlar"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Servis işçisi paketleme" }), ": Webpack veya Rollup gibi bir paketleyici kullanıyorsanız, Node.js modüllerinin gereksiz paketlemesini önlemek için hedefi ", _jsx(_components.code, { children: "browser" }), " veya benzeri olarak açıkça ayarlamanız gerekir."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Modül çözümü" }), ": Logto Chrome uzantı SDK'sı sadece ESM modülüdür."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Daha eksiksiz bir örnek için TypeScript, Rollup ve diğer yapılandırmalarla ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/HEAD/packages/chrome-extension-sample", children: "ö örnek projeyi" }), " inceleyin."] }), "\n", _jsxs(_components.h2, { id: "sonuç", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sonuç", children: _jsx(_components.span, { children: "#" }) }), "Sonuç"] }), "\n", _jsx(_components.p, { children: "Kullanıcılar doğrulandığında, artık Chrome uzantınızda güvenli bir şekilde ücretli özellikler sunabilirsiniz. Örneğin, kullanıcının abonelik durumunu kullanıcı profilinde saklayabilir ve kullanıcı uzantıyı açtığında kontrol edebilirsiniz." }), "\n", _jsx(_components.p, { children: "Chrome uzantılarının ve Logto'nun gücünü birleştirerek, hem sizin hem de kullanıcılarınızın seveceği daha esnek ve özelleştirilebilir bir uzantı oluşturabilirsiniz." }), "\n", _jsx(LogtoCloudButton, {})] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }