แอปตัวอย่าง OAuth 2.0

*เนื้อหานี้แปลโดยใช้ AI (เวอร์ชัน Beta) และอาจมีข้อผิดพลาด หากต้องการดูหน้านี้เป็นภาษาอังกฤษ ให้คลิกที่นี่

Roblox ให้ตัวอย่างแอป Node.js ที่แสดงวิธีใช้ OAuth 2.0 เพื่อให้ผู้ใช้ล็อกอินบัญชี Roblox ของพวกเขาและส่งข้อความไปยังประสบการณ์ของพวกเขาแอปนี้ใช้การไหลรหัสอนุญาต โดยไม่ต้องใช้รหัสอนุญาต โดยไม่มี PKCE และเหมาะสำหรับลูกค้าที่เป็นความลับเท่านั้น เช่น เซิร์ฟเวอร์ส่วนตัว


หลังจากดาวน์โหลดไฟล์ .zip แล้ว สกัดออกเป็นโฟลเดอร์ของตัวเอง

ลงทะเบียนแอป

ขั้นตอนแรกในการติดตั้งแอปคือการ ลงทะเบียนบนเว็บไซต์ Roblox และคัดลอก ID คลายและความลับไปยังสถานที่ปลอดภัยจากนั้นทำตามขั้นตอนการลงทะเบียนมาตรฐานด้วยการตั้งค่าเหล่านี้:

  1. ภายใต้ สิทธิ์ , เพิ่ม openid , profile และ universe-messaging-service:publish ขอบเขต
  2. ภายใต้ URL เปลี่ยนเส้นทาง เพิ่มการเปลี่ยนเส้นทาง http://localhost:3000/oauth/callback หากคุณต้องการใช้พอร์ตที่ไม่เป็นค่าเริ่มต้นสำหรับแอปของคุณ ให้ระบุไว้ที่นี่

ตั้งแปลงตัวแปรสภาพแวดล้อม

แทนที่จะเก็บไว้ในรหัส (ไม่แนะนำ) แอปใช้ตัวแปรสภาพแวดล้อมสำหรับรหัสลูกค้าและความลับของคุณกระบวนการเพิ่มตัวแปรสภาพแวดล้อมแตกต่างกันไปตามระบบปฏิบัติการ

บน Windows ให้รันคำสั่ง PowerShell ต่อไปนี้:

$env:ROBLOX_CLIENT_ID='your_client_id_here'

$env:ROBLOX_CLIENT_SECRET='your_client_secret_here'

$env:ROBLOX_PORT=3000 # Optional. Default is 3000.

บน Mac และส่วนใหญ่เป็นการกระจาย Linux ให้รันคำสั่งเหล่านี้ที่เทอร์มินัล:

export ROBLOX_CLIENT_ID=your_client_id_here

export ROBLOX_CLIENT_SECRET=your_client_secret_here

export ROBLOX_PORT=3000 # Optional. Default is 3000.

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

ติดตั้งความขึ้นอยู่

แอปมีความขึ้นอยู่กับไม่กี่รายการที่สามารถมองเห็นได้ใน package.json เพื่อติดตั้งให้ดำเนินการ:

npm ci

เรียกใช้แอป

เพื่อเริ่มต้นแอป ให้ดำเนินการ:

npm start

จากนั้นนําทางไปที่ http://localhost:3000 (หรือพอร์ตที่ไม่เป็นค่าเริ่มต้น) ในเบราว์เซอร์เว็บ

แอปจะเปลี่ยนเส้นทางคุณไปยังหน้าจอล็อกอินของ Roblox ทันทีที่จุดนั้นคุณสามารถล็อกอิน ตรวจสอบสิทธิ์ที่แอปร้องขอ และคลิก ยืนยันและให้การเข้าถึง Roblox จะเปลี่ยนเส้นทางคุณกลับไปที่ localhost ซึ่งคุณสามารถดูได้ว่าแอปตอนนี้แสดงข้อมูลผู้ใช้ขั้นต่ำบางอย่าง ลิงก์กลับไปที่โปรไฟล์ของคุณบน Roblox และฟิลด์ที่คุณสามารถใช้เพื่อส่งข้อความไปยังประสบการณ์ของคุณ

เกี่ยวกับแอป

ในเชิงกว้าง index.js ดำเนินการด้วยคำสั่งต่อไปนี้:

  1. เริ่มเซิร์ฟเวอร์เว็บใหม่โดยใช้ express
  2. ดึงการกำหนดค่า Roblox OpenID Connect (OIDC) ซึ่งรวมถึงจุดสิ้นสุดสำหรับการอนุญาต ข้อมูลผู้ใช้ ฯลฯสำหรับข้อมูลเพิ่มเติมเกี่ยวกับจุดจบเหล่านี้ ดู การตรวจสอบ OAuth 2.0
  3. สร้างไคลเอนต์ Open ID ใหม่โดยใช้ openid-client และรหัสผ่านที่เก็บไว้ของคุณไคลเอนต์นี้ทำให้กระบวนการสร้างและส่งคำขอ HTTP อย่างถูกต้องง่ายขึ้นอย่างมากในการส่งไปยังจุดสิ้นสุด OAuth 2.0
  4. กำหนดเส้นทางสำหรับแอปรวมถึงการเปลี่ยนเส้นทางสำหรับการไหลโลจินและการออกจากระบบและการโทรกลับ OAuth 2.0
  5. หลังจากล็อกอินสําเร็จแล้ว จะเก็บโทเค็นต่างๆ เป็นคุกกี้ร่วมกับข้อมูลผู้ใช้บางส่วนที่แสดงเป็น HTML ด้วยความช่วยเหลือจาก getHomeHtml.js