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

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

วิธีที่เร็วที่สุดในการเริ่มต้นคือคัดลอกรหัสจากตัวเชื่อมต่ออย่างเป็นทางการที่มีอยู่ แล้วปรับแต่งให้เหมาะกับความต้องการของคุณ ยกตัวอย่างเช่น ตัวเชื่อมต่อ 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: ตรวจสอบค่าพารามิเตอร์ที่ส่งกลับใน authorization callback URI, ดึง code สำหรับการอนุญาต และจัดการข้อผิดพลาดที่อาจเกิดขึ้น
  • getAccessToken: แลกเปลี่ยน code สำหรับการอนุญาตเป็นโทเค็นการเข้าถึง (access token)
  • getUserInfo: ดึงข้อมูลผู้ใช้จากแพลตฟอร์มโซเชียลภายนอกโดยใช้ access token

ตรรกะทั่วไปอื่น ๆ ส่วนใหญ่ถูกจัดการไว้ใน 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 มีหลายวิธีให้คุณรันในเครื่อง ไม่ว่าจะใช้ 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 คุณควรเห็นตัวเชื่อมต่อในรายการ social connectors
  • ตั้งค่าตัวเชื่อมต่อของคุณใน Console > Sign-in & account > Sign-up and sign-in > Social sign-in และลองใช้งานในแอปเดโมของเราด้วยฟีเจอร์ "Live preview"