"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-sdk", "hProperties": { "id": "รวม-logto-sdk" } }, "depth": 2, "value": "รวม Logto SDK" }, { "data": { "id": "การติดตั้ง", "hProperties": { "id": "การติดตั้ง" } }, "depth": 3, "value": "การติดตั้ง" }, { "data": { "id": "ลงทะเบียนโมดูล-logto", "hProperties": { "id": "ลงทะเบียนโมดูล-logto" } }, "depth": 3, "value": "ลงทะเบียนโมดูล Logto" }, { "data": { "id": "การทำงานเข้าสู่ระบบและออกจากระบบ", "hProperties": { "id": "การทำงานเข้าสู่ระบบและออกจากระบบ" } }, "depth": 3, "value": "การทำงานเข้าสู่ระบบและออกจากระบบ" }, { "data": { "id": "แสดงข้อมูลผู้ใช้", "hProperties": { "id": "แสดงข้อมูลผู้ใช้" } }, "depth": 3, "value": "แสดงข้อมูลผู้ใช้" }, { "data": { "id": "จุดตรวจสอบ-รันแอปพลิเคชัน", "hProperties": { "id": "จุดตรวจสอบ-รันแอปพลิเคชัน" } }, "depth": 2, "value": "จุดตรวจสอบ: รันแอปพลิเคชัน" }, { "data": { "id": "การอ่านเพิ่มเติม", "hProperties": { "id": "การอ่านเพิ่มเติม" } }, "depth": 2, "value": "การอ่านเพิ่มเติม" }]; const readingTime = { "minutes": 1, "words": 170, "text": "less than a minute read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }, {Checkpoint, ConfigureRedirectUris, GetStarted, LogtoCloudButton} = _components; if (!Checkpoint) _missingMdxReference("Checkpoint", true); if (!ConfigureRedirectUris) _missingMdxReference("ConfigureRedirectUris", true); if (!GetStarted) _missingMdxReference("GetStarted", true); if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "เริ่มต้น", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#เริ่มต้น", children: _jsx(_components.span, { children: "#" }) }), "เริ่มต้น"] }), "\n", _jsx(GetStarted, { framework: { name: 'Nuxt', url: 'https://nuxt.com/', description: 'เฟรมเวิร์กโอเพนซอร์สที่ทำให้การพัฒนาเว็บเป็นเรื่องง่ายและทรงพลัง' }, programmingLanguage: "TypeScript", applicationType: "Traditional web" }), "\n", _jsxs(_components.h2, { id: "รวม-logto-sdk", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#รวม-logto-sdk", children: _jsx(_components.span, { children: "#" }) }), "รวม Logto SDK"] }), "\n", _jsxs(_components.h3, { id: "การติดตั้ง", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#การติดตั้ง", children: _jsx(_components.span, { children: "#" }) }), "การติดตั้ง"] }), "\n", _jsx(_components.p, { children: "ติดตั้ง Logto SDK ผ่านตัวจัดการแพ็กเกจที่ชื่นชอบ:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# หรือ pnpm, yarn, เป็นต้น\nnpm i @logto/nuxt\n" }) }), "\n", _jsxs(_components.h3, { id: "ลงทะเบียนโมดูล-logto", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ลงทะเบียนโมดูล-logto", children: _jsx(_components.span, { children: "#" }) }), "ลงทะเบียนโมดูล Logto"] }), "\n", _jsxs(_components.p, { children: ["ในไฟล์คอนฟิก Nuxt ของคุณ (", _jsx(_components.code, { children: "nuxt.config.ts" }), "), เพิ่มโมดูล Logto:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "export default defineNuxtConfig({\n modules: ['@logto/nuxt'],\n // ...การกำหนดค่าอื่นๆ\n});\n" }) }), "\n", _jsx(_components.p, { children: "การกำหนดค่าขั้นต่ำสำหรับโมดูลมีดังนี้:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "export default defineNuxtConfig({\n modules: ['@logto/nuxt'],\n runtimeConfig: {\n logto: {\n endpoint: '',\n appId: '',\n appSecret: '',\n cookieEncryptionKey: '',\n },\n },\n // ...การกำหนดค่าอื่นๆ\n});\n" }) }), "\n", _jsx(_components.p, { children: "เนื่องจากข้อมูลเหล่านี้เป็นข้อมูลที่สำคัญ จึงแนะนำให้ใช้ตัวแปรสภาพแวดล้อม:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# ไฟล์ .env\nNUXT_LOGTO_ENDPOINT=\"\"\nNUXT_LOGTO_APP_ID=\"\"\nNUXT_LOGTO_APP_SECRET=\"\"\nNUXT_LOGTO_COOKIE_ENCRYPTION_KEY=\"\"\n" }) }), "\n", _jsxs(_components.p, { children: ["ดูข้อมูลเพิ่มเติมที่ ", _jsx(_components.a, { href: "https://nuxt.com/docs/guide/going-further/runtime-config", children: "runtime config" })] }), "\n", _jsxs(_components.h3, { id: "การทำงานเข้าสู่ระบบและออกจากระบบ", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#การทำงานเข้าสู่ระบบและออกจากระบบ", children: _jsx(_components.span, { children: "#" }) }), "การทำงานเข้าสู่ระบบและออกจากระบบ"] }), "\n", _jsx(ConfigureRedirectUris, {}), "\n", _jsxs(_components.p, { children: ["เมื่อลงทะเบียนโมดูล ", _jsx(_components.code, { children: "@logto/nuxt" }), ", จะมีการทำตามนี้:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["เพิ่มสามเส้นทางสำหรับเข้าสู่ระบบ (", _jsx(_components.code, { children: "/sign-in" }), "), ออกจากระบบ (", _jsx(_components.code, { children: "/sign-out" }), "), และการเรียกกลับ (", _jsx(_components.code, { children: "/callback" }), ")."] }), "\n", _jsxs(_components.li, { children: ["นำเข้า composables สองตัว: ", _jsx(_components.code, { children: "useLogtoClient" }), " และ ", _jsx(_components.code, { children: "useLogtoUser" }), "."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["เส้นทางเหล่านี้สามารถกำหนดค่าได้ผ่าน ", _jsx(_components.code, { children: "logto.pathnames" }), " ในตัวเลือกโมดูล, ตัวอย่างเช่น:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "export default defineNuxtConfig({\n logto: {\n pathnames: {\n signIn: '/login',\n signOut: '/logout',\n callback: '/auth/callback',\n },\n },\n // ...การกำหนดค่าอื่นๆ\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["ตรวจสอบ ", _jsx(_components.a, { href: "https://github.com/logto-io/js/blob/HEAD/packages/nuxt/src/runtime/utils/types.ts", children: "ไฟล์การกำหนดประเภท" }), " ในแพ็กเกจ ", _jsx(_components.code, { children: "@logto/nuxt" }), " สำหรับข้อมูลเพิ่มเติม"] }), "\n", _jsx(_components.p, { children: "เนื่องจากหน้าของ Nuxt จะถูกประมวลผลและกลายเป็นแอปพลิเคชันหน้าเดียว (SPA) หลังจากการโหลดครั้งแรก เราจำเป็นต้องเปลี่ยนเส้นทางผู้ใช้ไปยังเส้นทางเข้าสู่ระบบหรือออกจากระบบเมื่อจำเป็น" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "เข้าสู่ระบบ\n
\nออกจากระบบ\n" }) }), "\n", _jsxs(_components.h3, { id: "แสดงข้อมูลผู้ใช้", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#แสดงข้อมูลผู้ใช้", children: _jsx(_components.span, { children: "#" }) }), "แสดงข้อมูลผู้ใช้"] }), "\n", _jsxs(_components.p, { children: ["เพื่อแสดงข้อมูลของผู้ใช้ คุณสามารถใช้ ", _jsx(_components.code, { children: "useLogtoUser()" }), " composable, ซึ่งสามารถใช้ได้ทั้งในเซิร์ฟเวอร์และไคลเอนต์ฝั่ง:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n" }) }), "\n", _jsxs(_components.h2, { id: "จุดตรวจสอบ-รันแอปพลิเคชัน", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#จุดตรวจสอบ-รันแอปพลิเคชัน", children: _jsx(_components.span, { children: "#" }) }), "จุดตรวจสอบ: รันแอปพลิเคชัน"] }), "\n", _jsx(Checkpoint, {}), "\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", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/customize-sie/", children: "ปรับแต่งประสบการณ์การเข้าสู่ระบบ" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/configure-connectors/", children: "กำหนดค่า connectors" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/protect-your-api/", children: "ปกป้อง API ของคุณ" }) }), "\n"] }), "\n", _jsx(LogtoCloudButton, { children: "ลองใช้ Logto วันนี้" })] }); } 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."); }