"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": "การติดตั้ง", "hProperties": { "id": "การติดตั้ง" } }, "depth": 3, "value": "การติดตั้ง" }, { "data": { "id": "การกำหนดค่าแอปพลิเคชัน", "hProperties": { "id": "การกำหนดค่าแอปพลิเคชัน" } }, "depth": 3, "value": "การกำหนดค่าแอปพลิเคชัน" }, { "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": 195, "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: 'Angular', url: 'https://angular.io/', description: 'เป็นเฟรมเวิร์กการพัฒนาเว็บที่สร้างและดูแลโดย Google.' }, programmingLanguage: "TypeScript", applicationType: "Single page app" }), "\n", _jsxs(_components.h2, { id: "รวม-logto-กับโปรเจกต์ของคุณ", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#รวม-logto-กับโปรเจกต์ของคุณ", children: _jsx(_components.span, { children: "#" }) }), "รวม Logto กับโปรเจกต์ของคุณ"] }), "\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 JS core SDK และไลบรารีลูกค้า Angular OIDC:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# หรือ pnpm, yarn, ฯลฯ\nnpm i @logto/js angular-auth-oidc-client\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: ["ในโปรเจกต์ Angular ของคุณ ให้นำเสนอผู้ให้บริการการยืนยันตัวตนใน ", _jsx(_components.code, { children: "app.config.ts" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { UserScope, buildAngularAuthConfig } from '@logto/js';\nimport { provideAuth } from 'angular-auth-oidc-client';\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideHttpClient(withFetch()),\n provideAuth({\n config: buildAngularAuthConfig({\n endpoint: '',\n appId: '',\n scopes: [UserScope.Email], // เพิ่มขอบเขตเพิ่มเติมถ้าจำเป็น\n redirectUri: 'http://localhost:3000/callback',\n postLogoutRedirectUri: 'http://localhost:3000/',\n }),\n }),\n // ...ผู้ให้บริการอื่น ๆ\n ],\n};\n" }) }), "\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: "app.component.ts" }), "), แทรก ", _jsx(_components.code, { children: "OidcSecurityService" }), " และใช้มันเพื่อเซ็นชื่อเข้าและออก."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { OidcSecurityService } from 'angular-auth-oidc-client';\n\nexport class AppComponent implements OnInit {\n constructor(public oidcSecurityService: OidcSecurityService) {}\n\n signIn() {\n this.oidcSecurityService.authorize();\n }\n\n signOut() {\n this.oidcSecurityService.logoff().subscribe((result) => {\n console.log('การเซ็นชื่อออกแอป', result);\n });\n }\n}\n" }) }), "\n", _jsx(_components.p, { children: "จากนั้นในเทมเพลต ให้เพิ่มปุ่มสำหรับเซ็นชื่อเข้าและออก:" }), "\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: "OidcSecurityService" }), " ให้วิธีที่สะดวกในการสมัครรับสถานะการยืนยันตัวตน:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-ts", children: "import { OidcSecurityService } from 'angular-auth-oidc-client';\nimport type { UserInfoResponse } from '@logto/js';\n\nexport class AppComponent implements OnInit {\n isAuthenticated = false;\n userData?: UserInfoResponse;\n idToken?: string;\n accessToken?: string;\n\n constructor(public oidcSecurityService: OidcSecurityService) {}\n\n ngOnInit() {\n this.oidcSecurityService\n .checkAuth()\n .subscribe(({ isAuthenticated, userData, idToken, accessToken }) => {\n console.log('แอปได้รับการยืนยันตัวตน', isAuthenticated, userData);\n this.isAuthenticated = isAuthenticated;\n this.userData = userData;\n this.idToken = idToken;\n this.accessToken = accessToken;\n });\n }\n\n // ...เมธอดอื่น ๆ\n}\n" }) }), "\n", _jsx(_components.p, { children: "แล้วใช้มันในเทมเพลต:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n

{{ userData | json }}

โทเค็นการเข้าถึง: {{ accessToken }}

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