"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": "ข้อกำหนดเบื้องต้น", "hProperties": { "id": "ข้อกำหนดเบื้องต้น" } }, "depth": 2, "value": "ข้อกำหนดเบื้องต้น" }, { "data": { "id": "สร้าง-ui-ลงชื่อเข้าใช้แบบกำหนดเองของคุณ", "hProperties": { "id": "สร้าง-ui-ลงชื่อเข้าใช้แบบกำหนดเองของคุณ" } }, "depth": 2, "value": "สร้าง UI ลงชื่อเข้าใช้แบบกำหนดเองของคุณ" }, { "data": { "id": "ตั้งค่า-logto-tunnel-cli", "hProperties": { "id": "ตั้งค่า-logto-tunnel-cli" } }, "depth": 2, "value": "ตั้งค่า Logto tunnel CLI" }, { "data": { "id": "เรียกการเข้าสู่ระบบจากแอปพลิเคชันของคุณ", "hProperties": { "id": "เรียกการเข้าสู่ระบบจากแอปพลิเคชันของคุณ" } }, "depth": 2, "value": "เรียกการเข้าสู่ระบบจากแอปพลิเคชันของคุณ" }, { "data": { "id": "โต้ตอบกับ-logto-experience-api", "hProperties": { "id": "โต้ตอบกับ-logto-experience-api" } }, "depth": 2, "value": "โต้ตอบกับ Logto Experience API" }, { "data": { "id": "ทดสอบหน้าลงชื่อเข้าใช้แบบกำหนดเองของคุณ", "hProperties": { "id": "ทดสอบหน้าลงชื่อเข้าใช้แบบกำหนดเองของคุณ" } }, "depth": 2, "value": "ทดสอบหน้าลงชื่อเข้าใช้แบบกำหนดเองของคุณ" }, { "data": { "id": "ปรับใช้-ui-เข้าสู่ระบบแบบกำหนดเองของคุณไปยัง-logto-cloud", "hProperties": { "id": "ปรับใช้-ui-เข้าสู่ระบบแบบกำหนดเองของคุณไปยัง-logto-cloud" } }, "depth": 2, "value": "ปรับใช้ UI เข้าสู่ระบบแบบกำหนดเองของคุณไปยัง Logto Cloud" }, { "data": { "id": "สรุป", "hProperties": { "id": "สรุป" } }, "depth": 2, "value": "สรุป" }]; const readingTime = { "minutes": 1, "words": 402, "text": "less than a minute read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; 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(_components.p, { children: "Logto มอบประสบการณ์ UI เข้าสู่ระบบที่พร้อมใช้งานซึ่งครอบคลุมคุณสมบัติทั้งหมดของ Logto รวมถึงการลงชื่อเข้าใช้ การลงทะเบียน การกู้คืนรหัสผ่าน การลงชื่อเข้าใช้ครั้งเดียว (SSO) และอื่นๆ\nผู้ใช้ยังสามารถปรับแต่งรูปลักษณ์ของ UI ประสบการณ์การลงชื่อเข้าใช้โดยใช้คุณสมบัติ \"Custom CSS\"" }), "\n", _jsx(_components.p, { children: "อย่างไรก็ตาม ผู้ใช้บางรายยังคงต้องการปรับแต่งประสบการณ์การลงชื่อเข้าใช้ให้ลึกซึ้งยิ่งขึ้น (ทั้ง UI และโฟลว์การรับรองความถูกต้อง) เพื่อให้ตรงกับแบรนด์ของตนและข้อกำหนดทางธุรกิจเฉพาะ\nเราได้ยินคุณ! และเรารู้สึกตื่นเต้นที่จะประกาศว่าฟีเจอร์ \"Bring your own UI\" พร้อมให้บริการแล้วใน Logto Cloud" }), "\n", _jsx(_components.p, { children: "ในบทช่วยสอนนี้ เราจะแนะนำคุณเกี่ยวกับขั้นตอนต่างๆ ในการสร้างและปรับใช้ UI เข้าสู่ระบบที่กำหนดเองของคุณเองไปยัง Logto Cloud" }), "\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.ul, { children: ["\n", _jsxs(_components.li, { children: ["บัญชี ", _jsx(_components.a, { href: "http://cloud.logto.io/?sign_up=true", children: "Logto Cloud" }), " พร้อมแผนการสมัครสมาชิก"] }), "\n", _jsxs(_components.li, { children: ["แอปพลิเคชันที่รวมเข้ากับ Logto (", _jsx(_components.a, { href: "https://docs.logto.io/quick-starts", children: "Quick-starts" }), ")"] }), "\n", _jsxs(_components.li, { children: ["ติดตั้ง ", _jsx(_components.a, { href: "https://docs.logto.io/docs/references/tunnel-cli/", children: "Logto tunnel CLI" })] }), "\n", _jsx(_components.li, { children: "ความรู้พื้นฐานเกี่ยวกับ HTML, CSS และ JavaScript" }), "\n"] }), "\n", _jsx(_components.p, { children: "เพื่อความเรียบง่าย เราจะใช้วิธีการลงชื่อเข้าใช้ด้วย \"ชื่อผู้ใช้และรหัสผ่าน\" แบบคลาสสิกในขั้นตอนต่อไปนี้ อย่าลืมเปลี่ยนวิธีการลงชื่อเข้าใช้ใน Logto Console" }), "\n", _jsx("center", { children: _jsx("img", { width: "600", src: "https://uploads.strapi.logto.io/1/username_password_sign_in_78a7d8588c.webp", alt: "การลงชื่อเข้าใช้ด้วยชื่อผู้ใช้และรหัสผ่าน" }) }), "\n", _jsxs(_components.h2, { id: "สร้าง-ui-ลงชื่อเข้าใช้แบบกำหนดเองของคุณ", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#สร้าง-ui-ลงชื่อเข้าใช้แบบกำหนดเองของคุณ", children: _jsx(_components.span, { children: "#" }) }), "สร้าง UI ลงชื่อเข้าใช้แบบกำหนดเองของคุณ"] }), "\n", _jsxs(_components.p, { children: ["ข้อกำหนดขั้นต่ำสำหรับ UI เข้าสู่ระบบคือต้องมีไฟล์ ", _jsx(_components.code, { children: "index.html" }), " โดยมีแบบฟอร์มเข้าสู่ระบบที่มีอย่างน้อยการป้อนชื่อผู้ใช้ การป้อนรหัสผ่าน และปุ่มส่ง\nฉันใช้ ChatGPT เพื่อสร้างตัวอย่าง HTML และนี่คือหน้าเข้าสู่ระบบสีชมพูสุดสวยนี้"] }), "\n", _jsx("center", { children: _jsx("img", { width: "600", src: "https://uploads.strapi.logto.io/1/pinky_sign_in_page_b11e43251d.webp", alt: "หน้าลงชื่อเข้าใช้แบบกำหนดเอง" }) }), "\n", _jsx(_components.p, { children: "ฉันละเว้นสไตล์ CSS เพื่อความเรียบง่าย นี่คือลักษณะ HTML ที่เรียบง่าย:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n \n \n \n หน้าเข้าสู่ระบบที่สนุกสนาน\n \n \n

ยินดีต้อนรับกลับ

\n \n

\n \n\n" }) }), "\n", _jsx(_components.p, { children: "คุณยังสามารถเริ่มต้นด้วยบอยเลอร์เพลตจากเฟรมเวิร์กส่วนหน้าที่คุณชื่นชอบ เช่น Create React App, Next.js หรือ Vue CLI" }), "\n", _jsxs(_components.p, { children: ["เนื่องจาก Logto เป็นโอเพ่นซอร์ส คำแนะนำอีกประการหนึ่งคือต้องโคลน ", _jsx(_components.a, { href: "https://github.com/logto-io/logto/tree/master/packages/experience", children: "โครงการ Logto Experience" }), " และแก้ไขรหัสให้เหมาะกับความต้องการของคุณ นี่คือ UI ประสบการณ์การลงชื่อเข้าใช้ในตัวของ Logto ที่เป็นฟีเจอร์เต็มรูปแบบที่เขียนด้วย React และ TypeScript"] }), "\n", _jsxs(_components.h2, { id: "ตั้งค่า-logto-tunnel-cli", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ตั้งค่า-logto-tunnel-cli", children: _jsx(_components.span, { children: "#" }) }), "ตั้งค่า Logto tunnel CLI"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://docs.logto.io/docs/references/tunnel-cli/", children: "Logto tunnel CLI" }), " เป็นเครื่องมือที่ไม่เพียงเสนอหน้า HTML ของคุณเท่านั้น แต่ยังช่วยให้คุณโต้ตอบกับ Logto's Experience API จากหน้า HTML ของคุณในสภาพแวดล้อมการพัฒนาท้องถิ่นได้อีกด้วย"] }), "\n", _jsxs(_components.p, { children: ["สมมติว่าเพจ ", _jsx(_components.code, { children: "index.html" }), " ของคุณตั้งอยู่ใน ", _jsx(_components.code, { children: "/path/to/your/custom-ui" }), " และ ID ผู้เช่าของ Logto ของคุณคือ ", _jsx(_components.code, { children: "foobar" }), " คุณสามารถรันคำสั่งนี้ได้ดังนี้:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npx @logto/tunnel --path /path/to/your/custom-ui --endpoint https://foobar.logto.app/ -p 9000\n" }) }), "\n", _jsxs(_components.p, { children: ["หรือ หากคุณกำลังใช้เฟรมเวิร์ก UI ที่มีเซิร์ฟเวอร์การพัฒนาในตัว และหน้าเพจของคุณถูกจัดไว้ที่ ", _jsx(_components.code, { children: "http://localhost:4000" }), " คุณสามารถเรียกใช้คำสั่งในลักษณะนี้:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npx @logto/tunnel --uri http://localhost:4000 --endpoint https://foobar.logto.app/ -p 9000\n" }) }), "\n", _jsxs(_components.p, { children: ["หลังจากรันคำสั่งแล้ว บริการอุโมงค์จะเริ่มขึ้นในเครื่องของคุณที่ ", _jsx(_components.code, { children: "http://localhost:9000/" })] }), "\n", _jsxs(_components.h2, { id: "เรียกการเข้าสู่ระบบจากแอปพลิเคชันของคุณ", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#เรียกการเข้าสู่ระบบจากแอปพลิเคชันของคุณ", children: _jsx(_components.span, { children: "#" }) }), "เรียกการเข้าสู่ระบบจากแอปพลิเคชันของคุณ"] }), "\n", _jsxs(_components.p, { children: ["ไปที่แอปพลิเคชันที่คุณสร้างไว้ก่อนหน้านี้ และเปลี่ยนปลายทาง Logto จาก ", _jsx(_components.code, { children: "https://foobar.logto.app/" }), " เป็น ", _jsx(_components.code, { children: "http://localhost:9000/" }), " ในการกำหนดค่า Logto SDK ของคุณ"] }), "\n", _jsx(_components.p, { children: "ลองดูโปรเจ็กต์ตัวอย่าง React ของเราเป็นตัวอย่าง:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", title: "src/App.tsx", children: "import { LogtoProvider, LogtoConfig } from '@logto/react';\n\nconst config: LogtoConfig = {\n // endpoint: 'https://foobar.logto.app/', // ปลายทาง Logto Cloud ดั้งเดิม\n endpoint: 'http://localhost:9000/', // ที่อยู่บริการอุโมงค์\n appId: '',\n};\n\nconst App = () => (\n \n \n \n);\n" }) }), "\n", _jsx(_components.p, { children: "คลิกปุ่ม \"ลงชื่อเข้าใช้\" ในแอปพลิเคชันของคุณ แทนที่จะเห็น UI การเข้าสู่ระบบ Logto ในตัว คุณควรถูกเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้แบบกำหนดเองของคุณ" }), "\n", _jsxs(_components.h2, { id: "โต้ตอบกับ-logto-experience-api", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#โต้ตอบกับ-logto-experience-api", children: _jsx(_components.span, { children: "#" }) }), "โต้ตอบกับ Logto Experience API"] }), "\n", _jsxs(_components.p, { children: ["ในขั้นตอนนี้ เราจะโต้ตอบกับ Logto Experience API ใน UI แบบกำหนดเองของคุณ ก่อนอื่นเรามาสร้างไฟล์ ", _jsx(_components.code, { children: "script.js" }), " และเพิ่มอ้างอิงใน ", _jsx(_components.code, { children: "index.html" }), " ของคุณ"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", title: "index.html", children: "\n \n \n \n \n \n\n" }) }), "\n", _jsxs(_components.p, { children: ["ใส่รหัสต่อไปนี้ในไฟล์ ", _jsx(_components.code, { children: "script.js" }), " ของคุณ"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", title: "script.js", children: "window.onload = function () {\n const form = document.getElementById('loginForm');\n form.addEventListener('submit', async function (event) {\n event.preventDefault();\n const formData = new FormData(event.target);\n \n try {\n await fetch('/api/experience', {\n method: 'PUT',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ interactionEvent: 'SignIn' }),\n });\n\n const verificationResponse = await fetch('/api/experience/verification/password', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({\n identifier: { type: 'username', value: formData.get('username') },\n password: formData.get('password'),\n }),\n });\n\n const { verificationId } = await verificationResponse.json();\n\n await fetch('/api/experience/identification', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ verificationId }),\n });\n\n const submitReponse = await fetch('/api/experience/submit', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n });\n\n const { redirectTo } = await submitReponse.json();\n window.location.replace(redirectTo);\n\n } catch (error) {\n console.error('โอ้มีปัญหา!', error);\n }\n });\n};\n" }) }), "\n", _jsx(_components.p, { children: "สคริปต์นี้จะทำให้โฟลว์การลงชื่อเข้าใช้ด้วยชื่อผู้ใช้และรหัสผ่านเสร็จสมบูรณ์ด้วยความช่วยเหลือของ API เหล่านี้:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "PUT /api/experience" }), " - เริ่มต้นการโต้ตอบการเข้าสู่ระบบ"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "POST /api/experience/verification/password" }), " - ตรวจสอบชื่อผู้ใช้และรหัสผ่าน"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "POST /api/experience/identification" }), " - ระบุตัวตนผู้ใช้สำหรับการโต้ตอบในปัจจุบัน"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "POST /api/experience/submit" }), " - ส่งการโต้ตอบการลงชื่อเข้าใช้"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["ดูรายละเอียดเพิ่มเติมได้ที่ ", _jsx(_components.a, { href: "https://openapi.logto.io/group/endpoint-experience", children: "เอกสาร Logto Experience API" })] }), "\n", _jsxs(_components.h2, { id: "ทดสอบหน้าลงชื่อเข้าใช้แบบกำหนดเองของคุณ", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ทดสอบหน้าลงชื่อเข้าใช้แบบกำหนดเองของคุณ", children: _jsx(_components.span, { children: "#" }) }), "ทดสอบหน้าลงชื่อเข้าใช้แบบกำหนดเองของคุณ"] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "ไปที่แอปพลิเคชันของคุณและคลิกปุ่ม \"ลงชื่อเข้าใช้\"" }), "\n", _jsxs(_components.li, { children: ["คุณควรถูกเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้แบบกำหนดเองของคุณที่ ", _jsx(_components.code, { children: "http://localhost:9000/" })] }), "\n", _jsx(_components.li, { children: "ป้อนชื่อผู้ใช้และรหัสผ่าน แล้วคลิกปุ่ม \"ส่ง\"" }), "\n", _jsx(_components.li, { children: "หากทุกอย่างตั้งค่าไว้ถูกต้อง คุณควรถูกเปลี่ยนเส้นทางกลับไปยังแอปพลิเคชันของคุณพร้อมข้อมูลผู้ใช้ที่ผ่านการรับรองแล้ว" }), "\n"] }), "\n", _jsxs(_components.h2, { id: "ปรับใช้-ui-เข้าสู่ระบบแบบกำหนดเองของคุณไปยัง-logto-cloud", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ปรับใช้-ui-เข้าสู่ระบบแบบกำหนดเองของคุณไปยัง-logto-cloud", children: _jsx(_components.span, { children: "#" }) }), "ปรับใช้ UI เข้าสู่ระบบแบบกำหนดเองของคุณไปยัง Logto Cloud"] }), "\n", _jsx(_components.p, { children: "เมื่อคุณพัฒนาและทดสอบ UI เข้าสู่ระบบแบบกำหนดเองในเครื่องเสร็จแล้ว คุณสามารถปรับใช้ไปยัง Logto Cloud ได้อย่างง่ายดาย\nเพียงแค่สร้างไฟล์ zip ของโฟลเดอร์ UI ที่กำหนดเองของคุณและอัปโหลดไปยังส่วน \"Custom UI\" ใน Logto Console ของคุณ" }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/upload_custom_ui_assets_d5d99b43d9.webp", alt: "อัปโหลด UI แบบกำหนดเอง" }) }), "\n", _jsx(_components.p, { children: "หลังจากอัปโหลดแล้ว ให้บันทึกการเปลี่ยนแปลงและ UI เข้าสู่ระบบแบบกำหนดเองของคุณจะใช้งานได้ในผู้เช่า Logto Cloud ของคุณ แทนที่ประสบการณ์การลงชื่อเข้าใช้ Logto ในตัว" }), "\n", _jsx("center", { children: _jsx("img", { src: "https://uploads.strapi.logto.io/1/sie_custom_ui_enabled_53f4445188.webp", alt: "เปิดใช้งาน UI แบบกำหนดเอง" }) }), "\n", _jsxs(_components.p, { children: ["สุดท้าย กลับไปที่แอปพลิเคชันของคุณและเปลี่ยน URI ปลายทางกลับไปเป็นปลายทาง Logto cloud ของคุณ: ", _jsx(_components.code, { children: "https://foobar.logto.app/" }), ".\nคราวนี้คุณสามารถหยุดบริการ Logto tunnel และแอปพลิเคชันของคุณควรทำงานโดยตรงกับ UI ที่ปรับแต่งเองซึ่งโฮสต์ออนไลน์"] }), "\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: "ในบทช่วยสอนนี้ เราได้แนะนำคุณเกี่ยวกับกระบวนการดำเนินการและปรับใช้ UI เข้าสู่ระบบที่กำหนดเองของคุณไปยัง Logto Cloud" }), "\n", _jsx(_components.p, { children: "ด้วยคุณลักษณะนี้ คุณสามารถปรับแต่ง UI และโฟลว์การรับรองความถูกต้องได้อย่างลึกซึ้ง เพื่อให้ตรงกับแบรนด์ของคุณและข้อกำหนดทางธุรกิจเฉพาะ" }), "\n", _jsx(_components.p, { children: "เขียนโค้ดอย่างสนุก! 🚀" }), "\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."); }