ตั้งค่าการเข้าสู่ระบบโซเชียลด้วย OAuth 2.0 (Set up social login with OAuth 2.0 protocol)

ตัวเชื่อมต่อ Logto อย่างเป็นทางการสำหรับโปรโตคอล OAuth 2.0

เคล็ดลับ:

คู่มือนี้สมมติว่าคุณมีความเข้าใจพื้นฐานเกี่ยวกับ ตัวเชื่อมต่อ (Connectors) ของ Logto หากคุณยังไม่คุ้นเคย โปรดดูคู่มือ ตัวเชื่อมต่อ (Connectors) เพื่อเริ่มต้น

เริ่มต้นใช้งาน

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

• เพิ่มปุ่มเข้าสู่ระบบโซเชียล
• เชื่อมโยงบัญชีผู้ใช้กับข้อมูลระบุตัวตนโซเชียล
• ซิงค์ข้อมูลโปรไฟล์ผู้ใช้จากผู้ให้บริการโซเชียล
• เข้าถึง API ของบุคคลที่สามผ่านการจัดเก็บโทเค็นอย่างปลอดภัยใน Logto Secret Vault สำหรับงานอัตโนมัติ (เช่น แก้ไข Google Docs, จัดการกิจกรรมปฏิทินในแอปของคุณ)

ในการตั้งค่าฟีเจอร์การยืนยันตัวตนเหล่านี้ ให้สร้างตัวเชื่อมต่อ OAuth 2.0 ใน Logto ก่อน:

1. ไปที่ Logto console > Connector > Social connector
2. คลิก Add social connector เลือก OAuth 2.0 คลิก Next และทำตามบทแนะนำทีละขั้นตอนเพื่อดำเนินการเชื่อมต่อให้เสร็จสมบูรณ์

บันทึก:

ตัวเชื่อมต่อ OAuth เป็นตัวเชื่อมต่อประเภทพิเศษใน Logto คุณสามารถเพิ่มตัวเชื่อมต่อที่ใช้โปรโตคอล OAuth ได้หลายตัว

สร้างแอป 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 เพื่อรับโทเค็นการเข้าถึง

userInfoEndpoint: endpoint นี้ใช้โดยแอปพลิเคชันลูกค้าเพื่อขอข้อมูลเพิ่มเติมเกี่ยวกับผู้ใช้ เช่น ชื่อเต็ม อีเมล หรือรูปโปรไฟล์ โดยปกติจะเข้าถึงหลังจากแอปพลิเคชันลูกค้าได้รับโทเค็นการเข้าถึงจาก 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 จำเป็นต้องขอ scope ของ API ที่ต้องการและเก็บโทเค็นไว้

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

คำเตือน:

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

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

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

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

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

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

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

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

เคล็ดลับ:

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

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

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

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

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

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

บันทึก:

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

อ้างอิง

The OAuth 2.0 Authorization Framework