"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-hook", "hProperties": { "id": "เพิ่ม-logto-hook" } }, "depth": 3, "value": "เพิ่ม Logto hook" }, { "data": { "id": "ดำเนินการเข้าสู่ระบบและออกจากระบบ", "hProperties": { "id": "ดำเนินการเข้าสู่ระบบและออกจากระบบ" } }, "depth": 2, "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": 201, "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: 'SvelteKit', url: 'https://kit.svelte.dev/', description: 'เป็นเฟรมเวิร์คสำหรับการพัฒนาแอปพลิเคชันเว็บที่แข็งแกร่งและมีประสิทธิภาพอย่างรวดเร็วด้วย Svelte.' }, programmingLanguage: "TypeScript", applicationType: "Traditional web" }), "\n", _jsxs(_components.h2, { id: "ผสานรวมกับ-logto-sdk", children: ["ผสานรวมกับ Logto SDK", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ผสานรวมกับ-logto-sdk", children: _jsx(_components.span, { children: "#" }) })] }), "\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, etc.\nnpm i @logto/sveltekit\n" }) }), "\n", _jsxs(_components.h3, { id: "เพิ่ม-logto-hook", children: ["เพิ่ม Logto hook", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#เพิ่ม-logto-hook", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["ในไฟล์ ", _jsx(_components.code, { children: "hooks.server.ts" }), " ของคุณ ให้เพิ่มโค้ดต่อไปนี้เพื่อฝัง Logto hook เข้าไปในเซิร์ฟเวอร์ของคุณ:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { handleLogto } from '@logto/sveltekit';\n\nexport const handle = handleLogto(\n {\n endpoint: '',\n appId: '',\n appSecret: '',\n },\n {\n encryptionKey: '',\n }\n);\n" }) }), "\n", _jsx(_components.p, { children: "เนื่องจากข้อมูลเหล่านี้มีความละเอียดอ่อน ขอแนะนำให้ใช้ตัวแปรสภาพแวดล้อม:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { handleLogto } from '@logto/sveltekit';\nimport { env } from '$env/dynamic/private';\n\nexport const handle = handleLogto(\n {\n endpoint: env.LOGTO_ENDPOINT,\n appId: env.LOGTO_APP_ID,\n appSecret: env.LOGTO_APP_SECRET,\n },\n {\n encryptionKey: env.LOGTO_COOKIE_ENCRYPTION_KEY,\n }\n);\n" }) }), "\n", _jsxs(_components.p, { children: ["หากมี hooks หลายตัว คุณสามารถใช้ ", _jsx(_components.a, { href: "https://kit.svelte.dev/docs/modules#sveltejs-kit-hooks", children: "ฟังก์ชันช่วยเหลือ sequence()" }), " เพื่อเชื่อมโยงพวกเขา:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { sequence } from '@sveltejs/kit/hooks';\n\nexport const handle = sequence(handleLogto, handleOtherHook);\n" }) }), "\n", _jsxs(_components.p, { children: ["ตอนนี้คุณสามารถเข้าถึงไคลเอนต์ Logto ในวัตถุ ", _jsx(_components.code, { children: "locals" }), " สำหรับ TypeScript คุณสามารถเพิ่มประเภทใน ", _jsx(_components.code, { children: "app.d.ts" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import type { LogtoClient, UserInfoResponse } from '@logto/sveltekit';\n\ndeclare global {\n namespace App {\n interface Locals {\n logtoClient: LogtoClient;\n user?: UserInfoResponse;\n }\n }\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["เราจะพูดคุยเกี่ยวกับวัตถุ ", _jsx(_components.code, { children: "user" }), " ในภายหลัง"] }), "\n", _jsxs(_components.h2, { id: "ดำเนินการเข้าสู่ระบบและออกจากระบบ", children: ["ดำเนินการเข้าสู่ระบบและออกจากระบบ", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ดำเนินการเข้าสู่ระบบและออกจากระบบ", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(ConfigureRedirectUris, {}), "\n", _jsx(_components.p, { children: "กลับไปยังแอปของคุณ ในหน้าที่คุณต้องการดำเนินการเข้าสู่ระบบและออกจากระบบ ให้กำหนดการกระทำต่อไปนี้:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "// +page.server.ts\nimport type { Actions } from './$types';\n\nexport const actions: Actions = {\n signIn: async ({ locals }) => {\n await locals.logtoClient.signIn('http://localhost:3000/callback');\n },\n signOut: async ({ locals }) => {\n await locals.logtoClient.signOut('http://localhost:3000/');\n },\n};\n" }) }), "\n", _jsx(_components.p, { children: "จากนั้นใช้การกระทำเหล่านี้ในคอมโพเนนต์ Svelte ของคุณ:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "{/* +page.svelte */}\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: "locals.user" }), " ลงในเลย์เอาต์ ทำให้สามารถเข้าถึงได้สำหรับทุกหน้า:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import type { LayoutServerLoad } from './$types';\n\nexport const load: LayoutServerLoad = async ({ locals }) => {\n return { user: locals.user };\n};\n" }) }), "\n", _jsx(_components.p, { children: "ในคอมโพเนนต์ Svelte ของคุณ:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n{#if data.user}\n

{key}: {value}

\n{/if}\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: "กำหนดค่าตัวเชื่อมต่อ" }) }), "\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."); }