Logto คือทางเลือกแทน Auth0 ที่ออกแบบมาสำหรับแอปและผลิตภัณฑ์ SaaS ยุคใหม่ โดยมีทั้งบริการ Cloud และ Open-source เพื่อช่วยให้คุณเปิดตัวระบบการจัดการเอกลักษณ์และการเข้าถึง (IAM) ได้อย่างรวดเร็ว สนุกกับการยืนยันตัวตน (การยืนยันตัวตน), การอนุญาต (การอนุญาต), และการจัดการหลายผู้เช่า ครบจบในที่เดียว
เราแนะนำให้เริ่มต้นด้วย tenant สำหรับการพัฒนาแบบฟรีบน Logto Cloud เพื่อให้คุณสามารถสำรวจฟีเจอร์ทั้งหมดได้อย่างง่ายดาย
ในบทความนี้ เราจะพาคุณไปทีละขั้นตอนเพื่อสร้างประสบการณ์ลงชื่อเข้าใช้ Azure AD (การยืนยันตัวตนของผู้ใช้) อย่างรวดเร็วด้วย Vue และ Logto
ข้อกำหนดเบื้องต้น
- มี Logto instance ที่พร้อมใช้งาน ดู หน้าแนะนำ เพื่อเริ่มต้นใช้งาน
- มีความรู้พื้นฐานเกี่ยวกับ Vue
- มีบัญชี Azure AD ที่ใช้งานได้
สร้างแอปพลิเคชันใน 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" ทั้งหมดที่มีโดยใช้ช่องกรองด่วนทางซ้ายมือ จากนั้นคลิกที่การ์ดเฟรมเวิร์ก "Vue" เพื่อเริ่มสร้างแอปพลิเคชันของคุณ
- กรอกชื่อแอปพลิเคชัน เช่น "Bookstore" แล้วคลิก "สร้างแอปพลิเคชัน"
🎉 เยี่ยมมาก! คุณเพิ่งสร้างแอปพลิเคชันแรกของคุณใน Logto คุณจะเห็นหน้าข้อความแสดงความยินดีซึ่งมีคู่มือการเชื่อมต่ออย่างละเอียด ให้ทำตามคู่มือเพื่อดูประสบการณ์ที่จะเกิดขึ้นในแอปพลิเคชันของคุณ
ผสานรวม Vue กับ Logto
- Logto Vue SDK ถูกสร้างขึ้นด้วย composition API และใช้ composables ดังนั้นจึงรองรับเฉพาะ Vue 3 เท่านั้น
- วิดีโอแนะนำมีให้รับชมบน ช่อง YouTube ของเรา
- โปรเจกต์ตัวอย่างฉบับเต็มสามารถดูได้ที่ SDK repository ของเรา
การติดตั้ง
- npm
- pnpm
- yarn
npm i @logto/vue
pnpm add @logto/vue
yarn add @logto/vue
เริ่มต้น LogtoClient
นำเข้าและใช้ createLogto
เพื่อติดตั้งปลั๊กอิน Logto:
import { createLogto, LogtoConfig } from '@logto/vue';
import { createApp } from 'vue';
import App from './App.vue';
// กำหนดค่าการเชื่อมต่อ Logto
const config: LogtoConfig = {
endpoint: '<your-logto-endpoint>',
appId: '<your-application-id>',
};
const app = createApp(App);
app.use(createLogto, config);
app.mount('#app');
กำหนดค่า 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
ยังมีสิ่งที่ต้องทำหลังจากที่ผู้ใช้ถูกเปลี่ยนเส้นทางกลับมายังแอปพลิเคชันของคุณจาก Logto มาจัดการให้ถูกต้องกัน
ก่อนอื่น สร้างหน้าคอลแบ็ก (callback) ดังนี้:
import { useHandleSignInCallback } from '@logto/vue';
import router from '@/router';
const { isLoading } = useHandleSignInCallback(() => {
// ทำบางอย่างเมื่อเสร็จสิ้น เช่น เปลี่ยนเส้นทางไปยังหน้าแรก
});
<template>
<!-- ขณะกำลังดำเนินการ -->
<p v-if="isLoading">กำลังเปลี่ยนเส้นทาง...</p>
</template>
แทรกโค้ดด้านล่างในเส้นทาง /callback
ของคุณ ซึ่ง ไม่ต้องการการยืนยันตัวตน (authentication):
// สมมติว่าใช้ vue-router
const router = createRouter({
routes: [
{
path: '/callback',
name: 'callback',
component: CallbackView,
},
],
});
สร้างฟังก์ชันลงชื่อเข้าใช้และออกจากระบบ
เรามี composable สองตัวคือ useHandleSignInCallback()
และ useLogto()
ที่ช่วยให้คุณจัดการโฟลว์การยืนยันตัวตนได้อย่างง่ายดาย
ก่อนเรียก .signIn()
โปรดตรวจสอบให้แน่ใจว่าคุณได้กำหนดค่า Redirect URI ใน Admin Console อย่างถูกต้องแล้ว
import { useLogto } from '@logto/vue';
// ดึงฟังก์ชัน signIn, signOut และตัวแปร isAuthenticated
const { signIn, signOut, isAuthenticated } = useLogto();
const onClickSignIn = () => signIn('http://localhost:3000/callback');
const onClickSignOut = () => signOut('http://localhost:3000');
<template>
<button v-if="!isAuthenticated" @click="onClickSignIn">ลงชื่อเข้าใช้</button>
<button v-else @click="onClickSignOut">ออกจากระบบ</button>
</template>
การเรียกใช้ .signOut()
จะล้างข้อมูล Logto ทั้งหมดในหน่วยความจำและ localStorage หากมีอยู่
จุดตรวจสอบ: ทดสอบแอปพลิเคชันของคุณ
ตอนนี้คุณสามารถทดสอบแอปพลิเคชันของคุณได้แล้ว:
- รันแอปพลิเคชันของคุณ คุณจะเห็นปุ่มลงชื่อเข้าใช้
- คลิกปุ่มลงชื่อเข้าใช้ SDK จะเริ่มกระบวนการลงชื่อเข้าใช้และเปลี่ยนเส้นทางคุณไปยังหน้าลงชื่อเข้าใช้ของ Logto
- หลังจากที่คุณลงชื่อเข้าใช้แล้ว คุณจะถูกเปลี่ยนเส้นทางกลับไปยังแอปพลิเคชันของคุณและเห็นปุ่มลงชื่อออก
- คลิกปุ่มลงชื่อออกเพื่อเคลียร์ที่เก็บโทเค็นและออกจากระบบ
เพิ่มตัวเชื่อมต่อ Azure AD
เพื่อเปิดใช้งานการลงชื่อเข้าใช้อย่างรวดเร็วและเพิ่มอัตราการเปลี่ยนผู้ใช้ ให้เชื่อมต่อกับ Vue ในฐานะผู้ให้บริการข้อมูลระบุตัวตน (Identity provider) ตัวเชื่อมต่อโซเชียลของ Logto ช่วยให้คุณสร้างการเชื่อมต่อนี้ได้ภายในไม่กี่นาที โดยสามารถกรอกพารามิเตอร์ได้หลายค่า
ในการเพิ่มตัวเชื่อมต่อโซเชียล ให้ทำตามขั้นตอนดังนี้:
- ไปที่ Console > Connectors > Social Connectors
- คลิก "Add social connector" และเลือก "Azure AD"
- ทำตามคู่มือ README กรอกข้อมูลที่จำเป็น และปรับแต่งการตั้งค่า

หากคุณกำลังทำตามคู่มือ Connector แบบ in-place คุณสามารถข้ามส่วนถัดไปได้
ตั้งค่า Azure AD
ตั้งค่า Microsoft Azure AD ใน Azure Portal
- ไปที่ Azure Portal และลงชื่อเข้าใช้ด้วยบัญชี Azure ของคุณ คุณต้องมีการสมัครใช้งานที่ใช้งานอยู่เพื่อเข้าถึง Microsoft Azure AD
- คลิก Azure Active Directory จากบริการที่มีให้ และคลิก App Registrations จากเมนูด้านซ้าย
- คลิก New Registration ที่ด้านบน กรอกคำอธิบาย เลือก access type ของคุณ และเพิ่ม Redirect URI ซึ่งจะเปลี่ยนเส้นทางผู้ใช้ไปยังแอปพลิเคชันหลังจากเข้าสู่ระบบ ในกรณีนี้จะเป็น
${your_logto_endpoint}/callback/${connector_id}
เช่นhttps://foo.logto.app/callback/${connector_id}
โดยสามารถดูconnector_id
ได้ที่แถบด้านบนของหน้ารายละเอียดตัวเชื่อมต่อใน Logto Admin Console คุณสามารถคัดลอกCallback URI
ในส่วนการตั้งค่าได้ - เลือก Web เป็น Platform
กรอกค่าการตั้งค่าใน Logto
Name | Type |
---|---|
clientId | string |
clientSecret | string |
tenantId | string |
cloudInstance | string |
Client ID
คุณสามารถค้นหา Application (client) ID ได้ในส่วน Overview ของแอปพลิเคชันที่คุณสร้างใหม่ใน Azure Portal
Client Secret
- ในแอปพลิเคชันที่คุณสร้างใหม่ ให้คลิก Certificates & Secrets เพื่อรับ client secret และคลิก New client secret ที่ด้านบน
- กรอกคำอธิบายและวันหมดอายุ
- ระบบจะแสดง client secret ของคุณเพียงครั้งเดียว ให้นำ value ไปกรอกในค่าการตั้งค่าตัวเชื่อมต่อ Logto และบันทึกไว้ในที่ปลอดภัย
Cloud Instance
โดยปกติจะเป็น https://login.microsoftonline.com/
ดูข้อมูลเพิ่มเติมได้ที่ Azure AD authentication endpoints
Tenant ID
Logto จะใช้ฟิลด์นี้เพื่อสร้าง authorization endpoints ค่านี้ขึ้นอยู่กับ access type ที่คุณเลือกตอนสร้างแอปพลิเคชันใน Azure Portal
- หากคุณเลือก Accounts in this organizational directory only สำหรับ access type ให้กรอก {TenantID} ของคุณ โดยสามารถดู tenant ID ได้ในส่วน Overview ของ Azure Active Directory ของคุณ
- หากคุณเลือก Accounts in any organizational directory สำหรับ access type ให้กรอก organizations
- หากคุณเลือก Accounts in any organizational directory or personal Microsoft accounts สำหรับ access type ให้กรอก common
- หากคุณเลือก Personal Microsoft accounts only สำหรับ access type ให้กรอก consumers
บันทึกการตั้งค่าของคุณ
โปรดตรวจสอบให้แน่ใจว่าคุณได้กรอกค่าที่จำเป็นในพื้นที่การตั้งค่าตัวเชื่อมต่อ Logto เรียบร้อยแล้ว คลิก "บันทึกและเสร็จสิ้น" (หรือ "บันทึกการเปลี่ยนแปลง") และตัวเชื่อมต่อ Azure AD ควรพร้อมใช้งานแล้ว
เปิดใช้งานตัวเชื่อมต่อ Azure AD ในประสบการณ์การลงชื่อเข้าใช้
เมื่อคุณสร้างตัวเชื่อมต่อโซเชียลสำเร็จแล้ว คุณสามารถเปิดใช้งานเป็นปุ่ม "ดำเนินการต่อด้วย Azure AD" ในประสบการณ์การลงชื่อเข้าใช้ (Sign-in Experience) ได้
- ไปที่ Console > ประสบการณ์การลงชื่อเข้าใช้ > สมัครและลงชื่อเข้าใช้
- (ไม่บังคับ) เลือก "ไม่เกี่ยวข้อง" สำหรับตัวระบุการสมัคร หากคุณต้องการเฉพาะการเข้าสู่ระบบโซเชียล
- เพิ่มตัวเชื่อมต่อ Azure AD ที่ตั้งค่าไว้แล้วในส่วน "เข้าสู่ระบบโซเชียล" (Social sign-in)

การทดสอบและการตรวจสอบความถูกต้อง
กลับไปที่แอป Vue ของคุณ ตอนนี้คุณควรจะสามารถลงชื่อเข้าใช้ด้วย Azure AD ได้แล้ว ขอให้สนุก!
อ่านเพิ่มเติม
กระบวนการสำหรับผู้ใช้ปลายทาง: 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 ไปจนถึงหัวข้อขั้นสูงและอื่น ๆ