วิธีตั้งค่าการเข้าสู่ระบบโซเชียล OAuth
คู่มือนี้จะแนะนำคุณตลอดการกำหนดค่าการเข้าสู่ระบบโซเชียล เพื่อให้ลูกค้าสามารถลงชื่อเข้าใช้พีซีไคลเอนต์โดยใช้บัญชี Google, Facebook, Apple, X หรือ Discord HandyCafe ใช้ขั้นตอนการให้สิทธิ์อนุญาตอุปกรณ์ (RFC 8628) ซึ่งได้รับการออกแบบมาสำหรับอุปกรณ์ที่ไม่มีเบราว์เซอร์เต็มรูปแบบ ลูกค้าสแกนรหัส QR ด้วยโทรศัพท์เพื่อตรวจสอบสิทธิ์
สิ่งที่คุณต้องการ
- ผู้ดูแลระบบเข้าถึงเซิร์ฟเวอร์ HandyCafe
- บัญชี Google Cloud Console (สำหรับ Google OAuth) หรือการเข้าถึงพอร์ทัลนักพัฒนาที่เทียบเท่าสำหรับผู้ให้บริการรายอื่น
- เซิร์ฟเวอร์ HandyCafe ทำงานและเข้าถึงได้บนเครือข่ายของคุณ
- พีซีไคลเอนต์ที่เชื่อมต่ออย่างน้อยหนึ่งเครื่องเพื่อทดสอบขั้นตอนการเข้าสู่ระบบ
วิธีการทำงานของ OAuth Device Flow ใน HandyCafe
ก่อนที่จะเข้าสู่การตั้งค่า ต่อไปนี้คือบทสรุปของโฟลว์:
- ลูกค้าที่พีซีไคลเอนต์ที่ไม่ได้ใช้งานคลิกปุ่มเข้าสู่ระบบโซเชียล (เช่น "ลงชื่อเข้าใช้ด้วย Google")
- ไคลเอนต์ส่งคำขอเริ่มต้น OAuth ไปยังเซิร์ฟเวอร์
- เซิร์ฟเวอร์ติดต่อกับจุดสิ้นสุดการอนุญาตอุปกรณ์ของผู้ให้บริการ และรับรหัสอุปกรณ์ รหัสผู้ใช้ และ URL การตรวจสอบ
- ไคลเอนต์แสดงรหัส QR และรหัสผู้ใช้บนหน้าจอไม่ได้ใช้งาน
- ลูกค้าสแกนรหัส QR ด้วยโทรศัพท์และรับรองความถูกต้องกับผู้ให้บริการ
- เซิร์ฟเวอร์จะสำรวจผู้ให้บริการจนกว่าการรับรองความถูกต้องจะเสร็จสิ้น
- เซิร์ฟเวอร์สร้างคำขอเข้าสู่ระบบ OAuth ที่ปรากฏบนหน้าคำขอ
- ผู้ดูแลระบบหรือแคชเชียร์อนุมัติคำขอ
- มีการสร้างบัญชีสมาชิกใหม่ (หรือเชื่อมโยงบัญชีที่มีอยู่แล้ว) และลูกค้าเข้าสู่ระบบแล้ว
วิธีตั้งค่า Google OAuth
Google เป็นผู้ให้บริการที่ใช้บ่อยที่สุด ส่วนนี้ครอบคลุมทุกขั้นตอนตั้งแต่การสร้างโปรเจ็กต์ Google Cloud ไปจนถึงการทดสอบการเข้าสู่ระบบครั้งแรก
ส่วน A: สร้างข้อมูลรับรอง Google Cloud
- เปิด Google Cloud Console ที่ https://console.cloud.google.com ในเบราว์เซอร์ของคุณ
- สร้างโครงการใหม่หรือเลือกโครงการที่มีอยู่ ตั้งชื่อให้เป็นที่รู้จัก เช่น "HandyCafe OAuth"
- ไปที่ API และบริการ > หน้าจอยินยอม OAuth
- เลือก ภายนอก เป็นประเภทผู้ใช้ (เว้นแต่คุณจะมีองค์กร Google Workspace และต้องการภายในเท่านั้น)
- กรอกข้อมูลในช่องที่ต้องกรอก: ชื่อแอป ("ชื่อร้านกาแฟของคุณ") อีเมลสนับสนุนผู้ใช้ และอีเมลติดต่อนักพัฒนา
- คลิก บันทึกและดำเนินการต่อ ในส่วนขอบเขตและผู้ใช้ทดสอบ คุณไม่จำเป็นต้องเพิ่มขอบเขตพิเศษ ขอบเขตอีเมลและโปรไฟล์เริ่มต้นนั้นเพียงพอแล้ว
- ไปที่ API และบริการ > ข้อมูลรับรอง
- คลิก สร้างข้อมูลรับรอง > รหัสไคลเอ็นต์ OAuth
- สำหรับประเภทแอปพลิเคชัน ให้เลือก ทีวีและอุปกรณ์อินพุตแบบจำกัด นี่เป็นสิ่งสำคัญ HandyCafe ใช้ขั้นตอนการให้สิทธิ์อนุญาตอุปกรณ์ ซึ่งต้องใช้ไคลเอ็นต์ประเภทนี้โดยเฉพาะ
- ป้อนชื่อสำหรับลูกค้า (เช่น "HandyCafe Device Flow")
- คลิก สร้าง
- คัดลอก รหัสไคลเอ็นต์ และ รหัสลับไคลเอ็นต์ จากกล่องโต้ตอบการยืนยัน เก็บไว้อย่างปลอดภัย คุณจะต้องมีทั้งสองค่าในส่วนถัดไป
ส่วน B: กำหนดค่าเซิร์ฟเวอร์ HandyCafe
- เปิดแอพพลิเคชั่น HandyCafe Server
- ไปที่ การตั้งค่า โดยใช้ไอคอนรูปเฟืองในแถบด้านข้างซ้าย
- เลือกแท็บ OAuth
- เปิดใช้งานการสลับ OAuth ที่ด้านบนของหน้า สิ่งนี้ทำให้สามารถเข้าสู่ระบบโซเชียลได้ทั่วโลกบนพีซีไคลเอนต์ทั้งหมด
- ค้นหาแถวผู้ให้บริการ Google ในรายการผู้ให้บริการ
- เปิดใช้งาน Google สลับเพื่อเปิดใช้งานผู้ให้บริการนี้
- วาง รหัสลูกค้า ของคุณจากขั้นตอนที่ 12 ลงในช่องรหัสลูกค้า
- วาง รหัสลับไคลเอนต์ ของคุณจากขั้นตอนที่ 12 ลงในช่องรหัสลับไคลเอนต์
- คลิก บันทึก เพื่อใช้การกำหนดค่า
ผลลัพธ์ที่คาดหวัง: แท็บ OAuth แสดงว่า Google เปิดใช้งานโดยกรอกข้อมูลรับรองของคุณ การตั้งค่าจะถูกส่งไปยังไคลเอนต์ที่เชื่อมต่อทั้งหมด
ส่วน C: ทดสอบขั้นตอนการเข้าสู่ระบบ
- ไปที่พีซีไคลเอนต์ที่เชื่อมต่อ ตอนนี้หน้าจอว่างควรแสดงส่วนการเข้าสู่ระบบโซเชียลด้วยปุ่มเข้าสู่ระบบ Google
- คลิกปุ่มเข้าสู่ระบบ Google บนหน้าจอไคลเอ็นต์ที่ไม่ได้ใช้งาน
- ไคลเอนต์แสดงรหัส QR และรหัสผู้ใช้ (สตริงตัวอักษรและตัวเลขแบบสั้น)
- สแกนรหัส QR ด้วยโทรศัพท์ของคุณ จะเปิดหน้าการยืนยันอุปกรณ์ของ Google
- ลงชื่อเข้าใช้ด้วยบัญชี Google และป้อนรหัสผู้ใช้เมื่อได้รับแจ้ง
- อนุญาตการสมัคร
ผลลัพธ์ที่คาดหวัง: บนเซิร์ฟเวอร์ เสียงการแจ้งเตือนจะเล่นและมีรายการใหม่ปรากฏบนหน้าคำขอ คำขอจะแสดงชื่อบัญชี Google ที่อยู่อีเมล และพีซีไคลเอนต์ที่เริ่มต้นการเข้าสู่ระบบ
วิธีอนุมัติคำขอเข้าสู่ระบบ
การเข้าสู่ระบบ OAuth ทุกครั้งจะสร้างคำขอที่ต้องได้รับการอนุมัติจากผู้ดูแลระบบหรือแคชเชียร์ก่อนที่ลูกค้าจะสามารถเข้าถึงได้
- เมื่อคำขอเข้าสู่ระบบมาถึง เสียงการแจ้งเตือนจะเล่นบนเซิร์ฟเวอร์และป้ายสถานะจะปรากฏบนไอคอนหน้าคำขอในแถบด้านข้าง
- ไปที่หน้า คำขอ
- คำขอที่รอดำเนินการแสดง:
- ชื่อผู้ให้บริการ (เช่น Google)
- ชื่อที่แสดงจากผู้ให้บริการ (เช่น "John Smith")
- ที่อยู่อีเมล (เช่น "john@example.com")
- พีซีไคลเอนต์ที่เริ่มต้นคำขอ (ชื่อโฮสต์หรือชื่อที่แสดง)
- การประทับเวลา
- ตรวจสอบรายละเอียดคำขอ ตรวจสอบว่าบุคคลที่พีซีไคลเอนต์ตรงกับข้อมูลบัญชี
- คลิก อนุมัติ เพื่อยอมรับคำขอ
ผลลัพธ์ที่คาดหวัง: หากไม่มีบัญชีสมาชิกที่มีอยู่เชื่อมโยงกับข้อมูลประจำตัว OAuth นี้ บัญชีสมาชิกใหม่จะถูกสร้างขึ้นโดยอัตโนมัติ มีการใช้ชื่อที่แสดงและอีเมลจากผู้ให้บริการ ลูกค้าเข้าสู่ระบบแล้ว และพีซีไคลเอนต์เปลี่ยนจากหน้าจอว่างเป็นเพจออนไลน์ หากบัญชีสมาชิกเคยเชื่อมโยงกับข้อมูลระบุตัวตน OAuth นี้ สมาชิกที่มีอยู่จะเข้าสู่ระบบโดยตรง
เคล็ดลับ: หากคำขอเข้าสู่ระบบน่าสงสัย (เช่น พีซีไม่มีผู้ดูแลหรือคำขอดูเป็นอัตโนมัติ) ให้คลิก ปฏิเสธ แทน ลูกค้าจะเห็นข้อความ "การเข้าถึงถูกปฏิเสธ" และลองอีกครั้งได้
วิธีการตั้งค่า Facebook OAuth
- เปิดพอร์ทัลนักพัฒนา Facebook ที่ https://developers.facebook.com .
- สร้างแอปใหม่ เลือกประเภทแอป ผู้บริโภค
- ไปที่หน้า การตั้งค่า > พื้นฐาน ของแอป สังเกต รหัสแอป และ ความลับของแอป
- ไปที่ เพิ่มผลิตภัณฑ์ และเพิ่ม การเข้าสู่ระบบ Facebook สำหรับอุปกรณ์
- ในการตั้งค่าการเข้าสู่ระบบด้วย Facebook สำหรับอุปกรณ์ ให้เพิ่ม URI การเปลี่ยนเส้นทางของคุณ หากพอร์ทัลกำหนด
- เปิดเซิร์ฟเวอร์ HandyCafe และไปที่ การตั้งค่า > OAuth
- ค้นหาแถวผู้ให้บริการ Facebook
- เปิดใช้งานการสลับ Facebook
- วาง รหัสแอป ลงในช่องรหัสลูกค้า
- วาง App Secret ลงในช่อง Client Secret
- คลิก บันทึก
ผลลัพธ์ที่คาดหวัง: Facebook ปรากฏเป็นผู้ให้บริการที่เปิดใช้งาน หน้าจอไคลเอ็นต์ไม่ได้ใช้งานจะแสดงปุ่มเข้าสู่ระบบ Facebook ควบคู่ไปกับผู้ให้บริการรายอื่นที่เปิดใช้งาน
วิธีการตั้งค่า Discord OAuth
- เปิดพอร์ทัลนักพัฒนา Discord ที่ https://discord.com/developers/applications .
- สร้างแอปพลิเคชันใหม่ ตั้งชื่อตามร้านกาแฟของคุณ
- ไปที่ส่วน OAuth2 ในแถบด้านข้างซ้าย
- คัดลอก รหัสไคลเอ็นต์ และสร้าง รหัสลับไคลเอ็นต์ เก็บความลับอย่างปลอดภัย เนื่องจาก Discord จะแสดงเพียงครั้งเดียวเท่านั้น
- เปิดเซิร์ฟเวอร์ HandyCafe และไปที่ การตั้งค่า > OAuth
- ค้นหาแถวผู้ให้บริการ Discord (ถูกปิดใช้งานโดยค่าเริ่มต้น)
- เปิดใช้งานการสลับ Discord
- วาง รหัสลูกค้า ลงในช่องรหัสลูกค้า
- วาง รหัสลับไคลเอ็นต์ ลงในช่องรหัสลับไคลเอ็นต์
- คลิก บันทึก
ผลลัพธ์ที่คาดหวัง: ขณะนี้ Discord พร้อมใช้งานเป็นตัวเลือกการเข้าสู่ระบบบนหน้าจอไคลเอ็นต์ที่ไม่ได้ใช้งาน
วิธีอนุญาตให้เข้าสู่ระบบโดยไม่มีเครดิต
ตามค่าเริ่มต้น HandyCafe อนุญาตให้ลูกค้าที่ผ่านการรับรองความถูกต้องของ OAuth สามารถเข้าสู่ระบบได้ แม้ว่าพวกเขาจะไม่มียอดคงเหลือในกระเป๋าสตางค์หรือเครดิตเวลาก็ตาม คุณสามารถเปลี่ยนพฤติกรรมนี้ได้
- ไปที่ การตั้งค่า > OAuth
- ค้นหาปุ่มสลับ อนุญาตให้เข้าสู่ระบบโดยไม่มีเครดิต
- หากเปิดใช้งาน (ค่าเริ่มต้น) ลูกค้าที่รับรองความถูกต้องผ่าน OAuth จะสามารถเข้าสู่ระบบได้โดยไม่คำนึงถึงยอดเงินคงเหลือ แคชเชียร์สามารถเริ่มเซสชันแบบชำระเงินภายหลังได้
- หากปิดใช้งาน ลูกค้าจะต้องมียอดคงเหลือในกระเป๋าสตางค์หรือเครดิตเวลาเพื่อเข้าสู่ระบบ ลูกค้าที่มียอดคงเหลือเป็นศูนย์จะเห็นข้อความแจ้งให้ไปที่ร้านแคชเชียร์เพื่อเติมเงิน
- คลิก บันทึก หลังจากเปลี่ยนปุ่มสลับ
ผลลัพธ์ที่คาดหวัง: ลักษณะการทำงานจะมีผลทันทีสำหรับคำขอเข้าสู่ระบบใหม่ เซสชันที่มีอยู่จะไม่ได้รับผลกระทบ
วิธีเชื่อมโยงข้อมูลประจำตัว OAuth กับสมาชิกที่มีอยู่
หากลูกค้ามีบัญชีสมาชิกอยู่แล้ว (สร้างโดยแคชเชียร์) แล้วเข้าสู่ระบบผ่าน OAuth เป็นครั้งแรก กระบวนการอนุมัติสามารถเชื่อมโยงข้อมูลประจำตัว OAuth กับบัญชีที่มีอยู่ได้
- เมื่อคำขอเข้าสู่ระบบ OAuth มาถึงหน้าคำขอ ให้ตรวจสอบว่าอีเมลตรงกับสมาชิกที่มีอยู่หรือไม่
- หากระบบตรวจพบการจับคู่ กล่องโต้ตอบการอนุมัติจะเสนอให้เชื่อมโยงข้อมูลประจำตัว OAuth กับสมาชิกที่มีอยู่แทนการสร้างบัญชีใหม่
- อนุมัติคำขอโดยเลือกตัวเลือกลิงก์ที่เลือกไว้
ผลลัพธ์ที่คาดหวัง: บัญชีสมาชิกที่มีอยู่ได้รับลิงก์ OAuth การเข้าสู่ระบบในอนาคตจากผู้ให้บริการรายนี้จะข้ามขั้นตอนการอนุมัติและเข้าสู่ระบบของสมาชิกโดยตรง (หลังจากการอนุมัติครั้งแรก)
ข้อผิดพลาดทั่วไปที่ควรหลีกเลี่ยง
- การใช้ไคลเอ็นต์ OAuth ผิดประเภทใน Google Cloud Console คุณต้องเลือก "ทีวีและอุปกรณ์อินพุตที่จำกัด" เมื่อสร้างรหัสไคลเอ็นต์ OAuth หากคุณเลือก "แอปพลิเคชันเว็บ" หรือ "แอปเดสก์ท็อป" ขั้นตอนการอนุญาตอุปกรณ์จะไม่ทำงานและไคลเอ็นต์จะไม่ได้รับรหัสอุปกรณ์
- ลืมเปิดใช้งานการสลับ OAuth ทั่วโลก การเปิดใช้งานผู้ให้บริการแต่ละรายยังไม่เพียงพอ ต้องเปิดสวิตช์ OAuth หลักที่ด้านบนของหน้าการตั้งค่า OAuth ด้วย
- ไม่อนุมัติคำขอเข้าสู่ระบบ การเข้าสู่ระบบ OAuth ต้องได้รับการอนุมัติอย่างชัดเจนจากเซิร์ฟเวอร์ หากไม่มีใครตรวจสอบหน้าคำขอ ลูกค้าจะรออยู่ที่หน้าจอปกติโดยไม่มีกำหนด พิจารณามอบหมายให้แคชเชียร์ตรวจสอบคำขอในช่วงเวลาที่มีผู้คนหนาแน่น
- ปล่อยให้รหัสอุปกรณ์หมดอายุ รหัสอุปกรณ์มีอายุการใช้งานที่จำกัด (ปกติคือ 5-10 นาที) หากลูกค้าใช้เวลานานเกินไปในการสแกนโค้ด QR และตรวจสอบสิทธิ์ โค้ดจะหมดอายุและพวกเขาจะต้องเริ่มต้นใหม่ แนะนำให้ลูกค้าสแกนทันที
- การวางข้อมูลรับรองโดยมีช่องว่างเพิ่มเติม เมื่อคัดลอก ID ไคลเอ็นต์หรือรหัสลับไคลเอ็นต์จากคอนโซลของผู้ให้บริการ ตรวจสอบให้แน่ใจว่าไม่มีการเว้นวรรคนำหน้าหรือต่อท้าย ช่องว่างที่เกินมาจะทำให้การรับรองความถูกต้องล้มเหลว
- ลืมเผยแพร่แอป Google OAuth แอป Google ในโหมด "การทดสอบ" อนุญาตให้ผู้ใช้ทดสอบในจำนวนจำกัดเท่านั้น หากต้องการอนุญาตให้ลูกค้าเข้าสู่ระบบ คุณต้องเผยแพร่แอปผ่านหน้าหน้าจอคำยินยอม OAuth และทำตามขั้นตอนการยืนยันที่จำเป็น
- การผสม ID ไคลเอ็นต์และความลับไคลเอ็นต์ ค่าเหล่านี้เป็นสองค่าที่แตกต่างกัน รหัสลูกค้าเป็นแบบสาธารณะ ความลับของลูกค้าจะต้องถูกเก็บเป็นความลับ การสลับจะทำให้เกิดความล้มเหลวในการตรวจสอบสิทธิ์
- ไม่ได้กำหนดค่าชื่อร้านกาแฟ ชื่อร้านกาแฟจากการตั้งค่า HandyCafe ของคุณจะปรากฏบนหน้าจอไคลเอ็นต์ที่ไม่ได้ใช้งานในระหว่างขั้นตอน OAuth ชื่อว่างเปล่าหรือชื่อเริ่มต้นดูไม่เป็นมืออาชีพ ตั้งชื่อร้านกาแฟของคุณในการตั้งค่า > ทั่วไป ก่อนที่จะเปิดใช้งาน OAuth