ข้ามไปยังเนื้อหาหลัก

คู่มือทีละขั้นตอนสำหรับการพัฒนาตัวเชื่อมต่อโซเชียล

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

ขั้นตอนที่ 1: โคลนแพ็กเกจตัวเชื่อมต่อที่มีอยู่​

ในโฟลเดอร์ซอร์สของตัวเชื่อมต่อ คุณจะพบไฟล์ดังต่อไปนี้:

  • index.ts: ไฟล์หลักของตัวเชื่อมต่อ
  • constant.ts: ค่าคงที่ที่ใช้ในตัวเชื่อมต่อ
  • types.ts: ประเภท TypeScript ที่ใช้ในตัวเชื่อมต่อ
  • index.test.ts: เคสทดสอบสำหรับตัวเชื่อมต่อ
  • mock.ts: ข้อมูล mock ที่ใช้ในเคสทดสอบของตัวเชื่อมต่อ

นอกจากไฟล์เหล่านี้ คุณยังต้องเตรียมไฟล์ README.md เพื่ออธิบายตัวเชื่อมต่อ, ไฟล์ logo.svg (หรือ logo-dark.svg สำหรับประสบการณ์ dark mode ที่ดียิ่งขึ้น), และไฟล์ package.json เพื่อกำหนดข้อมูลแพ็กเกจ npm

ขั้นตอนที่ 2: แก้ไขไฟล์หลัก (index.ts)​

ในไฟล์ index.ts คุณจะพบกับตรรกะหลักของตัวเชื่อมต่อ โดยปกติจะมี 4 ฟังก์ชันที่คุณต้อง implement:

  • getAuthorizationUri: สร้าง URI สำหรับการอนุญาต (Authorization) ของแพลตฟอร์มโซเชียลภายนอก สำหรับ GitHub จะเป็น: https://github.com/login/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&state={state} โปรดดูเอกสารสำหรับนักพัฒนาของแพลตฟอร์มโซเชียลเป้าหมายของคุณเพื่อรับ URI ที่ถูกต้อง
  • authorizationCallbackHandler: ตรวจสอบความปลอดภัยของค่าพารามิเตอร์ที่ส่งกลับใน URI callback ของการอนุญาต ดึงค่า code สำหรับการอนุญาต และจัดการข้อผิดพลาดที่อาจเกิดขึ้น
  • getAccessToken: แลกเปลี่ยน code สำหรับการอนุญาตเป็นโทเค็นการเข้าถึง (Access token)
  • getUserInfo: ดึงข้อมูลผู้ใช้จากแพลตฟอร์มโซเชียลภายนอกโดยใช้โทเค็นการเข้าถึง

ตรรกะทั่วไปอื่น ๆ ส่วนใหญ่ถูกจัดการไว้ใน Logto connector kit แล้ว ซึ่งจะช่วยให้งานของคุณง่ายขึ้น

สุดท้าย ในตอนท้ายของไฟล์ คุณเพียงแค่ export อ็อบเจกต์ตัวเชื่อมต่อ โดยใช้โครงสร้างโค้ดเดียวกับตัวเชื่อมต่อ GitHub

const createGithubConnector: CreateConnector<SocialConnector> = async ({ getConfig }) => {
  return {
    metadata: defaultMetadata,
    type: ConnectorType.Social,
    configGuard: githubConfigGuard,
    getAuthorizationUri: getAuthorizationUri(getConfig),
    getUserInfo: getUserInfo(getConfig),
  };
};

ขั้นตอนที่ 3: ทดสอบตัวเชื่อมต่อ​

การทดสอบหน่วย (Unit test)​

เริ่มต้นด้วยการเขียนเคสทดสอบหน่วย และตรวจสอบให้แน่ใจว่าฟังก์ชันพื้นฐานทำงานถูกต้อง

การทดสอบในเครื่อง (Local test)​

  • ตั้งค่า Logto ในสภาพแวดล้อมเครื่องของคุณ: Logto มีหลายวิธีในการรันแบบ local คุณสามารถใช้ CLI, docker หรือ build จากซอร์สโค้ด ดูเอกสารสำหรับ รายละเอียดเพิ่มเติม
  • ลิงก์ตัวเชื่อมต่อที่คุณสร้างเองเข้ากับ Logto instance ของคุณ: ใช้ CLI เพื่อสร้าง symbolic link ของตัวเชื่อมต่อไปยัง Logto instance ดูรายละเอียดเพิ่มเติม 
    cd logto
    npx @logto/cli connector link -p .
  • หลังจากลิงก์ตัวเชื่อมต่อแล้ว คุณจะเห็นมันในโฟลเดอร์ <logto-root-path>/packages/core/connectors
  • รีสตาร์ท Logto instance ของคุณ แล้วไปที่ Logto Admin Console คุณควรจะเห็นตัวเชื่อมต่อในรายการตัวเชื่อมต่อโซเชียล
  • กำหนดค่าตัวเชื่อมต่อของคุณใน Console > ประสบการณ์การลงชื่อเข้าใช้ > ลงทะเบียนและลงชื่อเข้าใช้ > การลงชื่อเข้าใช้โซเชียล และทดลองใช้งานในแอปเดโมของเราด้วยฟีเจอร์ "Live preview"