วิธีผสานรวม Google OAuth 2.0 สำหรับการเข้าสู่ระบบเว็บไซต์ของบุคคลที่สาม

```html

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

ก่อนที่เราจะเริ่มต้น มาทำความเข้าใจก่อนว่า OAuth 2.0 คืออะไร

OAuth 2.0 คืออะไร

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

โปรโตคอล OAuth 2.0 เกี่ยวข้องกับบทบาทต่อไปนี้:

1. เจ้าของทรัพยากร: โดยปกติคือผู้ใช้ ซึ่งเป็นเจ้าของทรัพยากรที่ได้รับการป้องกัน เช่น รูปภาพ โปรไฟล์ส่วนตัว ฯลฯ
2. ไคลเอนต์: แอปพลิเคชันของบุคคลที่สามที่ต้องการเข้าถึงทรัพยากรที่ได้รับการป้องกันของเจ้าของทรัพยากร
3. เซิร์ฟเวอร์การอนุญาต: เซิร์ฟเวอร์ที่รับผิดชอบในการตรวจสอบสิทธิ์เจ้าของทรัพยากรและอนุญาตให้ไคลเอนต์เข้าถึงทรัพยากร
4. เซิร์ฟเวอร์ทรัพยากร: เซิร์ฟเวอร์ที่เก็บทรัพยากรที่ได้รับการป้องกันและจัดเตรียม API เพื่อเข้าถึง

โปรโตคอล OAuth 2.0 บรรลุการอนุญาตผ่าน Authorization Flow การไหลของการอนุญาตทั่วไป ได้แก่:

• Authorization Code Grant: ไคลเอนต์เปลี่ยนเส้นทางผู้ใช้ไปยังเซิร์ฟเวอร์การอนุญาต ผู้ใช้เข้าสู่ระบบและอนุญาต และเซิร์ฟเวอร์การอนุญาตส่งคืนรหัสการอนุญาตไปยังไคลเอนต์ ซึ่งไคลเอนต์จะใช้เพื่อแลกเปลี่ยนโทเค็นการเข้าถึง
• Resource Owner Password Credentials Grant: เจ้าของทรัพยากรให้ชื่อผู้ใช้และรหัสผ่านโดยตรงแก่ไคลเอนต์ และไคลเอนต์ใช้ข้อมูลประจำตัวเหล่านี้เพื่อขอโทเค็นการเข้าถึงจากเซิร์ฟเวอร์การอนุญาต
• Client Credentials Grant: ไคลเอนต์ใช้ข้อมูลประจำตัวของตนเองเพื่อขอโทเค็นการเข้าถึงโดยตรงจากเซิร์ฟเวอร์การอนุญาต เหมาะสำหรับกรณีที่ไคลเอนต์เองจำเป็นต้องเข้าถึงทรัพยากร
• Implicit Grant: ใช้เพื่อรับโทเค็นการเข้าถึงโดยตรงจากไคลเอนต์ในแอปพลิเคชันบนเบราว์เซอร์

Google OAuth 2.0 Implicit Grant: การใช้งาน & การแก้ไขข้อบกพร่อง Apidog

Google ใช้โฟลว์ Implicit Grant สำหรับการอนุญาต OAuth 2.0 บนเว็บ ดังนั้นมาดูวิธีการใช้งานและวิธีการแก้ไขข้อบกพร่องใน Apidog กัน

ขั้นตอนที่ 1: กำหนดค่า Client ID และ Redirect URL

ก่อนอื่นเราต้องไปที่ Google API Console เพื่อรับข้อมูลประจำตัว OAuth 2.0 คลิกที่ตัวเลือก "Credentials" ในแถบด้านข้างด้านซ้าย จากนั้นสร้าง OAuth client ID

จากนั้นเลือกประเภทแอปพลิเคชันของคุณ ซึ่งอาจเป็นเว็บไซต์ แอป Android หรือ iOS ขึ้นอยู่กับธุรกิจของคุณ ถัดไป ในช่อง "Authorized JavaScript origins" ให้ป้อนโดเมนเว็บไซต์ของคุณ

หากเป็นการแก้ไขข้อบกพร่องในเครื่อง โดยปกติจะตั้งค่าเป็น http://localhost หรือ http://localhost:8000 หากมีพอร์ต จุดประสงค์คือเพื่อให้ Google ทราบแหล่งที่มาของ HTTP ที่เว็บไซต์ของคุณโฮสต์ จากนั้น ในช่อง "Authorized redirect URIs" ให้ป้อนที่อยู่เปลี่ยนเส้นทางของคุณ ซึ่งโดยปกติจะเป็นเส้นทางการเข้าสู่ระบบของคุณหรือโดเมนอื่น ๆ ที่คุณสามารถเข้าถึงได้

หลังจากกำหนดค่าตัวเลือกที่เกี่ยวข้องทั้งหมดแล้ว ให้คลิกปุ่ม "CREATE" เพื่อบันทึก ซึ่งจะสร้าง Client ID และ Client secret ซึ่งเราจะต้องใช้ในภายหลัง

ขั้นตอนที่ 2: กำหนดค่าหน้าคำขอสิทธิ์ OAuth

ในหน้า ให้คลิกตัวเลือก "OAuth consent screen" ในแถบด้านข้างด้านซ้ายเพื่อสร้างแอปพลิเคชัน

กำหนดค่าหน้าจอ OAuth consent

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

ถัดไป กำหนดค่าขอบเขต ไปที่ขั้นตอนถัดไปและเลือกสิทธิ์ที่คุณต้องการเข้าถึง จากนั้นบันทึก

คุณยังสามารถเพิ่มบัญชีทดสอบ ซึ่งเป็นบัญชีอีเมลที่สามารถดำเนินการเข้าสู่ระบบ OAuth 2.0 ก่อนการเปิดตัวอย่างเป็นทางการ โดยมีข้อจำกัดสูงสุด 100 ผู้ใช้ที่ได้รับอนุญาต

หลังจากทำการกำหนดค่าข้างต้นเสร็จสิ้น เราสามารถเข้าสู่โฟลว์หลักของการอนุญาต OAuth 2.0 ได้อย่างเป็นทางการ

ขั้นตอนที่ 3: รับ Access Token

เมื่อขั้นตอนแรกและขั้นตอนที่สองพร้อมแล้ว เราสามารถไปขอ access token ได้ เพื่อสาธิตขั้นตอน เราจะใช้ Apidog ซึ่งเป็นเครื่องมือแก้ไขข้อบกพร่องและการจัดการ API ที่ยอดเยี่ยม คุณสามารถรับโทเค็นได้โดยตรงใน Apidog

คุณสมบัติหลักของ Apidog ในการใช้งานโฟลว์การเข้าสู่ระบบ Google OAuth 2.0:

1. การกำหนดค่าที่ง่ายขึ้น: Apidog มีอินเทอร์เฟซการกำหนดค่าแบบรวมศูนย์ ช่วยให้นักพัฒนาสามารถป้อน Client ID, redirect URL และพารามิเตอร์สำคัญอื่น ๆ ได้อย่างง่ายดาย โดยไม่จำเป็นต้องสร้าง URL คำขอการอนุญาตที่ซับซ้อนด้วยตนเอง
2. การเลือกโหมดการอนุญาตอัจฉริยะ: Apidog รองรับการระบุโหมดการอนุญาตของ Google โดยอัตโนมัติ และมีความสามารถในการเลือกโหมด Implicit Grant ซึ่งช่วยลดความยุ่งยากในการสลับระหว่างโหมดการอนุญาตต่างๆ
3. การได้มาซึ่ง access token เพียงคลิกเดียว: Apidog สามารถแนะนำนักพัฒนาตลอดโฟลว์การอนุญาตทั้งหมดและรับ access token โดยอัตโนมัติ ซึ่งช่วยลดความยากในการรับโทเค็นได้อย่างมาก
4. การจัดการโทเค็นอัตโนมัติ: Apidog จะเพิ่ม access token ที่ได้รับลงในส่วนหัวคำขอหรือพารามิเตอร์แบบสอบถามโดยอัตโนมัติ โดยไม่จำเป็นต้องให้นักพัฒนาจัดการการส่งโทเค็นด้วยตนเอง
5. การเข้าถึงทรัพยากรที่ราบรื่น: ด้วย access token ที่ Apidog มอบให้ นักพัฒนาสามารถใช้เพื่อเข้าถึงทรัพยากรแบบเปิดของ Google ได้โดยตรง โดยไม่จำเป็นต้องมีการอนุญาตเพิ่มเติมที่ซับซ้อน

ใน Apidog ให้สร้างโปรเจ็กต์ HTTP ใหม่ จากนั้นสร้างคำขอใหม่และเลือกตัวเลือก "Edit Document -> Auth -> OAuth 2.0"

เลือกโหมดการอนุญาต "Implicit" เนื่องจาก "OAuth 2.0 for Client-side Web Applications" ของ Google ใช้ Implicit Grant

ป้อน Client ID และ redirect URL พารามิเตอร์บริการ Google OAuth 2.0 ที่คุณกำหนดค่าไว้ในขั้นตอนแรก

การรับ Access Token

ตามเอกสารอย่างเป็นทางการของ Google ในการสมัคร access token URL ที่จะขอคือ:

https://accounts.google.com/o/oauth2/v2/auth

คุณสามารถกรอกที่อยู่นี้ในช่องป้อนข้อมูล "Auth URL"

เอกสารอย่างเป็นทางการของ Google ยังต้องการให้รวมพารามิเตอร์เพิ่มเติมในเส้นทาง URL เช่น:

https://accounts.google.com/o/oauth2/v2/auth?
scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
include_granted_scopes=true&
response_type=token&
state=state_parameter_passthrough_value&
redirect_uri=https%3A//oauth2.example.com/code&
client_id=client_id

หมายเหตุ: ในแอปพลิเคชันจริง ไม่จำเป็นต้องมีตัวแบ่งบรรทัด

อย่างไรก็ตาม ใน Apidog โดยทั่วไปไม่จำเป็น เนื่องจากพารามิเตอร์ที่จำเป็นได้รับการกำหนดค่าแยกต่างหากในตัวเลือกอื่น ๆ

หากคุณต้องการกำหนดค่า คุณสามารถคลิกไอคอนถัดจาก "Auth URL" เพื่อกำหนดค่า หรือคลิก "More" เพื่อขยายรายการการกำหนดค่าอื่น ๆ เช่น การเพิ่มค่า openid ลงใน "Scope" ที่นี่ ซึ่งเป็นสิทธิ์ที่เลือกใน "ขั้นตอนที่ 2" ด้านบน

หลังจากตั้งค่ารายการการกำหนดค่าทั้งหมดข้างต้นแล้ว คุณสามารถคลิกปุ่ม "Get Token" เพื่อรับโทเค็น หลังจากคลิก หากเป็นการเข้าสู่ระบบครั้งแรก หน้าต่างจะปรากฏขึ้นเพื่อให้คุณอนุญาต และคุณสามารถกรอกข้อมูลได้

หลังจากป้อนชื่อผู้ใช้และรหัสผ่าน คุณอาจได้รับรหัสยืนยันข้อความเพื่อยืนยันบัญชีของคุณ หรือคุณสามารถเชื่อมโยงบัญชีโดยตรงและรับ access token

เมื่อการอนุญาตเสร็จสมบูรณ์ access token จะถูกรับและแสดงบนหน้าโดยอัตโนมัติ และข้อมูลอื่น ๆ ที่ Google ส่งคืนจะถูกแยกวิเคราะห์และแสดงด้วย

ขั้นตอนที่ 4: เข้าถึงทรัพยากรแบบเปิดตามโทเค็น

ด้วย access token ที่ได้รับ คุณสามารถใช้เพื่อเข้าถึงทรัพยากรแบบเปิดของ Google ได้แล้ว คุณสามารถสำรวจ Google API ที่มีอยู่ทั้งหมดและขอบเขตสิทธิ์ของ API เหล่านั้นได้ใน OAuth 2.0 Playground

เมื่อส่งคำขอ Apidog จะแนบโทเค็นเข้ากับส่วนหัวการอนุญาตโดยอัตโนมัติเป็นโทเค็น Bearer หากคุณต้องการรวมโทเค็นใน URL คุณสามารถแก้ไขตัวเลือก "Token Add Position" ในการตั้งค่า Apidog เป็น "Query Params"

บทสรุป

โดยสรุป การใช้งานการเข้าสู่ระบบ Google OAuth 2.0 ประกอบด้วยสี่ขั้นตอนหลัก ขั้นแรก ในขั้นตอนที่ 1 คุณต้องกำหนดค่า Client ID และ redirect URL เพื่อรับข้อมูลประจำตัว OAuth 2.0 จากนั้น ในขั้นตอนที่ 2 คุณต้องกำหนดขอบเขตของสิทธิ์การเข้าถึงและสร้างแอปพลิเคชัน โดยกำหนดค่าข้อมูลที่เกี่ยวข้อง รวมถึงสิทธิ์ที่เข้าถึงได้และบัญชีทดสอบ

ถัดไป ในขั้นตอนที่ 3 คุณสามารถรับ access token ผ่านคำขอโทเค็น ด้วยความช่วยเหลือของเครื่องมืออย่าง Apidog สุดท้าย ในขั้นตอนที่ 4 คุณสามารถใช้ access token ที่ได้รับเพื่อเข้าถึงทรัพยากรแบบเปิดของ Google

```