"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "บทนำ", "hProperties": { "id": "บทนำ" } }, "depth": 2, "value": "บทนำ" }, { "data": { "id": "สร้างแอปฯ-logto", "hProperties": { "id": "สร้างแอปฯ-logto" } }, "depth": 2, "value": "สร้างแอปฯ Logto" }, { "data": { "id": "ตั้งค่าส่วนขยาย-chrome-ของคุณ", "hProperties": { "id": "ตั้งค่าส่วนขยาย-chrome-ของคุณ" } }, "depth": 2, "value": "ตั้งค่าส่วนขยาย Chrome ของคุณ" }, { "data": { "id": "ติดตั้ง-logto-sdk", "hProperties": { "id": "ติดตั้ง-logto-sdk" } }, "depth": 3, "value": "ติดตั้ง Logto SDK" }, { "data": { "id": "อัปเดต-manifestjson", "hProperties": { "id": "อัปเดต-manifestjson" } }, "depth": 3, "value": "อัปเดต manifest.json" }, { "data": { "id": "ตั้งค่าสคริปต์เบื้องหลัง-service-worker", "hProperties": { "id": "ตั้งค่าสคริปต์เบื้องหลัง-service-worker" } }, "depth": 3, "value": "ตั้งค่าสคริปต์เบื้องหลัง (service worker)" }, { "data": { "id": "อัปเดตการตั้งค่าแอปฯ-logto", "hProperties": { "id": "อัปเดตการตั้งค่าแอปฯ-logto" } }, "depth": 2, "value": "อัปเดตการตั้งค่าแอปฯ Logto" }, { "data": { "id": "เพิ่มปุ่มลงชื่อเข้าใช้และออกจากระบบไปยังป๊อปอัป", "hProperties": { "id": "เพิ่มปุ่มลงชื่อเข้าใช้และออกจากระบบไปยังป๊อปอัป" } }, "depth": 2, "value": "เพิ่มปุ่มลงชื่อเข้าใช้และออกจากระบบไปยังป๊อปอัป" }, { "data": { "id": "จุดตรวจสอบ-ทดสอบกระบวนการยืนยันตัวตน", "hProperties": { "id": "จุดตรวจสอบ-ทดสอบกระบวนการยืนยันตัวตน" } }, "depth": 2, "value": "จุดตรวจสอบ: ทดสอบกระบวนการยืนยันตัวตน" }, { "data": { "id": "ตรวจสอบสถานะการยืนยันตัวตน", "hProperties": { "id": "ตรวจสอบสถานะการยืนยันตัวตน" } }, "depth": 2, "value": "ตรวจสอบสถานะการยืนยันตัวตน" }, { "data": { "id": "ข้อพิจารณาอื่นๆ", "hProperties": { "id": "ข้อพิจารณาอื่นๆ" } }, "depth": 2, "value": "ข้อพิจารณาอื่นๆ" }, { "data": { "id": "บทสรุป", "hProperties": { "id": "บทสรุป" } }, "depth": 2, "value": "บทสรุป" }]; const readingTime = { "minutes": 1, "words": 385, "text": "less than a minute 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 เป็นวิธีที่ยอดเยี่ยมในการขยายความสามารถของเบราว์เซอร์ Chrome เมื่อคุณมีส่วนขยายที่เป็นที่นิยม คุณอาจต้องการสร้างรายได้จากมันโดยการเสนอฟีเจอร์พิเศษให้กับผู้ใช้ที่จ่ายเงิน การยืนยันตัวตนของผู้ใช้เป็นสิ่งจำเป็นเพื่อวัตถุประสงค์นี้:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "การระบุตัวตนผู้ใช้" }), ": คุณจำเป็นต้องรู้ว่าผู้ใช้คือใครเพื่อให้บริการฟีเจอร์ส่วนบุคคล"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "การควบคุมการเข้าถึง" }), ": คุณจำเป็นต้องควบคุมว่าใครสามารถเข้าถึงฟีเจอร์ที่ต้องจ่ายเงินได้"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "การจัดการการสมัครสมาชิก" }), ": คุณจำเป็นต้องมีวิธีสำหรับผู้ใช้ในการสมัครและจัดการการสมัครสมาชิกของพวกเขา"] }), "\n"] }), "\n", _jsx(_components.p, { children: "ในทางกลับกัน เราไม่ต้องการผูกติดอยู่กับระบบบัญชีของ Google เนื่องจากผู้ใช้อาจต้องการใช้บัญชีอื่น หรือ คุณอาจมีบริการหลายตัวที่ต้องการผสานเข้ากับระบบตัวตนเดียวกัน" }), "\n", _jsx(_components.p, { children: "สรุปประโยชน์ของการใช้ OpenID Connect (OIDC) สำหรับการยืนยันตัวตน:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "ไม่มีการล็อกผู้ผลิต" }), ": ผู้ใช้ของคุณสามารถใช้วิธีการต่าง ๆ ในการลงชื่อเข้าใช้งานแทนที่จะถูกบังคับให้ใช้ Google"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "การลงชื่อเข้าใช้ครั้งเดียว (SSO)" }), ": ผู้ใช้สามารถลงชื่อเข้าใช้ครั้งเดียวและเข้าถึงบริการหรือแอปพลิเคชันหลายตัว"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "มาตรฐาน" }), ": OIDC เป็นมาตรฐานเปิดที่มีการยอมรับและรองรับอย่างกว้างขวาง และยังปลอดภัย"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["ในบทเรียนนี้ เราจะใช้ ", _jsx(_components.a, { href: "https://logto.io/", children: "Logto" }), " เป็นผู้ให้บริการ OIDC ซึ่งเป็นทางเลือกสำหรับ Auth0 ในการสร้างโครงสร้างพื้นฐานตัวตน"] }), "\n", _jsx(_components.p, { children: "เริ่มกันเลย!" }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["คุณสามารถพบตัวอย่างโปรเจกต์สำหรับบทเรียนนี้ได้ที่ ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/HEAD/packages/chrome-extension-sample", children: "GitHub\nrepository" }), " ของเรา"] }) }), "\n", _jsxs(_components.h2, { id: "บทนำ", children: ["บทนำ", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#บทนำ", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "สมมติว่าคุณใส่ปุ่ม \"ลงชื่อเข้าใช้\" ในป๊อปอัปของส่วนขยาย Chrome ของคุณ กระบวนการยืนยันตัวตนจะเป็นดังนี้:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant A as Extension popup\n participant B as Extension service worker\n participant C as Logto sign-in experience\n\n A->>B: เรียกใช้งานการลงชื่อเข้าใช้\n B->>C: เปลี่ยนเส้นทางไปยัง Logto\n C->>C: ผู้ใช้ลงชื่อเข้าใช้\n C->>B: เปลี่ยนเส้นทางกลับมายังส่วนขยาย\n B->>A: แจ้งเตือนป๊อปอัป\n" }) }), "\n", _jsxs(_components.p, { children: ["สำหรับหน้าอินเตอร์แอคทีฟอื่น ๆ ในส่วนขยายของคุณ คุณเพียงแค่ต้องแทนที่ผู้เข้าร่วม ", _jsx(_components.code, { children: "Extension popup" }), " ด้วยชื่อของหน้า ในบทเรียนนี้เราจะมุ่งเน้นไปที่หน้า Popup"] }), "\n", _jsxs(_components.h2, { id: "สร้างแอปฯ-logto", children: ["สร้างแอปฯ Logto", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#สร้างแอปฯ-logto", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "เพื่อเริ่มต้น ให้สร้างแอปพลิเคชัน Logto ด้วยประเภท \"แอปฯ หน้าเดียว\" ทำตามขั้นตอนเหล่านี้เพื่อสร้างแอปพลิเคชัน Logto:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["ลงชื่อเข้าใช้ ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "Logto Console" }), "."] }), "\n", _jsxs(_components.li, { children: ["คลิกที่ ", _jsx(_components.strong, { children: "สร้างแอปพลิเคชัน" })] }), "\n", _jsx(_components.li, { children: "ในหน้าที่เปิดขึ้นมา ให้หาปุ่ม \"สร้างแอปฯ โดยไม่มีเฟรมเวิร์ก\" ที่ด้านล่างและคลิก" }), "\n", _jsx(_components.li, { children: "เลือกประเภท \"แอปฯ หน้าเดียว\" และกรอกชื่อแอปพลิเคชันของคุณ" }), "\n", _jsxs(_components.li, { children: ["คลิกที่ ", _jsx(_components.strong, { children: "สร้าง" })] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "ตั้งค่าส่วนขยาย-chrome-ของคุณ", children: ["ตั้งค่าส่วนขยาย Chrome ของคุณ", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ตั้งค่าส่วนขยาย-chrome-ของคุณ", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "ติดตั้ง-logto-sdk", children: ["ติดตั้ง Logto SDK", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ติดตั้ง-logto-sdk", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "ติดตั้ง Logto SDK ในโปรเจกต์ส่วนขยาย Chrome ของคุณ:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# หรือ pnpm, yarn, etc.\nnpm i @logto/chrome-extension\n" }) }), "\n", _jsxs(_components.h3, { id: "อัปเดต-manifestjson", children: ["อัปเดต ", _jsx(_components.code, { children: "manifest.json" }), _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#อัปเดต-manifestjson", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Logto SDK ต้องการสิทธิ์ต่อไปนี้ใน ", _jsx(_components.code, { children: "manifest.json" }), ":"] }), "\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" }), ": จำเป็นสำหรับ API ระบุตัวตนของ Chrome ซึ่งใช้เพื่อเข้าสู่ระบบและออกจากระบบ"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "permissions.storage" }), ": จำเป็นสำหรับการจัดเก็บเซสชันของผู้ใช้"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "host_permissions" }), ": จำเป็นสำหรับ Logto SDK ในการสื่อสารกับ API ของ Logto"] }), "\n"] }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["หากคุณกำลังใช้โดเมนที่กำหนดเองบน Logto Cloud คุณต้องอัปเดต ", _jsx(_components.code, { children: "host_permissions" }), " ให้ตรงกับโดเมนของคุณ"] }) }), "\n", _jsxs(_components.h3, { id: "ตั้งค่าสคริปต์เบื้องหลัง-service-worker", children: ["ตั้งค่าสคริปต์เบื้องหลัง (service worker)", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ตั้งค่าสคริปต์เบื้องหลัง-service-worker", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "ในสคริปต์พื้นหลังของส่วนขยาย Chrome ของคุณ ให้เริ่มต้นใช้งาน Logto SDK:" }), "\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: "" }), " และ ", _jsx(_components.code, { children: "" }), " ด้วยค่าจริง คุณสามารถหาได้ในหน้าของแอปพลิเคชันที่คุณเพิ่งสร้างใน Logto Console"] }), "\n", _jsxs(_components.p, { children: ["หากคุณไม่มีสคริปต์พื้นหลัง คุณสามารถติดตาม ", _jsx(_components.a, { href: "https://developer.chrome.com/docs/extensions/develop/concepts/service-workers/basics", children: "คู่มืออย่างเป็นทางการ" }), " เพื่อสร้างสคริปต์ได้"] }), "\n", _jsxs(Info, { children: [_jsx(_components.p, { children: _jsx(_components.strong, { children: "ทำไมเราถึงต้องมีสคริปต์พื้นหลัง?" }) }), _jsx(_components.p, { children: "หน้าปกติของส่วนขยายเช่น Popup หรือ Options page ไม่สามารถทำงานพื้นหลังได้ และมีโอกาสที่จะปิดระหว่างกระบวนการยืนยันตัวตน สคริปต์พื้นหลังทำให้มั่นใจได้ว่ากระบวนการยืนยันตัวตนสามารถถูกจัดการได้อย่างเหมาะสม" })] }), "\n", _jsx(_components.p, { children: "จากนั้นเราจำเป็นต้องฟังข้อความจากหน้าส่วนขยายอื่น ๆ และจัดการกระบวนการยืนยันตัวตน:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// service-worker.js\nchrome.runtime.onMessage.addListener((message, sender, sendResponse) => {\n // ในโค้ดด้านล่าง เนื่องจากเรา return `true` สำหรับแต่ละ action เราจำเป็นต้องเรียก `sendResponse`\n // เพื่อแจ้งเตือนผู้ส่ง คุณยังสามารถจัดการข้อผิดพลาดที่นี่ หรือใช้วิธีการอื่นในการแจ้งเตือนผู้ส่งได้\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: ["คุณอาจสังเกตเห็นว่ามี URI เปลี่ยนเส้นทางสองตัวที่ถูกใช้ในโค้ดด้านบน ถูกสร้างโดย ", _jsx(_components.code, { children: "chrome.identity.getRedirectURL" }), " ซึ่งเป็น ", _jsx(_components.a, { href: "https://developer.chrome.com/docs/extensions/reference/api/identity#method-getRedirectURL", children: "API ในตัวของ Chrome" }), " เพื่อสร้าง URL เปลี่ยนเส้นทางสำหรับกระบวนการยืนยัน ตัว URI ทั้งสองจะเป็น:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "https://.chromiumapp.org/callback" }), " สำหรับการลงชื่อเข้าใช้"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "https://.chromiumapp.org/" }), " สำหรับการออกจากระบบ"] }), "\n"] }), "\n", _jsx(_components.p, { children: "โปรดจำไว้ว่า URI เหล่านี้ไม่สามารถเข้าถึงได้ และใช้เฉพาะสำหรับ Chrome เพื่อกระตุ้นการดำเนินการเฉพาะสำหรับกระบวนการยืนยันตัวตน" }), "\n", _jsxs(_components.h2, { id: "อัปเดตการตั้งค่าแอปฯ-logto", children: ["อัปเดตการตั้งค่าแอปฯ Logto", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#อัปเดตการตั้งค่าแอปฯ-logto", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "ตอนนี้เราจำเป็นต้องอัปเดตการตั้งค่าแอปพลิเคชัน Logto ให้อนุญาต URI เปลี่ยนเส้นทางที่เราเพิ่งสร้าง" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "ไปยังหน้าของแอปพลิเคชันใน Logto Console" }), "\n", _jsxs(_components.li, { children: ["ในส่วน \"Redirect URIs\" ให้เพิ่ม URI: ", _jsx(_components.code, { children: "https://.chromiumapp.org/callback" })] }), "\n", _jsxs(_components.li, { children: ["ในส่วน \"Post sign-out redirect URIs\" ให้เพิ่ม URI: ", _jsx(_components.code, { children: "https://.chromiumapp.org/" })] }), "\n", _jsxs(_components.li, { children: ["ในส่วน \"CORS allowed origins\" ให้เพิ่ม URI: ", _jsx(_components.code, { children: "chrome-extension://" }), " SDK ในส่วนขยาย Chrome จะใช้ต้นทางนี้ในการสื่อสารกับ API ของ Logto"] }), "\n", _jsxs(_components.li, { children: ["คลิกที่ ", _jsx(_components.strong, { children: "บันทึกการเปลี่ยนแปลง" })] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["อย่าลืมแทนที่ ", _jsx(_components.code, { children: "" }), " ด้วย ID ของส่วนขยายที่แท้จริง คุณสามารถหา ID ของส่วนขยายได้ที่หน้า ", _jsx(_components.code, { children: "chrome://extensions" })] }), "\n", _jsx(_components.p, { children: "หลังจากอัปเดตการตั้งค่าแล้ว การตั้งค่าแอปพลิเคชัน Logto ของคุณควรเป็นดังนี้:" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/app_settings_f30c24be38.webp", alt: "Application settings" }) }), "\n", _jsxs(_components.h2, { id: "เพิ่มปุ่มลงชื่อเข้าใช้และออกจากระบบไปยังป๊อปอัป", children: ["เพิ่มปุ่มลงชื่อเข้าใช้และออกจากระบบไปยังป๊อปอัป", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#เพิ่มปุ่มลงชื่อเข้าใช้และออกจากระบบไปยังป๊อปอัป", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "เราเกือบจะเสร็จแล้ว! มาเพิ่มปุ่มลงชื่อเข้าใช้และออกจากระบบและตรรกะอื่น ๆ ที่จำเป็นในหน้าป๊อปอัปกันเถอะ" }), "\n", _jsxs(_components.p, { children: ["ในไฟล์ ", _jsx(_components.code, { children: "popup.html" }), ":"] }), "\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" }), " (สมมติว่า ", _jsx(_components.code, { children: "popup.js" }), " ถูกรวมใน ", _jsx(_components.code, { children: "popup.html" }), "):"] }), "\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 // การลงชื่อเข้าใช้เสร็จสิ้น (หรือไม่สำเร็จ) คุณสามารถอัปเดต UI ได้ที่นี่\n});\n\ndocument.getElementById('sign-out').addEventListener('click', async () => {\n await chrome.runtime.sendMessage({ action: 'signOut' });\n // การออกจากระบบเสร็จสิ้น (หรือไม่สำเร็จ) คุณสามารถอัปเดต UI ได้ที่นี่\n});\n" }) }), "\n", _jsxs(_components.h2, { id: "จุดตรวจสอบ-ทดสอบกระบวนการยืนยันตัวตน", children: ["จุดตรวจสอบ: ทดสอบกระบวนการยืนยันตัวตน", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#จุดตรวจสอบ-ทดสอบกระบวนการยืนยันตัวตน", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "ตอนนี้คุณสามารถทดสอบกระบวนการยืนยันตัวตนในส่วนขยาย Chrome ของคุณได้:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "เปิดป๊อปอัปของส่วนขยาย" }), "\n", _jsx(_components.li, { children: "คลิกที่ปุ่ม \"ลงชื่อเข้าใช้\"" }), "\n", _jsx(_components.li, { children: "คุณจะถูกเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าของ Logto" }), "\n", _jsx(_components.li, { children: "ลงชื่อเข้าใช้ด้วยบัญชี Logto ของคุณ" }), "\n", _jsx(_components.li, { children: "คุณจะถูกเปลี่ยนเส้นทางกลับไปยัง Chrome" }), "\n"] }), "\n", _jsxs(_components.h2, { id: "ตรวจสอบสถานะการยืนยันตัวตน", children: ["ตรวจสอบสถานะการยืนยันตัวตน", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ตรวจสอบสถานะการยืนยันตัวตน", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "เนื่องจาก Chrome มี API การจัดเก็บแบบรวมศูนย์ แทนที่จะเป็นการลงชื่อเข้าใช้และออกจากระบบ ฟังก์ชันอื่น ๆ ของ Logto SDK สามารถใช้ได้ในหน้า Popup โดยตรง" }), "\n", _jsxs(_components.p, { children: ["ใน ", _jsx(_components.code, { children: "popup.js" }), " ของคุณ คุณสามารถใช้ตัวอย่าง ", _jsx(_components.code, { children: "LogtoClient" }), " ที่สร้างในสคริปต์พื้นหลังหรือสร้างใหม่ที่มีการตั้งค่าเดียวกัน:"] }), "\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// หรือใช้ตัวอย่าง client ที่สร้างขึ้นในสคริปต์พื้นหลัง\nimport { client } from './service-worker.js';\n" }) }), "\n", _jsx(_components.p, { children: "จากนั้นคุณสามารถสร้างฟังก์ชันเพื่อโหลดสถานะการยืนยันตัวตนและโปรไฟล์ของผู้ใช้:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// popup.js\nconst loadAuthenticationState = async () => {\n const isAuthenticated = await client.isAuthenticated();\n // อัปเดต UI ตามสถานะการยืนยันตัวตน\n\n if (isAuthenticated) {\n const user = await client.getIdTokenClaims(); // { sub: '...', email: '...', ... }\n // อัปเดต UI ด้วยโปรไฟล์ของผู้ใช้\n }\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["คุณสามารถรวมฟังก์ชัน ", _jsx(_components.code, { children: "loadAuthenticationState" }), " กับตรรกะการลงชื่อเข้าใช้และออกจากระบบ:"] }), "\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: "นี่คือตัวอย่างของหน้าป๊อปอัปที่มีสถานะการยืนยันตัวตน:" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/extension_popup_03b2ad10b2.webp", alt: "Popup page" }) }), "\n", _jsxs(_components.p, { children: ["สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ SDK คุณสามารถอ้างอิงจาก ", _jsx(_components.a, { href: "https://docs.logto.io/sdk/vanilla-js/", children: "คู่มืออย่างเป็นทางการของ SDK ของเบราว์เซอร์" }), " SDK ของเบราว์เซอร์มี API เดียวกันกับ SDK ของส่วนขยาย Chrome"] }), "\n", _jsxs(_components.h2, { id: "ข้อพิจารณาอื่นๆ", children: ["ข้อพิจารณาอื่นๆ", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ข้อพิจารณาอื่นๆ", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "การรวมสคริปต์พื้นหลัง" }), ": หากคุณใช้ bundler เช่น Webpack หรือ Rollup คุณจำเป็นต้องระบุเป้าหมายเป็น ", _jsx(_components.code, { children: "browser" }), " หรือคล้ายกันเพื่อหลีกเลี่ยงการรวมโมดูล Node.js"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "การแก้ไขโมดูล" }), ": Logto Chrome extension SDK เป็นโมดูล ESM เท่านั้น"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["ดู ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/HEAD/packages/chrome-extension-sample", children: "ตัวอย่างโปรเจกต์ของเรา" }), " สำหรับตัวอย่างสมบูรณ์ด้วย TypeScript, Rollup, และการตั้งค่าอื่นๆ"] }), "\n", _jsxs(_components.h2, { id: "บทสรุป", children: ["บทสรุป", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#บทสรุป", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "ด้วยผู้ใช้ที่ได้รับการยืนยันตัวตนแล้ว คุณสามารถนำเสนอคุณสมบัติที่ต้องชำระเงินอย่างปลอดภัยภายในส่วนขยาย Chrome ของคุณได้ เช่น คุณสามารถจัดเก็บสถานะการสมัครสมาชิกของผู้ใช้ในโปรไฟล์ผู้ใช้แล้วตรวจสอบเมื่อผู้ใช้เปิดส่วนขยาย" }), "\n", _jsx(_components.p, { children: "ผสมผสานพลังของส่วนขยาย Chrome และ Logto คุณสามารถสร้างส่วนขยายที่ยืดหยุ่นและปรับแต่งได้มากขึ้นที่ทั้งคุณและผู้ใช้ของคุณจะรัก" }), "\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."); }