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

ตัวเชื่อมต่อ Logto อย่างเป็นทางการสำหรับการลงชื่อเข้าใช้โซเชียล X (ชื่อเดิม Twitter)

เคล็ดลับ:

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

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

ตัวเชื่อมต่อ X (Twitter) ช่วยให้ผู้ใช้ปลายทางสามารถลงชื่อเข้าใช้แอปพลิเคชันของคุณด้วยบัญชี X (Twitter) ของตนเองผ่านโปรโตคอลการยืนยันตัวตน X OAuth 2.0

สร้างแอปใน X Developer Portal

ไปที่ X Developer Portal และลงชื่อเข้าใช้ด้วยบัญชี X ของคุณ หากยังไม่มีบัญชี คุณสามารถลงทะเบียนได้

จากนั้น สร้างแอปของคุณ

ขั้นตอนที่ 1: ไปยังส่วนสร้างแอป

เมื่อเข้าสู่ระบบแล้ว ให้ไปที่ส่วน "Projects & Apps" และคลิก "Create App" (หรือ "New App" ขึ้นอยู่กับหน้าตาอินเทอร์เฟซ)

ขั้นตอนที่ 2: กรอกรายละเอียดแอป

กรอกแบบฟอร์มด้วยข้อมูลต่อไปนี้:

• App Name: ระบุชื่อแอปพลิเคชันที่ไม่ซ้ำและสื่อความหมาย
• Application Description: (ไม่บังคับ) เพิ่มคำอธิบายสั้น ๆ ว่าแอปของคุณทำอะไร
• Website URL: ใส่ URL หน้าแรกของแอปพลิเคชันของคุณ
• Callback URL / Redirect URI: ในกรณีนี้จะเป็น ${your_logto_endpoint}/callback/${connector_id} เช่น https://foo.logto.app/callback/${connector_id} โดย connector_id สามารถดูได้ที่แถบด้านบนของหน้ารายละเอียดตัวเชื่อมต่อใน Logto Admin Console

ขั้นตอนที่ 3: เลือกสิทธิ์ (permissions) และขอบเขต (scopes)

เลือกสิทธิ์ที่แอปของคุณต้องการ สำหรับการเข้าสู่ระบบโซเชียลผ่าน X ให้แน่ใจว่าได้เปิดใช้งานขอบเขตที่จำเป็นคือ tweet.read และ users.read

ขั้นตอนที่ 4: บันทึกแอปของคุณ

คลิก "Create" หรือ "Save" เพื่อบันทึกและลงทะเบียนแอปของคุณ

หลังจากสร้างเสร็จ ให้ไปที่ส่วน "Keys and tokens" ของแอปเพื่อดึง OAuth 2.0 Client ID และ Client Secret ของคุณ

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

ในหน้ากำหนดค่าตัวเชื่อมต่อ Logto ของคุณ ให้กรอกข้อมูลในช่องต่อไปนี้ด้วยค่าที่ได้จากหน้า "Keys and tokens" ของแอปในส่วน "OAuth 2.0 Client ID and Client Secret":

• clientId: Client ID ของแอปของคุณ
• clientSecret: Client Secret ของแอปของคุณ

scope คือรายการ ขอบเขต (scopes) ที่คั่นด้วยช่องว่าง หากไม่ได้ระบุไว้ ขอบเขตเริ่มต้นคือ tweet.read users.read

ประเภทของการกำหนดค่า

Name	Type
clientId	string
clientSecret	string
scope	string

ทดสอบตัวเชื่อมต่อ X (Twitter)

เรียบร้อยแล้ว ขณะนี้ตัวเชื่อมต่อ X (Twitter) ควรพร้อมใช้งาน อย่าลืม เปิดใช้งานตัวเชื่อมต่อโซเชียลในประสบการณ์การลงชื่อเข้าใช้

แหล่งอ้างอิง

เอกสารสำหรับนักพัฒนา X

X OAuth 2.0 Authorization Code Flow พร้อม PKCE