Logto คือทางเลือกแทน Auth0 ที่ออกแบบมาสำหรับแอปและผลิตภัณฑ์ SaaS ยุคใหม่ โดยมีทั้งบริการ Cloud และ Open-source เพื่อช่วยให้คุณเปิดตัวระบบการจัดการเอกลักษณ์และการเข้าถึง (IAM) ได้อย่างรวดเร็ว สนุกกับการยืนยันตัวตน (การยืนยันตัวตน), การอนุญาต (การอนุญาต), และการจัดการหลายผู้เช่า ครบจบในที่เดียว
เราแนะนำให้เริ่มต้นด้วย tenant สำหรับการพัฒนาแบบฟรีบน Logto Cloud เพื่อให้คุณสามารถสำรวจฟีเจอร์ทั้งหมดได้อย่างง่ายดาย
ในบทความนี้ เราจะพาคุณไปทีละขั้นตอนเพื่อสร้างประสบการณ์ลงชื่อเข้าใช้ Kakao (การยืนยันตัวตนของผู้ใช้) อย่างรวดเร็วด้วย React และ Logto
ข้อกำหนดเบื้องต้น
- มี Logto instance ที่พร้อมใช้งาน ดู หน้าแนะนำ เพื่อเริ่มต้นใช้งาน
- มีความรู้พื้นฐานเกี่ยวกับ React
- มีบัญชี Kakao ที่ใช้งานได้
สร้างแอปพลิเคชันใน Logto
Logto สร้างขึ้นบนพื้นฐานของการยืนยันตัวตน OpenID Connect (OIDC) และการอนุญาต OAuth 2.0 โดยรองรับการจัดการข้อมูลระบุตัวตนแบบรวมศูนย์ข้ามหลายแอปพลิเคชัน ซึ่งมักเรียกว่า การลงชื่อเข้าใช้ครั้งเดียว (Single Sign-On; SSO)
ในการสร้างแอปพลิเคชัน Single page app ของคุณ เพียงทำตามขั้นตอนเหล่านี้:
- เปิด Logto Console ในส่วน "เริ่มต้นใช้งาน" ให้คลิกที่ลิงก์ "ดูทั้งหมด" เพื่อเปิดรายการเฟรมเวิร์กของแอปพลิเคชัน หรือคุณสามารถไปที่ Logto Console > Applications แล้วคลิกปุ่ม "สร้างแอปพลิเคชัน"
- ในหน้าต่างที่เปิดขึ้น ให้คลิกที่ส่วน "Single page app" หรือกรองเฟรมเวิร์ก "Single page app" ทั้งหมดที่มีโดยใช้ช่องกรองด่วนทางซ้ายมือ จากนั้นคลิกที่การ์ดเฟรมเวิร์ก "React" เพื่อเริ่มสร้างแอปพลิเคชันของคุณ
- กรอกชื่อแอปพลิเคชัน เช่น "Bookstore" แล้วคลิก "สร้างแอปพลิเคชัน"
🎉 เยี่ยมมาก! คุณเพิ่งสร้างแอปพลิเคชันแรกของคุณใน Logto คุณจะเห็นหน้าข้อความแสดงความยินดีซึ่งมีคู่มือการเชื่อมต่ออย่างละเอียด ให้ทำตามคู่มือเพื่อดูประสบการณ์ที่จะเกิดขึ้นในแอปพลิเคชันของคุณ
ผสานรวม React กับ Logto
- โปรเจกต์ตัวอย่างสามารถดูได้ที่ SDK repository ของเรา
- วิดีโอแนะนำสามารถรับชมได้ที่ ช่อง YouTube ของเรา
การติดตั้ง
ติดตั้ง Logto SDK ผ่านตัวจัดการแพ็กเกจที่คุณชื่นชอบ:
- npm
- pnpm
- yarn
npm i @logto/react
pnpm add @logto/react
yarn add @logto/react
เริ่มต้น LogtoClient
นำเข้าและใช้ LogtoProvider
เพื่อให้บริบท Logto กับแอปของคุณ:
import { LogtoProvider, LogtoConfig } from '@logto/react';
const config: LogtoConfig = {
endpoint: '<your-logto-endpoint>', // เช่น http://localhost:3001
appId: '<your-application-id>',
};
const App = () => (
<LogtoProvider config={config}>
<YourAppContent />
</LogtoProvider>
);
กำหนดค่า Redirect URIs
ก่อนที่เราจะลงลึกในรายละเอียด นี่คือภาพรวมประสบการณ์ของผู้ใช้ปลายทาง กระบวนการลงชื่อเข้าใช้สามารถสรุปได้ดังนี้:
- แอปของคุณเรียกใช้งานเมธอดลงชื่อเข้าใช้
- ผู้ใช้จะถูกเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ของ Logto สำหรับแอปเนทีฟ ระบบจะเปิดเบราว์เซอร์ของระบบ
- ผู้ใช้ลงชื่อเข้าใช้และถูกเปลี่ยนเส้นทางกลับไปยังแอปของคุณ (ตามที่กำหนดไว้ใน redirect URI)
เกี่ยวกับการลงชื่อเข้าใช้แบบเปลี่ยนเส้นทาง (redirect-based sign-in)
- กระบวนการยืนยันตัวตนนี้เป็นไปตามโปรโตคอล OpenID Connect (OIDC) และ Logto บังคับใช้มาตรการรักษาความปลอดภัยอย่างเข้มงวดเพื่อปกป้องการลงชื่อเข้าใช้ของผู้ใช้
- หากคุณมีหลายแอป คุณสามารถใช้ผู้ให้บริการข้อมูลระบุตัวตน (Logto) เดียวกันได้ เมื่อผู้ใช้ลงชื่อเข้าใช้แอปหนึ่งแล้ว Logto จะดำเนินการลงชื่อเข้าใช้โดยอัตโนมัติเมื่อผู้ใช้เข้าถึงแอปอื่น
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับเหตุผลและประโยชน์ของการลงชื่อเข้าใช้แบบเปลี่ยนเส้นทาง โปรดดูที่ อธิบายประสบการณ์การลงชื่อเข้าใช้ของ Logto
ในตัวอย่างโค้ดต่อไปนี้ เราถือว่าแอปของคุณกำลังทำงานอยู่ที่ http://localhost:3000/
กำหนดค่า Redirect URI
ไปที่หน้ารายละเอียดแอปพลิเคชันใน Logto Console เพิ่ม redirect URI http://localhost:3000/callback

เช่นเดียวกับการลงชื่อเข้าใช้ ผู้ใช้ควรถูกเปลี่ยนเส้นทางไปที่ Logto เพื่อออกจากเซสชันที่ใช้ร่วมกัน เมื่อเสร็จสิ้นแล้ว ควรเปลี่ยนเส้นทางผู้ใช้กลับไปยังเว็บไซต์ของคุณ ตัวอย่างเช่น เพิ่ม http://localhost:3000/
ในส่วน post sign-out redirect URI
จากนั้นคลิก "Save" เพื่อบันทึกการเปลี่ยนแปลง
จัดการ Redirect
เนื่องจากเราใช้ http://localhost:3000/callback
เป็น redirect URI ตอนนี้เราจำเป็นต้องจัดการเส้นทางนี้อย่างถูกต้อง
ก่อนอื่น มาสร้างหน้าคอลแบ็กกันก่อน:
import { useHandleSignInCallback } from '@logto/react';
const Callback = () => {
const { isLoading } = useHandleSignInCallback(() => {
// ทำบางอย่างเมื่อเสร็จสิ้น เช่น เปลี่ยนเส้นทางไปยังหน้าแรก
});
// ขณะกำลังดำเนินการ
if (isLoading) {
return <div>กำลังเปลี่ยนเส้นทาง...</div>;
}
return null;
};
สุดท้าย ใส่โค้ดด้านล่างเพื่อสร้าง route /callback
ซึ่ง ไม่ต้องการการยืนยันตัวตน (authentication):
// สมมติว่าใช้ react-router
<Route path="/callback" element={<Callback />} />
สร้างฟังก์ชันลงชื่อเข้าใช้และออกจากระบบ
เรามี hook สองตัวคือ useHandleSignInCallback()
และ useLogto()
ซึ่งช่วยให้คุณจัดการโฟลว์การยืนยันตัวตน (Authentication) ได้อย่างง่ายดาย
ก่อนเรียก .signIn()
โปรดตรวจสอบให้แน่ใจว่าคุณได้กำหนดค่า Redirect URI ใน Admin Console อย่างถูกต้องแล้ว
import { useLogto } from '@logto/react';
const Home = () => {
const { signIn, signOut, isAuthenticated } = useLogto();
return isAuthenticated ? (
<button onClick={signOut}>Sign Out</button>
) : (
<button onClick={() => signIn('http://localhost:3000/callback')}>Sign In</button>
);
};
การเรียกใช้ .signOut()
จะล้างข้อมูล Logto ทั้งหมดในหน่วยความจำและ localStorage หากมีอยู่
จุดตรวจสอบ: ทดสอบแอปพลิเคชันของคุณ
ตอนนี้คุณสามารถทดสอบแอปพลิเคชันของคุณได้แล้ว:
- รันแอปพลิเคชันของคุณ คุณจะเห็นปุ่มลงชื่อเข้าใช้
- คลิกปุ่มลงชื่อเข้าใช้ SDK จะเริ่มกระบวนการลงชื่อเข้าใช้และเปลี่ยนเส้นทางคุณไปยังหน้าลงชื่อเข้าใช้ของ Logto
- หลังจากที่คุณลงชื่อเข้าใช้แล้ว คุณจะถูกเปลี่ยนเส้นทางกลับไปยังแอปพลิเคชันของคุณและเห็นปุ่มลงชื่อออก
- คลิกปุ่มลงชื่อออกเพื่อเคลียร์ที่เก็บโทเค็นและออกจากระบบ
เพิ่มตัวเชื่อมต่อ Kakao
เพื่อเปิดใช้งานการลงชื่อเข้าใช้อย่างรวดเร็วและเพิ่มอัตราการเปลี่ยนผู้ใช้ ให้เชื่อมต่อกับ React ในฐานะผู้ให้บริการข้อมูลระบุตัวตน (Identity provider) ตัวเชื่อมต่อโซเชียลของ Logto ช่วยให้คุณสร้างการเชื่อมต่อนี้ได้ภายในไม่กี่นาที โดยสามารถกรอกพารามิเตอร์ได้หลายค่า
ในการเพิ่มตัวเชื่อมต่อโซเชียล ให้ทำตามขั้นตอนดังนี้:
- ไปที่ Console > Connectors > Social Connectors
- คลิก "Add social connector" และเลือก "Kakao"
- ทำตามคู่มือ README กรอกข้อมูลที่จำเป็น และปรับแต่งการตั้งค่า

หากคุณกำลังทำตามคู่มือ Connector แบบ in-place คุณสามารถข้ามส่วนถัดไปได้
ตั้งค่า Kakao login
ตั้งค่าโปรเจกต์ใน Kakao Developers Console
- ไปที่ Kakao Developers Console และลงชื่อเข้าใช้ด้วยบัญชี Kakao ของคุณ
- คลิก Add an application เพื่อสร้างโปรเจกต์ใหม่ หรือเลือกโปรเจกต์ที่มีอยู่
กำหนดค่า Kakao Login
เปิดใช้งาน Kakao Login
- คลิก Product Settings -> Kakao Login จากเมนู
- เปิด
Kakao Login Activation
- เพิ่ม URL ด้านล่างนี้ใน
Redirect URI
http(s)://YOUR_URL/callback/${connector_id}
(connector_id
สามารถดูได้ที่แถบด้านบนของหน้ารายละเอียดตัวเชื่อมต่อใน Logto Admin Console)- (โปรดแทนที่
YOUR_URL
ด้วย URL ของLogto
ของคุณ และเลือกhttp
หรือhttps
ตามสถานการณ์ของคุณ)
การตั้งค่าความเป็นส่วนตัว
- คลิก Product Settings -> Kakao Login -> Consent Item จากเมนู
- เปลี่ยนสถานะของ
Nickname
,Profile image
และEmail
เป็น Required consent (คุณอาจไม่สามารถเปลี่ยนEmail
เป็น Required consent ได้เนื่องจากการตั้งค่าโปรเจกต์ของคุณ)
การตั้งค่าความปลอดภัย (ไม่บังคับ)
- คลิก Product Settings -> Kakao Login -> Security จากเมนู
- คลิก
Client secret code
เพื่อสร้างรหัสลับ - เปลี่ยน
Activation state
เป็น Enable (หากคุณเปิดใช้งาน จะต้องใช้secret code
ด้วย)
กำหนดค่า Logto
ประเภทของการตั้งค่า
Name | Type |
---|---|
clientId | string |
clientSecret | string? |
clientId
clientId
คือ REST API key
ของโปรเจกต์คุณ
(คุณสามารถดูได้จาก summary
ของโปรเจกต์ใน Kakao developers console)
clientSecret
clientSecret
คือ Secret Code
ของโปรเจกต์คุณ
(โปรดตรวจสอบ การตั้งค่าความปลอดภัย (ไม่บังคับ))
บันทึกการตั้งค่าของคุณ
โปรดตรวจสอบให้แน่ใจว่าคุณได้กรอกค่าที่จำเป็นในพื้นที่การตั้งค่าตัวเชื่อมต่อ Logto เรียบร้อยแล้ว คลิก "บันทึกและเสร็จสิ้น" (หรือ "บันทึกการเปลี่ยนแปลง") และตัวเชื่อมต่อ Kakao ควรพร้อมใช้งานแล้ว
เปิดใช้งานตัวเชื่อมต่อ Kakao ในประสบการณ์การลงชื่อเข้าใช้
เมื่อคุณสร้างตัวเชื่อมต่อโซเชียลสำเร็จแล้ว คุณสามารถเปิดใช้งานเป็นปุ่ม "ดำเนินการต่อด้วย Kakao" ในประสบการณ์การลงชื่อเข้าใช้ (Sign-in Experience) ได้
- ไปที่ Console > ประสบการณ์การลงชื่อเข้าใช้ > สมัครและลงชื่อเข้าใช้
- (ไม่บังคับ) เลือก "ไม่เกี่ยวข้อง" สำหรับตัวระบุการสมัคร หากคุณต้องการเฉพาะการเข้าสู่ระบบโซเชียล
- เพิ่มตัวเชื่อมต่อ Kakao ที่ตั้งค่าไว้แล้วในส่วน "เข้าสู่ระบบโซเชียล" (Social sign-in)

การทดสอบและการตรวจสอบความถูกต้อง
กลับไปที่แอป React ของคุณ ตอนนี้คุณควรจะสามารถลงชื่อเข้าใช้ด้วย Kakao ได้แล้ว ขอให้สนุก!
อ่านเพิ่มเติม
กระบวนการสำหรับผู้ใช้ปลายทาง: Logto มีโฟลว์การยืนยันตัวตนสำเร็จรูปพร้อมใช้งาน รวมถึง MFA และ Enterprise SSO พร้อม API อันทรงพลังสำหรับการปรับแต่งการตั้งค่าบัญชี การตรวจสอบความปลอดภัย และประสบการณ์แบบหลายผู้เช่า (multi-tenant) ได้อย่างยืดหยุ่น
การอนุญาต (Authorization): การอนุญาต (Authorization) กำหนดว่าผู้ใช้สามารถทำอะไรหรือเข้าถึงทรัพยากรใดได้บ้างหลังจากได้รับการยืนยันตัวตนแล้ว สำรวจวิธีปกป้อง API ของคุณสำหรับแอปเนทีฟและแอปหน้าเดียว (SPA) และการใช้งานการควบคุมการเข้าถึงตามบทบาท (RBAC)
องค์กร (Organizations): ฟีเจอร์องค์กรมีประสิทธิภาพอย่างยิ่งใน SaaS แบบหลายผู้เช่าและแอป B2B โดยช่วยให้สร้างผู้เช่า จัดการสมาชิก RBAC ระดับองค์กร และ Just-in-Time Provisioning ได้
ชุดบทความ Customer IAM: บทความต่อเนื่องเกี่ยวกับการจัดการข้อมูลระบุตัวตนและการเข้าถึงของลูกค้า (Customer IAM) ตั้งแต่ระดับพื้นฐาน 101 ไปจนถึงหัวข้อขั้นสูงและอื่น ๆ