สำหรับเพื่อนใหม่ของเรา:

Logto คือทางเลือกแทน Auth0 ที่ออกแบบมาสำหรับแอปและผลิตภัณฑ์ SaaS ยุคใหม่ โดยมีทั้งบริการ Cloud และ Open-source เพื่อช่วยให้คุณเปิดตัวระบบการจัดการเอกลักษณ์และการเข้าถึง (IAM) ได้อย่างรวดเร็ว สนุกกับการยืนยันตัวตน (การยืนยันตัวตน), การอนุญาต (การอนุญาต), และการจัดการหลายผู้เช่า ครบจบในที่เดียว

เราแนะนำให้เริ่มต้นด้วย tenant สำหรับการพัฒนาแบบฟรีบน Logto Cloud เพื่อให้คุณสามารถสำรวจฟีเจอร์ทั้งหมดได้อย่างง่ายดาย

ในบทความนี้ เราจะพาคุณไปทีละขั้นตอนเพื่อสร้างประสบการณ์ลงชื่อเข้าใช้ OAuth2 (การยืนยันตัวตนของผู้ใช้) อย่างรวดเร็วด้วย Vanilla JS และ Logto

ข้อกำหนดเบื้องต้น

• มี Logto instance ที่พร้อมใช้งาน ดู หน้าแนะนำ เพื่อเริ่มต้นใช้งาน
• มีความรู้พื้นฐานเกี่ยวกับ Vanilla JS
• มีบัญชี OAuth2 ที่ใช้งานได้

สร้างแอปพลิเคชันใน Logto

Logto สร้างขึ้นบนพื้นฐานของการยืนยันตัวตน OpenID Connect (OIDC) และการอนุญาต OAuth 2.0 โดยรองรับการจัดการข้อมูลระบุตัวตนแบบรวมศูนย์ข้ามหลายแอปพลิเคชัน ซึ่งมักเรียกว่า การลงชื่อเข้าใช้ครั้งเดียว (Single Sign-On; SSO)

ในการสร้างแอปพลิเคชัน แอปหน้าเดียว (Single page app) ของคุณ เพียงทำตามขั้นตอนเหล่านี้:

1. เปิด Logto Console ในส่วน "เริ่มต้นใช้งาน" ให้คลิกที่ลิงก์ "ดูทั้งหมด" เพื่อเปิดรายการเฟรมเวิร์กของแอปพลิเคชัน หรือคุณสามารถไปที่ Logto Console > Applications แล้วคลิกปุ่ม "สร้างแอปพลิเคชัน"
2. ในหน้าต่างที่เปิดขึ้น ให้คลิกที่ส่วน "แอปหน้าเดียว (Single page app)" หรือกรองเฟรมเวิร์ก "แอปหน้าเดียว (Single page app)" ทั้งหมดที่มีโดยใช้ช่องกรองด่วนทางซ้ายมือ จากนั้นคลิกที่การ์ดเฟรมเวิร์ก "Vanilla JS" เพื่อเริ่มสร้างแอปพลิเคชันของคุณ
3. กรอกชื่อแอปพลิเคชัน เช่น "Bookstore" แล้วคลิก "สร้างแอปพลิเคชัน"

🎉 เยี่ยมมาก! คุณเพิ่งสร้างแอปพลิเคชันแรกของคุณใน Logto คุณจะเห็นหน้าข้อความแสดงความยินดีซึ่งมีคู่มือการเชื่อมต่ออย่างละเอียด ให้ทำตามคู่มือเพื่อดูประสบการณ์ที่จะเกิดขึ้นในแอปพลิเคชันของคุณ

ผสานรวม Vanilla JS กับ Logto

เคล็ดลับ:

• vanilla-js SDK เป็น framework-agnostic คุณสามารถใช้กับเฟรมเวิร์กฝั่งหน้าเว็บใดก็ได้โดยเขียนตัวห่อ (wrapper) ให้เหมาะสม
• โปรเจกต์ตัวอย่างมีให้ใน SDK repository ของเรา

การติดตั้ง

เลือกตัวจัดการแพ็กเกจที่คุณชื่นชอบ หรือใช้ CDN เพื่อติดตั้ง Logto Browser SDK

npm

npm i @logto/browser

pnpm

pnpm add @logto/browser

yarn

yarn add @logto/browser

CDN

<!-- ขอบคุณ jsdelivr เป็นพิเศษ -->
<script type="module">
  import LogtoClient from 'https://cdn.jsdelivr.net/npm/@logto/[email protected]/+esm';
</script>

เริ่มต้น LogtoClient

นำเข้าและเริ่มต้นอินสแตนซ์ LogtoClient โดยส่ง config เข้าไป:

index.js

import LogtoClient from '@logto/browser';

const logtoClient = new LogtoClient({
  endpoint: '<your-logto-endpoint>',
  appId: '<your-application-id>',
});

คุณสามารถค้นหา endpoint และ appId ได้จากหน้ารายละเอียดแอปพลิเคชันใน Logto Console

สร้างฟังก์ชันลงชื่อเข้าใช้และออกจากระบบ

กำหนดค่า redirect URIs

ก่อนที่เราจะลงลึกในรายละเอียด นี่คือภาพรวมประสบการณ์ของผู้ใช้ปลายทาง กระบวนการลงชื่อเข้าใช้สามารถสรุปได้ดังนี้:

1. แอปของคุณเรียกใช้งานเมธอดลงชื่อเข้าใช้
2. ผู้ใช้จะถูกเปลี่ยนเส้นทางไปยังหน้าลงชื่อเข้าใช้ของ Logto สำหรับแอปเนทีฟ ระบบจะเปิดเบราว์เซอร์ของระบบ
3. ผู้ใช้ลงชื่อเข้าใช้และถูกเปลี่ยนเส้นทางกลับไปยังแอปของคุณ (ตามที่กำหนดไว้ใน redirect URI)

เกี่ยวกับการลงชื่อเข้าใช้แบบเปลี่ยนเส้นทาง (redirect-based sign-in)

1. กระบวนการยืนยันตัวตนนี้เป็นไปตามโปรโตคอล OpenID Connect (OIDC) และ Logto บังคับใช้มาตรการรักษาความปลอดภัยอย่างเข้มงวดเพื่อปกป้องการลงชื่อเข้าใช้ของผู้ใช้
2. หากคุณมีหลายแอป คุณสามารถใช้ผู้ให้บริการข้อมูลระบุตัวตน (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 มาจัดการขั้นตอนนี้อย่างถูกต้องกัน

pages/Callback.js

const callbackHandler = async (logtoClient) => {
  await logtoClient.handleSignInCallback(window.location.href);

  if (!logtoClient.isAuthenticated) {
    // จัดการกรณีลงชื่อเข้าใช้ไม่สำเร็จ
    alert('ลงชื่อเข้าใช้ไม่สำเร็จ');
    return;
  }

  // จัดการกรณีลงชื่อเข้าใช้สำเร็จ
  window.location.assign('/');
};

สร้างฟังก์ชันลงชื่อเข้าใช้และออกจากระบบ

logtoClient มีเมธอด signIn และ signOut เพื่อช่วยให้คุณจัดการกระบวนการการยืนยันตัวตน (Authentication) ได้อย่างง่ายดาย

บันทึก:

ก่อนเรียก .signIn() โปรดตรวจสอบให้แน่ใจว่าคุณได้กำหนดค่า Redirect URI ใน Admin Console อย่างถูกต้องแล้ว

pages/Home.js

const isAuthenticated = await logtoClient.isAuthenticated();

// ฟังก์ชันสำหรับคลิกปุ่มลงชื่อเข้าใช้
const onClickSignIn = () => {
  logtoClient.signIn('http://localhost:3000/callback');
};
// ฟังก์ชันสำหรับคลิกปุ่มออกจากระบบ
const onClickSignOut = () => {
  logtoClient.signOut('http://localhost:3000');
};

const button = document.createElement('button');
button.innerHTML = isAuthenticated ? 'Sign Out' : 'Sign In';
button.addEventListener('click', isAuthenticated ? onClickSignOut : onClickSignIn);

document.body.appendChild(button);

การเรียกใช้ .signOut() จะล้างข้อมูล Logto ทั้งหมดในหน่วยความจำและ localStorage หากมีอยู่

จัดการสถานะการยืนยันตัวตน

ใน Logto SDK โดยทั่วไปเราสามารถใช้ logtoClient.isAuthenticated เพื่อตรวจสอบสถานะการยืนยันตัวตน (authentication) หากผู้ใช้ลงชื่อเข้าใช้แล้ว ค่านี้จะเป็น true หากยังไม่ได้ลงชื่อเข้าใช้ ค่านี้จะเป็น false

ในแอป vanilla JS ของคุณ คุณสามารถใช้สถานะ isAuthenticated เพื่อแสดงหรือซ่อนปุ่มลงชื่อเข้าใช้และลงชื่อออกแบบอัตโนมัติ มาดูวิธีการทำกัน

const redirectUrl = 'http://localhost:3000/callback';
const baseUrl = 'http://localhost:3000';

// การแสดงผลปุ่มลงชื่อเข้าใช้และลงชื่อออกแบบมีเงื่อนไข
const render = async (logtoClient) => {
  const isAuthenticated = await logtoClient.isAuthenticated();
  const container = document.querySelector('#container');

  const onClickSignIn = () => logtoClient.signIn(redirectUrl);
  const onClickSignOut = () => logtoClient.signOut(baseUrl);

  const button = document.createElement('button');
  button.innerHTML = isAuthenticated ? 'Sign Out' : 'Sign In';
  button.addEventListener('click', isAuthenticated ? onClickSignOut : onClickSignIn);

  container.append(button);
};

จุดตรวจสอบ: ทดสอบแอปพลิเคชันของคุณ

ตอนนี้คุณสามารถทดสอบแอปพลิเคชันของคุณได้แล้ว:

1. รันแอปพลิเคชันของคุณ คุณจะเห็นปุ่มลงชื่อเข้าใช้
2. คลิกปุ่มลงชื่อเข้าใช้ SDK จะเริ่มกระบวนการลงชื่อเข้าใช้และเปลี่ยนเส้นทางคุณไปยังหน้าลงชื่อเข้าใช้ของ Logto
3. หลังจากที่คุณลงชื่อเข้าใช้แล้ว คุณจะถูกเปลี่ยนเส้นทางกลับไปยังแอปพลิเคชันของคุณและเห็นปุ่มลงชื่อออก
4. คลิกปุ่มลงชื่อออกเพื่อเคลียร์ที่เก็บโทเค็นและออกจากระบบ

เพิ่มตัวเชื่อมต่อ OAuth2

เพื่อเปิดใช้งานการลงชื่อเข้าใช้อย่างรวดเร็วและเพิ่มอัตราการเปลี่ยนผู้ใช้ ให้เชื่อมต่อกับ Vanilla JS ในฐานะผู้ให้บริการข้อมูลระบุตัวตน (Identity provider) ตัวเชื่อมต่อโซเชียลของ Logto ช่วยให้คุณสร้างการเชื่อมต่อนี้ได้ภายในไม่กี่นาที โดยสามารถกรอกพารามิเตอร์ได้หลายค่า

ในการเพิ่มตัวเชื่อมต่อโซเชียล ให้ทำตามขั้นตอนดังนี้:

1. ไปที่ Console > Connectors > Social Connectors
2. คลิก "Add social connector" และเลือก "OAuth2"
3. ทำตามคู่มือ README กรอกข้อมูลที่จำเป็น และปรับแต่งการตั้งค่า

บันทึก:

หากคุณกำลังทำตามคู่มือ Connector แบบ in-place คุณสามารถข้ามส่วนถัดไปได้

ตั้งค่า Standard OAuth 2.0 app

สร้างแอป OAuth ของคุณ

เมื่อคุณเปิดหน้านี้ เราเชื่อว่าคุณทราบแล้วว่าต้องการเชื่อมต่อกับผู้ให้บริการข้อมูลระบุตัวตนโซเชียลรายใด สิ่งแรกที่ต้องทำคือยืนยันว่าผู้ให้บริการข้อมูลระบุตัวตนรองรับโปรโตคอล OAuth ซึ่งเป็นข้อกำหนดเบื้องต้นสำหรับการตั้งค่าตัวเชื่อมต่อที่ถูกต้อง จากนั้นให้ทำตามคำแนะนำของผู้ให้บริการข้อมูลระบุตัวตนเพื่อสมัครและสร้างแอปที่เกี่ยวข้องสำหรับการอนุญาต OAuth

กำหนดค่าตัวเชื่อมต่อของคุณ

เรารองรับเฉพาะประเภท grant แบบ "Authorization Code" เท่านั้นเพื่อเหตุผลด้านความปลอดภัย และเหมาะสมกับกรณีการใช้งานของ Logto อย่างสมบูรณ์

clientId และ clientSecret สามารถดูได้ที่หน้ารายละเอียดแอป OAuth ของคุณ

clientId: client ID คือรหัสระบุที่ไม่ซ้ำกันซึ่งใช้ระบุแอปพลิเคชันลูกค้าในระหว่างการลงทะเบียนกับเซิร์ฟเวอร์การอนุญาต รหัสนี้ใช้โดยเซิร์ฟเวอร์การอนุญาตเพื่อตรวจสอบตัวตนของแอปพลิเคชันลูกค้าและเชื่อมโยงโทเค็นการเข้าถึงที่ได้รับอนุญาตกับแอปพลิเคชันลูกค้านั้น

clientSecret: client secret คือคีย์ลับที่ออกให้กับแอปพลิเคชันลูกค้าโดยเซิร์ฟเวอร์การอนุญาตในระหว่างการลงทะเบียน แอปพลิเคชันลูกค้าจะใช้คีย์ลับนี้เพื่อยืนยันตัวตนกับเซิร์ฟเวอร์การอนุญาตเมื่อขอโทเค็นการเข้าถึง client secret ถือเป็นข้อมูลลับและควรเก็บไว้อย่างปลอดภัยตลอดเวลา

tokenEndpointAuthMethod: วิธีการยืนยันตัวตนที่ token endpoint ใช้โดยแอปพลิเคชันลูกค้าเพื่อยืนยันตัวตนกับเซิร์ฟเวอร์การอนุญาตเมื่อขอโทเค็นการเข้าถึง หากต้องการค้นหาวิธีที่รองรับ ให้ดูที่ฟิลด์ token_endpoint_auth_methods_supported ที่มีอยู่ใน discovery endpoint ของ OpenID Connect ของผู้ให้บริการ OAuth 2.0 หรือดูเอกสารที่เกี่ยวข้องของผู้ให้บริการ OAuth 2.0

clientSecretJwtSigningAlgorithm (ไม่บังคับ): ต้องระบุเฉพาะเมื่อ tokenEndpointAuthMethod เป็น client_secret_jwt อัลกอริทึมสำหรับลงนาม JWT ด้วย client secret ใช้โดยแอปพลิเคชันลูกค้าเพื่อลงนาม JWT ที่ส่งไปยังเซิร์ฟเวอร์การอนุญาตระหว่างการขอโทเค็น

scope: พารามิเตอร์ scope ใช้ระบุชุดทรัพยากรและสิทธิ์ที่แอปพลิเคชันลูกค้าต้องการเข้าถึง โดยปกติ scope จะถูกกำหนดเป็นรายการค่าที่คั่นด้วยช่องว่างซึ่งแสดงถึงสิทธิ์เฉพาะ ตัวอย่างเช่น ค่า scope เป็น "read write" อาจหมายถึงแอปพลิเคชันลูกค้าต้องการสิทธิ์อ่านและเขียนข้อมูลของผู้ใช้

คุณควรค้นหา authorizationEndpoint, tokenEndpoint และ userInfoEndpoint ได้จากเอกสารของผู้ให้บริการโซเชียล

authenticationEndpoint: endpoint นี้ใช้เริ่มต้นกระบวนการยืนยันตัวตน โดยปกติจะเกี่ยวข้องกับการที่ผู้ใช้เข้าสู่ระบบและให้สิทธิ์แก่แอปพลิเคชันลูกค้าในการเข้าถึงทรัพยากรของตน

tokenEndpoint: endpoint นี้ใช้โดยแอปพลิเคชันลูกค้าเพื่อขอโทเค็นการเข้าถึงที่สามารถใช้เข้าถึงทรัพยากรที่ร้องขอได้ โดยปกติแอปพลิเคชันลูกค้าจะส่งคำขอไปยัง token endpoint พร้อม grant type และ authorization code เพื่อรับ access token

userInfoEndpoint: endpoint นี้ใช้โดยแอปพลิเคชันลูกค้าเพื่อขอข้อมูลเพิ่มเติมเกี่ยวกับผู้ใช้ เช่น ชื่อเต็ม อีเมล หรือรูปโปรไฟล์ โดยปกติจะเข้าถึง user info endpoint หลังจากแอปพลิเคชันลูกค้าได้รับ access token จาก token endpoint แล้ว

Logto ยังมีฟิลด์ profileMap ให้ผู้ใช้ปรับแต่งการแมปข้อมูลจากโปรไฟล์ของผู้ให้บริการโซเชียลซึ่งมักจะไม่เป็นมาตรฐาน คีย์คือชื่อฟิลด์โปรไฟล์ผู้ใช้มาตรฐานของ Logto และค่าควรเป็นชื่อฟิลด์ของโปรไฟล์โซเชียล ในปัจจุบัน Logto สนใจเฉพาะ 'id', 'name', 'avatar', 'email' และ 'phone' จากโปรไฟล์โซเชียล โดย 'id' เป็นฟิลด์ที่จำเป็น ส่วนอื่นเป็นฟิลด์ไม่บังคับ

responseType และ grantType สามารถเป็นค่า FIXED ได้เฉพาะกับ authorization code grant type ดังนั้นเราจึงตั้งให้เป็นตัวเลือกและจะเติมค่าเริ่มต้นให้อัตโนมัติ

ตัวอย่างเช่น คุณสามารถดู Google user profile response และดังนั้น profileMap ควรเป็นแบบนี้:

{
  "id": "sub",
  "avatar": "picture"
}

บันทึก:

เรามีคีย์ customConfig (ไม่บังคับ) สำหรับใส่พารามิเตอร์ที่คุณปรับแต่งเอง ผู้ให้บริการข้อมูลระบุตัวตนโซเชียลแต่ละรายอาจมีความแตกต่างจากมาตรฐาน OAuth หากผู้ให้บริการของคุณยึดตามมาตรฐาน OAuth อย่างเคร่งครัด คุณไม่จำเป็นต้องสนใจ customConfig

ประเภทของการตั้งค่า

ชื่อ	ประเภท	จำเป็นต้องระบุ
authorizationEndpoint	string	true
userInfoEndpoint	string	true
clientId	string	true
clientSecret	string	true
tokenEndpointResponseType	enum	false
responseType	string	false
grantType	string	false
tokenEndpoint	string	false
scope	string	false
customConfig	Record<string, string>	false
profileMap	ProfileMap	false

ฟิลด์ ProfileMap	ประเภท	จำเป็นต้องระบุ	ค่าเริ่มต้น
id	string	false	id
name	string	false	name
avatar	string	false	avatar
email	string	false	email
phone	string	false	phone

การตั้งค่าทั่วไป

ต่อไปนี้เป็นการตั้งค่าทั่วไปที่แม้จะไม่ขัดขวางการเชื่อมต่อกับผู้ให้บริการข้อมูลระบุตัวตนของคุณ แต่ก็อาจมีผลต่อประสบการณ์การยืนยันตัวตนของผู้ใช้ปลายทาง

ชื่อและโลโก้ของปุ่มโซเชียล

หากคุณต้องการแสดงปุ่มโซเชียลในหน้าลงชื่อเข้าใช้ คุณสามารถตั้งค่า ชื่อ และ โลโก้ (โหมดมืดและโหมดสว่าง) ของผู้ให้บริการข้อมูลระบุตัวตนโซเชียล เพื่อช่วยให้ผู้ใช้จดจำตัวเลือกการเข้าสู่ระบบโซเชียลได้

ชื่อผู้ให้บริการข้อมูลระบุตัวตน

ตัวเชื่อมต่อโซเชียลแต่ละตัวจะมีชื่อผู้ให้บริการข้อมูลระบุตัวตน (IdP) เฉพาะเพื่อแยกแยะตัวตนของผู้ใช้ ตัวเชื่อมต่อทั่วไปจะใช้ชื่อ IdP แบบคงที่ ส่วนตัวเชื่อมต่อแบบกำหนดเองต้องใช้ค่าที่ไม่ซ้ำกัน ดูข้อมูลเพิ่มเติมเกี่ยวกับ ชื่อ IdP

ซิงค์ข้อมูลโปรไฟล์

ในตัวเชื่อมต่อ OAuth คุณสามารถตั้งค่านโยบายการซิงค์ข้อมูลโปรไฟล์ เช่น ชื่อผู้ใช้และรูปโปรไฟล์ โดยเลือกได้ดังนี้:

• ซิงค์เฉพาะตอนสมัครสมาชิก: ข้อมูลโปรไฟล์จะถูกดึงครั้งเดียวเมื่อผู้ใช้ลงชื่อเข้าใช้ครั้งแรก
• ซิงค์ทุกครั้งที่ลงชื่อเข้าใช้: ข้อมูลโปรไฟล์จะอัปเดตทุกครั้งที่ผู้ใช้ลงชื่อเข้าใช้

เก็บโทเค็นเพื่อเข้าถึง API ของบุคคลที่สาม (ไม่บังคับ)

หากคุณต้องการเข้าถึง API ของผู้ให้บริการข้อมูลระบุตัวตนและดำเนินการต่าง ๆ ด้วยการอนุญาตของผู้ใช้ (ไม่ว่าจะผ่าน social sign-in หรือการเชื่อมโยงบัญชี) Logto จำเป็นต้องขอขอบเขต API เฉพาะและเก็บโทเค็นไว้

1. เพิ่มขอบเขตที่ต้องการในฟิลด์ scope ตามคำแนะนำข้างต้น
2. เปิดใช้งาน Store tokens for persistent API access ในตัวเชื่อมต่อ OAuth ของ Logto Logto จะเก็บ access token ไว้อย่างปลอดภัยใน Secret Vault
3. สำหรับผู้ให้บริการข้อมูลระบุตัวตน OAuth/OIDC แบบ มาตรฐาน ต้องรวม scope offline_access เพื่อรับ refresh token ป้องกันการขอความยินยอมจากผู้ใช้ซ้ำ

คำเตือน:

เก็บ client secret ของคุณให้ปลอดภัยและอย่าเปิดเผยในโค้ดฝั่ง client หากถูกเปิดเผย ให้สร้างใหม่ทันทีในหน้าตั้งค่าแอปของผู้ให้บริการข้อมูลระบุตัวตนของคุณ

ใช้งานตัวเชื่อมต่อ OAuth

เมื่อคุณสร้างตัวเชื่อมต่อ OAuth และเชื่อมต่อกับผู้ให้บริการข้อมูลระบุตัวตนแล้ว คุณสามารถนำไปใช้ใน flow สำหรับผู้ใช้ปลายทางได้ เลือกตัวเลือกที่ตรงกับความต้องการของคุณ:

เปิดใช้งานปุ่ม social sign-in

1. ใน Logto Console ไปที่ Sign-in & account > Sign-up and sign-in
2. เพิ่มตัวเชื่อมต่อ OAuth ในส่วน Social sign-in เพื่อให้ผู้ใช้ยืนยันตัวตนกับผู้ให้บริการข้อมูลระบุตัวตนของคุณ

ดูข้อมูลเพิ่มเติมเกี่ยวกับ ประสบการณ์ social sign-in

เชื่อมโยงหรือยกเลิกการเชื่อมโยงบัญชีโซเชียล

ใช้ Account API เพื่อสร้าง Account Center แบบกำหนดเองในแอปของคุณ ให้ผู้ใช้ที่ลงชื่อเข้าใช้เชื่อมโยงหรือยกเลิกการเชื่อมโยงบัญชีโซเชียลของตน ดูตัวอย่างการใช้งาน Account API

เคล็ดลับ:

สามารถเปิดใช้งานตัวเชื่อมต่อ OAuth เฉพาะสำหรับการเชื่อมโยงบัญชีและเข้าถึง API ได้ โดยไม่ต้องเปิดใช้งานสำหรับ social sign-in ก็ได้

เข้าถึง API ของผู้ให้บริการข้อมูลระบุตัวตนและดำเนินการต่าง ๆ

แอปพลิเคชันของคุณสามารถดึง access token ที่เก็บไว้จาก Secret Vault เพื่อเรียก API ของผู้ให้บริการข้อมูลระบุตัวตนและทำงาน backend อัตโนมัติ ความสามารถเฉพาะขึ้นอยู่กับผู้ให้บริการข้อมูลระบุตัวตนและขอบเขตที่คุณร้องขอ ดูคู่มือการดึงโทเค็นที่เก็บไว้เพื่อเข้าถึง API

จัดการข้อมูลระบุตัวตนโซเชียลของผู้ใช้

หลังจากผู้ใช้เชื่อมโยงบัญชีโซเชียลแล้ว ผู้ดูแลระบบสามารถจัดการการเชื่อมต่อนั้นใน Logto Console ได้ดังนี้:

1. ไปที่ Logto console > User management และเปิดโปรไฟล์ของผู้ใช้
2. ใต้ Social connections ค้นหารายการผู้ให้บริการข้อมูลระบุตัวตนแล้วคลิก Manage
3. ในหน้านี้ ผู้ดูแลระบบสามารถจัดการการเชื่อมต่อโซเชียลของผู้ใช้ ดูข้อมูลโปรไฟล์ทั้งหมดที่ได้รับและซิงค์จากบัญชีโซเชียล และตรวจสอบสถานะ access token

บันทึก:

การตอบกลับ access token ของผู้ให้บริการข้อมูลระบุตัวตนบางรายจะไม่มีข้อมูล scope ที่เฉพาะเจาะจง ดังนั้น Logto จึงไม่สามารถแสดงรายการสิทธิ์ที่ผู้ใช้อนุญาตได้โดยตรง อย่างไรก็ตาม ตราบใดที่ผู้ใช้ได้ให้ความยินยอมกับขอบเขตที่ร้องขอระหว่างการอนุญาต แอปพลิเคชันของคุณจะมีสิทธิ์ที่เกี่ยวข้องเมื่อเข้าถึง OAuth API

บันทึกการตั้งค่าของคุณ

โปรดตรวจสอบให้แน่ใจว่าคุณได้กรอกค่าที่จำเป็นในพื้นที่การตั้งค่าตัวเชื่อมต่อ Logto เรียบร้อยแล้ว คลิก "บันทึกและเสร็จสิ้น" (หรือ "บันทึกการเปลี่ยนแปลง") และตัวเชื่อมต่อ OAuth2 ควรพร้อมใช้งานแล้ว

เปิดใช้งานตัวเชื่อมต่อ OAuth2 ในประสบการณ์การลงชื่อเข้าใช้

เมื่อคุณสร้างตัวเชื่อมต่อโซเชียลสำเร็จแล้ว คุณสามารถเปิดใช้งานเป็นปุ่ม "ดำเนินการต่อด้วย OAuth2" ในประสบการณ์การลงชื่อเข้าใช้ (Sign-in Experience) ได้

1. ไปที่ Console > ประสบการณ์การลงชื่อเข้าใช้ > สมัครและลงชื่อเข้าใช้
2. (ไม่บังคับ) เลือก "ไม่เกี่ยวข้อง" สำหรับตัวระบุการสมัคร หากคุณต้องการเฉพาะการเข้าสู่ระบบโซเชียล
3. เพิ่มตัวเชื่อมต่อ OAuth2 ที่ตั้งค่าไว้แล้วในส่วน "เข้าสู่ระบบโซเชียล" (Social sign-in)

การทดสอบและการตรวจสอบความถูกต้อง

กลับไปที่แอป Vanilla JS ของคุณ ตอนนี้คุณควรจะสามารถลงชื่อเข้าใช้ด้วย OAuth2 ได้แล้ว ขอให้สนุก!

อ่านเพิ่มเติม

กระบวนการสำหรับผู้ใช้ปลายทาง: 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 ไปจนถึงหัวข้อขั้นสูงและอื่น ๆ