ตั้งค่าการเข้าสู่ระบบโซเชียลด้วย 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 เพื่อรับ 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

อ้างอิง

The OAuth 2.0 Authorization Framework