การลิงก์บัญชี Google กับ OAuth

ระบบจะลิงก์บัญชีโดยใช้ขั้นตอน OAuth 2.0 แบบโดยนัยและรหัสการให้สิทธิ์ซึ่งเป็นมาตรฐานอุตสาหกรรม บริการของคุณต้องรองรับปลายทางการให้สิทธิ์และการแลกเปลี่ยนโทเค็นที่เป็นไปตาม OAuth 2.0

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

ในขั้นตอนรหัสการให้สิทธิ์ คุณต้องมีปลายทาง 2 รายการดังนี้

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

  • ปลายทางการแลกเปลี่ยนโทเค็น ซึ่งรับผิดชอบต่อการแลกเปลี่ยน 2 ประเภทดังนี้

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

เลือกขั้นตอน OAuth 2.0

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

หลักเกณฑ์การออกแบบ

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

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

ข้อกำหนด

  1. คุณต้องแจ้งให้ผู้ใช้ทราบว่าบัญชีของผู้ใช้จะลิงก์กับ Googleไม่ใช่ผลิตภัณฑ์ที่เฉพาะเจาะจงของ Google เช่น Google Home หรือ Google Assistant

คำแนะนำ

เราขอแนะนำให้คุณทำดังนี้

  1. แสดงนโยบายความเป็นส่วนตัวของ Google ใส่ลิงก์ไปยังนโยบายความเป็นส่วนตัวของ Google ในหน้าจอขอความยินยอม

  2. ข้อมูลที่แชร์ ใช้ภาษาที่ชัดเจนและกระชับเพื่อบอกให้ผู้ใช้ทราบว่า Google ต้องการข้อมูลใดและเพราะเหตุใด

  3. คำกระตุ้นให้ดำเนินการที่ชัดเจน ระบุคำกระตุ้นให้ดำเนินการที่ชัดเจนในหน้าจอคำยินยอม เช่น "ยอมรับและลิงก์" เนื่องจากผู้ใช้ต้องเข้าใจว่าต้องแชร์ข้อมูลใดกับ Google จึงจะลิงก์บัญชีได้

  4. ความสามารถในการยกเลิก ระบุวิธีให้ผู้ใช้ย้อนกลับหรือยกเลิก หากผู้ใช้เลือกที่จะไม่ลิงก์

  5. กระบวนการลงชื่อเข้าใช้ที่ชัดเจน ตรวจสอบว่าผู้ใช้มีวิธีการที่ชัดเจนในการลงชื่อเข้าใช้บัญชี Google เช่น ช่องสำหรับชื่อผู้ใช้และรหัสผ่าน หรือลงชื่อเข้าใช้ด้วย Google

  6. ความสามารถในการยกเลิกการลิงก์ เสนอกลไกให้ผู้ใช้ยกเลิกการลิงก์ เช่น URL ไปยังการตั้งค่าบัญชีบนแพลตฟอร์มของคุณ หรือจะใส่ลิงก์ไปยังบัญชี Google ที่ผู้ใช้สามารถจัดการบัญชีที่ลิงก์ไว้ก็ได้

  7. ความสามารถในการเปลี่ยนบัญชีผู้ใช้ แนะนำวิธีการให้ผู้ใช้เปลี่ยนบัญชี ซึ่งจะเป็นประโยชน์อย่างยิ่งหากผู้ใช้มีแนวโน้มที่จะมีบัญชีหลายบัญชี

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

  8. ใส่โลโก้ของคุณ แสดงโลโก้บริษัทในหน้าจอขอความยินยอม ใช้หลักเกณฑ์การจัดรูปแบบในการวางโลโก้ หากต้องการแสดงโลโก้ของ Google ด้วย โปรดดูโลโก้และเครื่องหมายการค้า

创建项目

如需创建使用账号关联的项目，请执行以下操作：

  2. 点击 Create project。
  3. 输入名称或接受生成的建议。
  4. 确认或修改所有剩余字段。
  5. 点击创建。

如需查看项目 ID，请执行以下操作：

  2. 在着陆页的表格中找到您的项目。项目 ID 会显示在 ID 列中。

Google 账号关联流程包含一个权限请求页面，该页面会告知用户哪个应用在请求访问其数据、请求访问哪些类型的数据，以及适用的条款。您需要先配置 OAuth 权限请求页面，然后才能生成 Google API 客户端 ID。

  1. 打开 Google API 控制台的 OAuth 同意屏幕页面。
  2. 如果出现提示，请选择您刚刚创建的项目。

  3. 在“OAuth 同意屏幕”页面上，填写表单，然后点击“保存”按钮。

    应用名称：征求用户同意的应用的名称。名称应准确反映您的应用，并与用户在其他位置看到的应用名称保持一致。应用名称将显示在账号关联权限请求界面上。

    应用徽标：权限请求页面上显示的一张图片，用以让用户认出您的应用。徽标会显示在账号关联权限请求页面和账号设置中

    支持电子邮件地址：供用户就其同意问题与您联系。

    Google API 的范围：借助范围，您的应用可以访问用户的非公开 Google 数据。对于 Google 账号关联使用情形，默认范围（电子邮件地址、个人资料、openid）就足够了，您无需添加任何敏感范围。一般来说，最佳做法是在需要访问权限时逐步请求权限范围，而不是提前请求。了解详情。

    已获授权的网域：为了保护您和您的用户，Google 只允许使用 OAuth 进行身份验证的应用使用已获授权的网域。应用的链接必须托管在已获授权的网域上。了解详情。

    应用首页链接：应用的首页。必须托管在已获授权的网域上。

    应用隐私权政策链接：显示在 Google 账号关联意见征求界面上。必须托管在已获授权的网域上。

    应用服务条款链接（可选）：必须托管在已获授权的网域上。

    图 1. 虚构应用 Tunery 的 Google 账号关联意见征求界面

  4. 查看“验证状态”，如果您的应用需要验证，请点击“提交以供验证”按钮，提交应用以供验证。如需了解详情，请参阅 OAuth 验证要求。

ใช้เซิร์ฟเวอร์ OAuth

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

เมื่อแอปพลิเคชันของ Google ต้องเรียกใช้ API ที่ได้รับอนุญาตของบริการ Google ใช้ปลายทางนี้เพื่อขอสิทธิ์จากผู้ใช้เพื่อเรียกใช้ API เหล่านี้ ในนามของผู้ลงโฆษณา

เซสชันโฟลว์แบบโดยนัยของ OAuth 2.0 ทั่วไปที่ Google เป็นผู้เริ่มต้นจะมี ขั้นตอนดังต่อไปนี้

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

จัดการคำขอการให้สิทธิ์

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

พารามิเตอร์ปลายทางการให้สิทธิ์
client_id รหัสไคลเอ็นต์ที่คุณกำหนดให้กับ Google
redirect_uri URL ที่คุณส่งการตอบกลับคำขอนี้
state มูลค่าการทำบัญชีที่ส่งกลับไปยัง Google ไม่เปลี่ยนแปลงใน URI การเปลี่ยนเส้นทาง
response_type ประเภทของค่าที่จะแสดงในคำตอบ สำหรับ OAuth 2.0 โดยปริยาย ประเภทการตอบกลับจะเป็น token เสมอ
user_locale การตั้งค่าภาษาของบัญชี Google ใน RFC5646 ในการแปลเนื้อหาของคุณเป็นภาษาที่ผู้ใช้ต้องการ

ตัวอย่างเช่น หากปลายทางการให้สิทธิ์อยู่ที่ https://myservice.example.com/auth คำขออาจมีลักษณะดังต่อไปนี้

GET https://myservice.example.com/auth?client_id=GOOGLE_CLIENT_ID&redirect_uri=REDIRECT_URI&state=STATE_STRING&response_type=token&user_locale=LOCALE

สำหรับปลายทางการให้สิทธิ์ในการจัดการคำขอลงชื่อเข้าใช้ ให้ทำดังนี้ ขั้นตอน:

  1. ยืนยันค่า client_id และ redirect_uri เพื่อ ป้องกันการให้สิทธิ์เข้าถึงแอปไคลเอ็นต์ที่ไม่ได้ตั้งใจหรือกำหนดค่าไม่ถูกต้อง

    • ยืนยันว่า client_id ตรงกับรหัสไคลเอ็นต์ที่คุณ ที่มอบหมายให้กับ Google
    • ยืนยันว่า URL ที่ระบุโดย redirect_uri จะมีรูปแบบต่อไปนี้ 
      https://oauth-redirect.googleusercontent.com/r/YOUR_PROJECT_ID
https://oauth-redirect-sandbox.googleusercontent.com/r/YOUR_PROJECT_ID

  2. ตรวจสอบว่าผู้ใช้ลงชื่อเข้าใช้บริการของคุณหรือไม่ หากผู้ใช้ไม่ได้เซ็น ดำเนินการตามขั้นตอนการลงชื่อเข้าใช้หรือลงชื่อสมัครใช้บริการของคุณ

  3. สร้างโทเค็นเพื่อการเข้าถึงสำหรับ Google เพื่อใช้ในการเข้าถึง API ของคุณ โทเค็นเพื่อการเข้าถึงสามารถเป็นค่าสตริงใดก็ได้ แต่จะต้องแสดงถึง ผู้ใช้และไคลเอ็นต์ที่ใช้โทเค็นและต้องคาดเดาไม่ได้

  4. ส่งการตอบกลับ HTTP ที่เปลี่ยนเส้นทางเบราว์เซอร์ของผู้ใช้ไปยัง URL ที่ระบุโดยพารามิเตอร์ redirect_uri รวม พารามิเตอร์ต่อไปนี้ในส่วนย่อยของ URL

    • access_token: โทเค็นเพื่อการเข้าถึงที่คุณเพิ่งสร้าง
    • token_type: สตริง bearer
    • state: ค่าสถานะที่ไม่ได้แก้ไขจากค่าเดิม คำขอ

    ตัวอย่างของ URL ที่ได้มีดังนี้ 

    https://oauth-redirect.googleusercontent.com/r/YOUR_PROJECT_ID#access_token=ACCESS_TOKEN&token_type=bearer&state=STATE_STRING

เครื่องจัดการการเปลี่ยนเส้นทาง OAuth 2.0 ของ Google ได้รับโทเค็นเพื่อการเข้าถึงและยืนยัน ค่า state ยังไม่มีการเปลี่ยนแปลง หลังจากที่ Google ได้รับ โทเค็นเพื่อการเข้าถึงสำหรับบริการของคุณ Google จะแนบโทเค็นไปกับการเรียกครั้งต่อๆ มา กับ API ของบริการ

จัดการคำขอ Userinfo

ปลายทาง userinfo เป็นทรัพยากรที่มีการป้องกันด้วย OAuth 2.0 ซึ่งส่งกลับการอ้างสิทธิ์เกี่ยวกับผู้ใช้ที่ลิงก์ การติดตั้งใช้งานและการโฮสต์ปลายทาง userinfo เป็นตัวเลือกที่ไม่บังคับ ยกเว้นกรณีการใช้งานต่อไปนี้

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

ส่วนหัวของคำขอปลายทางของ userinfo
Authorization header โทเค็นเพื่อการเข้าถึงของประเภท Bearer

ตัวอย่างเช่น หากปลายทาง userinfo พร้อมใช้งานที่ https://myservice.example.com/userinfo คำขออาจมีลักษณะดังต่อไปนี้

GET /userinfo HTTP/1.1
Host: myservice.example.com
Authorization: Bearer ACCESS_TOKEN

หากต้องการให้ปลายทาง userinfo จัดการคำขอ ให้ทำตามขั้นตอนต่อไปนี้

  1. แยกโทเค็นเพื่อการเข้าถึงจากส่วนหัวการให้สิทธิ์ แล้วแสดงผลข้อมูลสำหรับผู้ใช้ที่เชื่อมโยงกับโทเค็นเพื่อการเข้าถึง
  2. หากโทเค็นเพื่อการเข้าถึงไม่ถูกต้อง ให้แสดงข้อผิดพลาด HTTP 401 Unauthorized ด้วยการใช้ส่วนหัวการตอบกลับ WWW-Authenticate ตัวอย่างการตอบกลับข้อผิดพลาดเกี่ยวกับ Userinfo มีดังนี้ 
    HTTP/1.1 401 Unauthorized
WWW-Authenticate: error="invalid_token",
error_description="The Access Token expired"
    หากข้อผิดพลาด 401 Unauthorized หรือการตอบกลับที่ผิดพลาดอื่นๆ ที่ไม่สำเร็จในระหว่างกระบวนการลิงก์ ข้อผิดพลาดดังกล่าวจะกู้คืนไม่ได้ ระบบจะทิ้งโทเค็นที่ดึงมาและผู้ใช้จะต้องเริ่มกระบวนการลิงก์อีกครั้ง

  3. หากโทเค็นเพื่อการเข้าถึงถูกต้อง ให้แสดงผลและการตอบสนอง HTTP 200 ด้วยออบเจ็กต์ JSON ต่อไปนี้ในเนื้อหาของ HTTPS การตอบกลับ: 

    {
"sub": "USER_UUID",
"email": "EMAIL_ADDRESS",
"given_name": "FIRST_NAME",
"family_name": "LAST_NAME",
"name": "FULL_NAME",
"picture": "PROFILE_PICTURE",
}
     หากปลายทาง userinfo ส่งการตอบกลับที่สำเร็จ HTTP 200 ระบบจะลงทะเบียนโทเค็นที่ดึงมาและการอ้างสิทธิ์กับบัญชี Google ของผู้ใช้

    การตอบสนองของปลายทาง userinfo
    sub รหัสที่ไม่ซ้ำกันที่ระบุผู้ใช้ในระบบ
    email อีเมลของผู้ใช้
    given_name ไม่บังคับ: ชื่อของผู้ใช้
    family_name ไม่บังคับ: นามสกุลของผู้ใช้
    name ไม่บังคับ: ชื่อเต็มของผู้ใช้
    picture ไม่บังคับ: รูปโปรไฟล์ของผู้ใช้

ตรวจสอบการติดตั้งใช้งาน

คุณตรวจสอบการติดตั้งใช้งานได้โดยใช้เครื่องมือ OAuth 2.0 Playground

ทำตามขั้นตอนต่อไปนี้ในเครื่องมือ

  1. คลิกการกําหนดค่า เพื่อเปิดหน้าต่างการกําหนดค่า OAuth 2.0
  2. ในช่องขั้นตอน OAuth ให้เลือกฝั่งไคลเอ็นต์
  3. ในช่อง OAuth Endpoints ให้เลือก Custom
  4. ระบุปลายทาง OAuth 2.0 และรหัสไคลเอ็นต์ที่คุณกำหนดให้กับ Google ในช่องที่เกี่ยวข้อง
  5. ในส่วนขั้นตอนที่ 1 ไม่ต้องเลือกขอบเขตของ Google แต่ให้เว้นช่องนี้ว่างไว้หรือพิมพ์ขอบเขตที่ใช้ได้กับเซิร์ฟเวอร์ของคุณ (หรือสตริงที่กำหนดเองหากคุณไม่ได้ใช้ขอบเขต OAuth) เมื่อดำเนินการเสร็จแล้ว ให้คลิกให้สิทธิ์ API
  6. ในส่วนขั้นตอนที่ 2 และขั้นตอนที่ 3 ให้ทำตามขั้นตอน OAuth 2.0 และตรวจสอบว่าแต่ละขั้นตอนทำงานตามที่ต้องการ

คุณสามารถตรวจสอบการติดตั้งใช้งานโดยใช้เครื่องมือการสาธิตการลิงก์บัญชี Google

ทำตามขั้นตอนต่อไปนี้ในเครื่องมือ

  1. คลิกปุ่มลงชื่อเข้าใช้ด้วย Google
  2. เลือกบัญชีที่ต้องการลิงก์
  3. ป้อนรหัสบริการ
  4. (ไม่บังคับ) ป้อนขอบเขตที่จะขอสิทธิ์เข้าถึงอย่างน้อย 1 รายการ
  5. คลิกเริ่มสาธิต
  6. เมื่อได้รับข้อความแจ้ง ให้ยืนยันว่าคุณอาจยินยอมและปฏิเสธคำขอลิงก์
  7. ยืนยันว่าระบบเปลี่ยนเส้นทางคุณไปยังแพลตฟอร์ม