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

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

ผสานรวม GitHub OAuth app เพื่อเปิดใช้งานการลงชื่อเข้าใช้ด้วย GitHub, การเชื่อมโยงบัญชี และการเข้าถึง GitHub API อย่างปลอดภัย

เคล็ดลับ:

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

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

ตัวเชื่อมต่อ GitHub ช่วยให้ผสานรวม OAuth 2.0 เพื่อให้แอปของคุณสามารถ:

  • เพิ่มการยืนยันตัวตน (Authentication) “Sign-in with GitHub”
  • เชื่อมโยงบัญชีผู้ใช้กับอัตลักษณ์ GitHub
  • ซิงค์ข้อมูลโปรไฟล์ผู้ใช้จาก GitHub
  • เข้าถึง GitHub API ผ่านการจัดเก็บโทเค็นอย่างปลอดภัยใน Logto Secret Vault สำหรับงานอัตโนมัติ (เช่น การสร้าง issue ใน GitHub, จัดการ repository จากแอปของคุณ)

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

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

ขั้นตอนที่ 1: สร้าง OAuth app บน GitHub​

ก่อนที่คุณจะใช้ GitHub เป็นผู้ให้บริการการยืนยันตัวตน คุณต้องสร้าง OAuth App บน GitHub เพื่อรับข้อมูลประจำตัว OAuth 2.0

  1. ไปที่ GitHub และลงชื่อเข้าใช้ด้วยบัญชีของคุณ หรือสร้างบัญชีใหม่หากจำเป็น
  2. ไปที่ Settings > Developer settings > OAuth apps
  3. คลิก New OAuth App เพื่อขึ้นทะเบียนแอปใหม่:
    • Application name: กรอกชื่อที่สื่อความหมายสำหรับแอปของคุณ
    • Homepage URL: กรอก URL หน้าแรกของแอปพลิเคชันของคุณ
    • Authorization callback URL: คัดลอก Callback URI จากตัวเชื่อมต่อ GitHub ของคุณใน Logto แล้ววางที่นี่ หลังจากผู้ใช้ลงชื่อเข้าใช้ด้วย GitHub แล้ว พวกเขาจะถูกเปลี่ยนเส้นทางมาที่นี่พร้อมรหัสการอนุญาตที่ Logto ใช้เพื่อดำเนินการยืนยันตัวตนให้เสร็จสมบูรณ์
    • Application description: (ไม่บังคับ) เพิ่มคำอธิบายสั้น ๆ เกี่ยวกับแอปของคุณ
  4. คลิก Register application เพื่อสร้าง OAuth App
บันทึก:

เราแนะนำว่าไม่ควรติ๊กเลือก Enable Device Flow เพราะผู้ใช้ที่ลงชื่อเข้าใช้ด้วย GitHub บนอุปกรณ์มือถือจะต้องยืนยันการลงชื่อเข้าใช้ครั้งแรกในแอป GitHub บนมือถือ ซึ่งผู้ใช้ GitHub จำนวนมากไม่ได้ติดตั้งแอป GitHub บนโทรศัพท์ อาจทำให้ขั้นตอนการลงชื่อเข้าใช้ติดขัด เปิดใช้งานเฉพาะเมื่อคุณคาดว่าผู้ใช้จะยืนยันการลงชื่อเข้าใช้ผ่านแอป GitHub บนมือถือเท่านั้น ดูรายละเอียดเกี่ยวกับ device flow

สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการตั้งค่า GitHub OAuth Apps ดูที่ Creating an OAuth App

ขั้นตอนที่ 2: ตั้งค่าตัวเชื่อมต่อ Logto ของคุณ​

หลังจากสร้าง OAuth app ใน GitHub แล้ว คุณจะถูกเปลี่ยนเส้นทางไปยังหน้ารายละเอียดซึ่งคุณสามารถคัดลอก Client ID และสร้าง Client secret ได้

  1. คัดลอก Client ID จาก GitHub OAuth app ของคุณแล้ววางลงในช่อง clientId ใน Logto
  2. คลิก Generate a new client secret ใน GitHub เพื่อสร้าง secret ใหม่ จากนั้นคัดลอกและวางลงในช่อง clientSecret ใน Logto
  3. คลิก Save and Done ใน Logto เพื่อเชื่อมต่อระบบข้อมูลระบุตัวตนของคุณกับ GitHub
คำเตือน:

เก็บรักษา Client secret ของคุณให้ปลอดภัยและอย่าเปิดเผยในโค้ดฝั่งไคลเอนต์ Client secret ของ GitHub ไม่สามารถกู้คืนได้หากสูญหาย — คุณจะต้องสร้างใหม่เท่านั้น

ขั้นตอนที่ 3: ตั้งค่าขอบเขต (Scopes) (ไม่บังคับ)​

ขอบเขต (Scopes) กำหนดสิทธิ์ที่แอปของคุณร้องขอจากผู้ใช้ และควบคุมว่าแอปของคุณจะเข้าถึงข้อมูลใดจากบัญชี GitHub ของพวกเขาได้บ้าง

ใช้ช่อง Scopes ใน Logto เพื่อร้องขอสิทธิ์เพิ่มเติมจาก GitHub เลือกวิธีการต่อไปนี้ตามความต้องการของคุณ:

ตัวเลือกที่ 1: ไม่ต้องการขอบเขต API เพิ่มเติม​

  • เว้นว่างช่อง Scopes ในตัวเชื่อมต่อ GitHub ของคุณใน Logto
  • ขอบเขตเริ่มต้น read:user จะถูกขอโดยอัตโนมัติเพื่อให้ Logto สามารถดึงข้อมูลผู้ใช้พื้นฐาน (เช่น อีเมล ชื่อ รูปโปรไฟล์) ได้อย่างถูกต้อง

ตัวเลือกที่ 2: ขอขอบเขตเพิ่มเติมขณะลงชื่อเข้าใช้​

  • ดู GitHub scopes สำหรับ OAuth apps ทั้งหมด และเพิ่มเฉพาะขอบเขตที่แอปของคุณต้องการ
  • กรอกขอบเขตทั้งหมดที่ต้องการในช่อง Scopes โดยคั่นด้วยช่องว่าง
  • ขอบเขตที่คุณระบุที่นี่จะเขียนทับค่าตั้งต้น ดังนั้นควรใส่ขอบเขตการยืนยันตัวตนเสมอ: read:user
  • ขอบเขตเพิ่มเติมที่พบบ่อย เช่น:
    • repo: ควบคุม repository ส่วนตัวทั้งหมด
    • public_repo: เข้าถึง repository สาธารณะ
    • user:email: เข้าถึงอีเมลของผู้ใช้
    • notifications: เข้าถึงการแจ้งเตือน
  • ตรวจสอบให้แน่ใจว่าขอบเขตทั้งหมดสะกดถูกต้องและใช้งานได้ ขอบเขตที่ผิดหรือไม่รองรับจะทำให้เกิดข้อผิดพลาด "Invalid scope" จาก GitHub

ตัวเลือกที่ 3: ขอขอบเขตเพิ่มเติมภายหลัง​

  • หลังจากผู้ใช้ลงชื่อเข้าใช้แล้ว คุณสามารถร้องขอขอบเขตเพิ่มเติมตามต้องการโดยเริ่ม federated social authorization flow ใหม่และอัปเดต token set ของผู้ใช้
  • ขอบเขตเพิ่มเติมเหล่านี้ไม่จำเป็นต้องกรอกในช่อง Scopes ของตัวเชื่อมต่อ GitHub ใน Logto และสามารถทำได้ผ่าน Social Verification API ของ Logto

เมื่อทำตามขั้นตอนเหล่านี้ ตัวเชื่อมต่อ GitHub ของคุณใน Logto จะร้องขอสิทธิ์ที่แอปของคุณต้องการอย่างพอดี — ไม่มากหรือน้อยเกินไป

เคล็ดลับ:

หากแอปของคุณร้องขอขอบเขตเหล่านี้เพื่อเข้าถึง GitHub API และดำเนินการต่าง ๆ อย่าลืมเปิดใช้งาน Store tokens for persistent API access ในตัวเชื่อมต่อ GitHub ของ Logto ดูรายละเอียดในหัวข้อถัดไป

ขั้นตอนที่ 4: การตั้งค่าทั่วไป​

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

ซิงค์ข้อมูลโปรไฟล์​

ในตัวเชื่อมต่อ GitHub คุณสามารถตั้งค่านโยบายการซิงค์ข้อมูลโปรไฟล์ เช่น ชื่อผู้ใช้และรูปโปรไฟล์ ได้ดังนี้:

  • ซิงค์เฉพาะตอนสมัครสมาชิก: ดึงข้อมูลโปรไฟล์ครั้งเดียวเมื่อผู้ใช้ลงชื่อเข้าใช้ครั้งแรก
  • ซิงค์ทุกครั้งที่ลงชื่อเข้าใช้: อัปเดตข้อมูลโปรไฟล์ทุกครั้งที่ผู้ใช้ลงชื่อเข้าใช้

เก็บโทเค็นเพื่อเข้าถึง GitHub APIs (ไม่บังคับ)​

หากคุณต้องการเข้าถึง GitHub APIs และดำเนินการต่าง ๆ ด้วยการอนุญาตของผู้ใช้ (ไม่ว่าจะผ่าน social sign-in หรือ account linking) Logto จำเป็นต้องขอขอบเขต API ที่เกี่ยวข้องและเก็บโทเค็นไว้

  1. เพิ่มขอบเขตที่ต้องการตามคำแนะนำข้างต้น
  2. เปิดใช้งาน Store tokens for persistent API access ในตัวเชื่อมต่อ GitHub ของ Logto Logto จะเก็บ GitHub access token ไว้อย่างปลอดภัยใน Secret Vault
บันทึก:

เมื่อใช้ OAuth App ของ GitHub ตามที่อธิบายไว้ในคู่มือนี้ คุณจะไม่ได้รับ refresh token จาก GitHub เพราะ access token จะไม่มีวันหมดอายุ เว้นแต่ผู้ใช้จะเพิกถอนด้วยตนเอง ดังนั้นคุณไม่จำเป็นต้องเพิ่ม offline_access ในช่อง Scopes — การเพิ่มอาจทำให้เกิดข้อผิดพลาด

หากคุณต้องการให้ access token หมดอายุหรือใช้ refresh token ให้พิจารณาเชื่อมต่อกับ GitHub App แทน ศึกษา ความแตกต่างระหว่าง GitHub Apps และ OAuth Apps

ขั้นตอนที่ 5: ทดสอบการเชื่อมต่อของคุณ (ไม่บังคับ)​

ก่อนเปิดใช้งานจริง ให้ทดสอบการเชื่อมต่อ GitHub ของคุณ:

  1. ใช้ตัวเชื่อมต่อใน Logto development tenant
  2. ตรวจสอบว่าผู้ใช้สามารถลงชื่อเข้าใช้ด้วย GitHub ได้
  3. ตรวจสอบว่าขอบเขตที่ร้องขอถูกต้อง
  4. ทดสอบเรียก API หากคุณเก็บโทเค็นไว้

GitHub OAuth Apps สามารถใช้งานได้กับบัญชีผู้ใช้ GitHub ทันที — ไม่จำเป็นต้องมีผู้ใช้ทดสอบหรือขออนุมัติแอปเหมือนบางแพลตฟอร์มอื่น

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

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

เปิดใช้งาน “Sign-in with GitHub”​

  1. ใน Logto Console ไปที่ Sign-in experience > Sign-up and sign-in
  2. เพิ่มตัวเชื่อมต่อ GitHub ในส่วน Social sign-in เพื่อให้ผู้ใช้ยืนยันตัวตนด้วย GitHub

เรียนรู้เพิ่มเติมเกี่ยวกับ ประสบการณ์การเข้าสู่ระบบโซเชียล

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

เคล็ดลับ:

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

เข้าถึง GitHub API และดำเนินการต่าง ๆ​

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

จัดการอัตลักษณ์ GitHub ของผู้ใช้​

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

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

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

อ้างอิง​

เอกสารสำหรับนักพัฒนา GitHub - เกี่ยวกับแอป

เอกสารสำหรับนักพัฒนา GitHub - การสร้าง OAuth App

เอกสารขอบเขตของ GitHub OAuth App