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

Roblox ให้ตัวอย่างแอปเป็นไนท์เจลที่แสดงวิธีการใช้ OAuth 2.0 เพื่อให้ผู้ใช้ล็อกอินบัญชี Roblox ของพวกเขาและส่งข้อความไปยังประสบการณ์ของพวกเขา แอปนี้ใช้ รหัสอẩีย์

หลังจากดาวน์โหลดไฟล์ .zip ให้สกรีนชุดไปยังโฟลเดอร์ของตัวเอง

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

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

1. ภายใต้ การอนุญาต เพิ่ม openid``profile และ 2> universe-messaging-service:publish2> สเก็บของ
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) ซึ่งรวมถึงเวลาจุดสิ้นสุดสำหรับการรับอนุญาต ข้อมูลผู้ใช้ ฯลฯ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเวลาเหล่านี้ให้ดูที่ ออเธอร์ 2.0 การรับการอนุญา
3. สร้างลูกค้า Open ID ใหม่โดยใช้ openid-client และรหัสเข้าถึงที่เก็บไว้ของคุณ ลูกค้านี้สร้างกระบวนการที่เรียบง่ายไปยังการส่งคำขอ HTTP ไปยังเวิร์ดเพอร์ท OAuth 2.0 อย่างถูกต้อง
4. กำหนดเส้นทางสำหรับแอป รวมถึงการเปลี่ยนทิศทางสำหรับการล็อกอินและออกจากระบบและการโทรกลับ OAuth 2.0
5. หลังจากเข้าสู่ระบบเรียบร้อยแล้ว จะเก็บคุกกี้ต่างๆ เช่นเดียวกับข้อมูลผู้ใช้บางอย่างที่ปรากฏเป็นรหัส HTML ด้วยความช่วยเหลือจาก getHomeHtml.js