วิธีเชื่อมต่อ OAuth สำหรับการตรวจสอบสิทธิ์การเข้าสู่ระบบของโปรเจ็กต์ OOOPEN Lab?

หากคุณต้องการให้ผู้เล่นล็อกอินเข้าสู่ระบบสมาชิกของคุณเอง (เว็บไซต์แบรนด์หรือศูนย์สมาชิก) ก่อนเริ่มตอบแบบทดสอบทางจิตวิทยาหรือโครงการแบบโต้ตอบ ฟีเจอร์ขั้นสูงของ OOOPEN Lab ที่ชื่อว่า “เชื่อมต่อบัญชีสมาชิกแบรนด์เพื่อล็อกอิน” จะมีขั้นตอนการล็อกอิน OAuth สองแบบให้เลือกใช้

ไม่ว่าคุณต้องการนำเข้าข้อมูลผู้ใช้ผ่านกลไก SSO ที่มีอยู่ หรือควบคุมสิทธิ์การตอบคำถามเพื่อจำกัดการเข้าร่วมเฉพาะสมาชิก บทความนี้จะอธิบายวิธีการตั้งค่ากระบวนการเข้าสู่ระบบ OAuth และมีตัวอย่างให้ดู!

สารบัญ

• วิธีเปิดใช้งาน OAuth ทำอย่างไร? มีตัวอย่างข้อมูลที่ได้รับกลับมาหรือไม่?
• วิธีการตั้งค่าแต่ละช่องมีอะไรบ้าง? คำอธิบายโดยละเอียดและตัวอย่างอยู่ด้านล่าง!
  • URL สำหรับเข้าสู่ระบบ OAuth
  • ประเภทการอนุญาตที่ส่งคืน (ประเภทการให้สิทธิ์)
  • URL สำหรับการแลกเปลี่ยนโทเค็น (แบบมีเงื่อนไข)
  • วิธีการรับข้อมูลผู้ใช้
  • URL ของ OpenID Connect (OIDC) (แบบมีเงื่อนไข)
  • URL API ข้อมูลผู้ใช้ (แบบมีเงื่อนไข)

วิธีเปิดใช้งาน OAuth? มีตัวอย่างข้อมูลการส่งคืนหรือไม่?

• ก่อนซื้อ โปรดไปที่ส่วนจัดการหลังบ้านของโปรเจ็กต์ แล้วคลิก “การตั้งค่าข้อกำหนดการบันทึก”
• ในหน้าต่างป๊อปอัพ ให้เลือก “การเข้าสู่ระบบ OAuth แบบกำหนดเอง” เพื่อตั้งค่าข้อมูลที่เกี่ยวข้องตามช่องต่างๆ
• ผสานการตั้งค่า “ชื่อแพลตฟอร์มของคุณ” และ “สีปุ่มเข้าสู่ระบบ” เพื่อปรับแต่งสไตล์ปุ่มเข้าสู่ระบบ (ดูภาพประกอบด้านล่าง)
• ก่อนเปิดตัวอย่างเป็นทางการ อย่าลืมสมัครเป็นผู้ใช้แบบชำระเงินและซื้อฟีเจอร์ขั้นสูง “เชื่อมต่อบัญชีสมาชิกแบรนด์เพื่อเข้าสู่ระบบ” เพื่อเปิดใช้งาน ( ฉันจะเลือกแผนได้อย่างไร? )

วิธีการตั้งค่าแต่ละฟิลด์? คำอธิบายโดยละเอียดและตัวอย่างอยู่ด้านล่าง!

URL สำหรับเข้าสู่ระบบ OAuth

• URL ที่เปิดขึ้นเมื่อผู้ใช้คลิก “เข้าสู่ระบบด้วย (แพลตฟอร์มของคุณ)” จะรวมพารามิเตอร์ URL redirect_uri (URLSearchParams) ไว้โดยอัตโนมัติ หลังจากผู้ใช้เข้าสู่ระบบแล้ว ให้เปลี่ยนเส้นทางผู้ใช้ไปยัง URL นั้น
  • หาก URL สำหรับเข้าสู่ระบบของคุณคือ:
    https://mycoolapp.com/oauth/login?param1=value1&param2=value2
• เมื่อผู้ใช้คลิกปุ่มเข้าสู่ระบบจาก OOOPEN Lab URL ที่เปิดขึ้นจะมีลักษณะดังนี้:
  https://mycoolapp.com/oauth/login?param1=value1&param2=value2&state=random_hash&redirect_uri=https://ooopenlab.cc/auth/0123456789abcdef/callback
  * หมายเหตุ: OOOPEN Lab จะเพิ่มพารามิเตอร์สองตัวโดยอัตโนมัติ ได้แก่ redirect_uri และ state
• หลังจากผู้ใช้ล็อกอินเข้าสู่หน้าเว็บของคุณเสร็จแล้ว ให้เปลี่ยนเส้นทางผู้ใช้กลับไปยัง redirect_uri และอาจใส่พารามิเตอร์ state security เข้าไปด้วยก็ได้
• แต่ละโมดูลจะมี redirect_uri เฉพาะของตนเอง หากผู้ให้บริการ OAuth ของคุณต้องการการตั้งค่าไวท์ลิสต์สำหรับ redirect_uri คุณสามารถคัดลอก URL จากส่วนที่แสดงด้านล่างได้

ประเภทการอนุญาตที่ส่งคืน (ประเภทการให้สิทธิ์)

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

• หากใช้ รหัสการอนุญาต ให้ใส่ ?code={code} ใน URL เมื่อทำการเปลี่ยนเส้นทางกลับไปยัง redirect_uri พารามิเตอร์นี้คือรหัสการอนุญาตที่คุณได้รับ และจะถูกนำไปใช้ในขั้นตอนการแลกเปลี่ยนโทเค็นถัดไป

• หากใช้ Implicit Flow ให้ใส่ ?access_token={access_token} ใน URL เมื่อทำการเปลี่ยนเส้นทางกลับไปยัง redirect_uri พารามิเตอร์นี้คือ access_token ที่ใช้ในการเรียก API ครั้งถัดไป

URL สำหรับการแลกเปลี่ยนโทเค็น (แบบมีเงื่อนไข)

• หากใช้รหัสการอนุญาตในขั้นตอนก่อนหน้า เมื่อผู้ใช้ถูกเปลี่ยนเส้นทางกลับมายัง OOOPEN Lab ระบบจะใช้ URL การแลกเปลี่ยนโทเค็นนี้เพื่อรับ access_token หรือ id_token
• คำขอจะถูกส่งโดยใช้รูปแบบ x-www-form-urlencoded POST โดยมีรหัสและ redirect_uri จากขั้นตอนก่อนหน้าเป็นพารามิเตอร์ในส่วน body

วิธีการขอรับข้อมูลผู้ใช้

เลือกวิธีการรับข้อมูลผู้ใช้ว่าจะใช้วิธีโปรโตคอล OpenID Connect หรือ API ทั่วไป จากนั้นตั้งค่า URL การเชื่อมต่อตามที่เลือก

URL ของ OpenID Connect (OIDC) (แบบมีเงื่อนไข)

หากคุณตั้งค่า OpenID Connect ไว้แล้ว OOOPEN Lab จะเชื่อมต่อโดยอัตโนมัติโดยใช้โทเค็นที่ตั้งค่าไว้ในขั้นตอนก่อนหน้า โดยจะให้ความสำคัญกับการเชื่อมต่อด้วย access_token ก่อน หากได้รับ id_token มาด้วย ก็จะใช้ id_token เช่นกัน

• คำขอจะถูกส่งโดยใช้ x-www-form-urlencoded POST:
• สำหรับการเชื่อมต่อโดยใช้ access_token นั้น access_token จะถูกรวมไว้ทั้งใน Bearer Header และในส่วน body ที่เข้ารหัสด้วย x-www-form-urlencoded เลือกวิธีการตรวจสอบความถูกต้องแบบใดแบบหนึ่งตามความต้องการของคุณ
• สำหรับการเชื่อมต่อโดยใช้ id_token นั้น id_token จะถูกรวมอยู่ในเนื้อหา x-www-form-urlencoded
• ข้อมูลที่ได้รับจาก OIDC อยู่ในรูปแบบมาตรฐาน ฟิลด์ย่อยคือตัวระบุเฉพาะที่ใช้แยกแยะผู้ใช้ หากมีการส่งฟิลด์อีเมลกลับมาด้วย ก็จะถูกบันทึกไว้ในบันทึกการตอบกลับเช่นกัน

ตัวอย่าง:
{
“sub”: “10769150350006150715113082367”,
อีเมล: “[email protected]”
…
}

URL API ข้อมูลผู้ใช้ (แบบมีเงื่อนไข)

คำขอจะถูกส่งโดยใช้เมธอด GET

• สำหรับการเชื่อมต่อโดยใช้ access_token นั้น access_token จะถูกรวมไว้ทั้งใน Bearer Header และใน URL query เลือกวิธีการตรวจสอบความถูกต้องแบบใดแบบหนึ่งตามความต้องการของคุณ
• API ต้องส่งคืนอ็อบเจ็กต์ JSON เดียว และต้องมีฟิลด์ id id นี้เป็นตัวระบุที่ไม่ซ้ำกันซึ่งใช้ในการแยกแยะผู้ใช้ หากมีการส่งฟิลด์อีเมลกลับมาด้วย อีเมลนั้นจะถูกบันทึกไว้ในบันทึกการตอบกลับเช่นกัน

ตัวอย่าง:
{
“id”: “user_id”,
อีเมล: “[email protected]”
…
}

ลงทะเบียนเป็นครีเอเตอร์และเริ่มสร้างสรรค์ผลงานได้เลยด้วยการทดลองใช้ฟรี!

เพียงคลิก “เข้าสู่ระบบ/ลงทะเบียน” ที่มุมบนขวาเพื่อสมัครเป็นครีเอเตอร์ ด้วยแผนฟรี คุณสามารถสร้าง แก้ไข และเผยแพร่โปรเจ็กต์ได้ไม่จำกัดจำนวน โดยไม่มีกำหนดเวลา!

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

ภาพประกอบในบทความ