การลิงก์บัญชี 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 ด้วย โปรดดูโลโก้และเครื่องหมายการค้า

สร้างโปรเจ็กต์

วิธีสร้างโปรเจ็กต์เพื่อใช้การลิงก์บัญชี

  1. คลิกสร้างโปรเจ็กต์
  2. ป้อนชื่อหรือยอมรับคำแนะนำที่สร้างขึ้น
  3. ยืนยันหรือแก้ไขช่องที่เหลือ
  4. คลิกสร้าง

วิธีดูรหัสโปรเจ็กต์

  1. ค้นหาโปรเจ็กต์ในตารางในหน้า Landing Page รหัสโปรเจ็กต์จะปรากฏในคอลัมน์รหัส

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

  1. เปิดหน้าหน้าจอขอความยินยอม OAuth ของคอนโซล Google APIs
  2. หากได้รับข้อความแจ้ง ให้เลือกโปรเจ็กต์ที่คุณเพิ่งสร้าง
  3. ในหน้า "หน้าจอคำยินยอม OAuth" ให้กรอกแบบฟอร์มแล้วคลิกปุ่ม "บันทึก"

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

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

    อีเมลสนับสนุน: เพื่อให้ผู้ใช้ติดต่อคุณพร้อมคำถามเกี่ยวกับการยินยอม

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

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

    ลิงก์หน้าแรกของแอปพลิเคชัน: หน้าแรกของแอปพลิเคชัน ต้องโฮสต์ในโดเมนที่ได้รับอนุญาต

    ลิงก์นโยบายความเป็นส่วนตัวของแอปพลิเคชัน: แสดงในหน้าจอขอความยินยอมในการลิงก์บัญชี Google ต้องโฮสต์ในโดเมนที่ได้รับอนุญาต

    ลิงก์ข้อกำหนดในการให้บริการของแอปพลิเคชัน (ไม่บังคับ): ต้องโฮสต์ในโดเมนที่ได้รับอนุญาต

    รูปที่ 1 หน้าจอขอความยินยอมในการลิงก์บัญชี Google สำหรับแอปพลิเคชันสมมติ Tunery

  4. ตรวจสอบ "สถานะการยืนยัน" หากแอปพลิเคชันของคุณต้องได้รับการยืนยัน ให้คลิกปุ่ม "ส่งเพื่อรับการยืนยัน" เพื่อส่งแอปพลิเคชันเพื่อรับการยืนยัน ดูรายละเอียดได้ที่ข้อกำหนดในการยืนยัน OAuth

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

To support the OAuth 2.0 implicit flow, your service makes an authorization endpoint available by HTTPS. This endpoint is responsible for authentication and obtaining consent from users for data access. The authorization endpoint presents a sign-in UI to your users that aren't already signed in and records consent to the requested access.

When a Google application needs to call one of your service's authorized APIs, Google uses this endpoint to get permission from your users to call these APIs on their behalf.

A typical OAuth 2.0 implicit flow session initiated by Google has the following flow:

  1. Google opens your authorization endpoint in the user's browser. The user signs in, if not signed in already, and grants Google permission to access their data with your API, if they haven't already granted permission.
  2. Your service creates an access token and returns it to Google. To do so, redirect the user's browser back to Google with the access token attached to the request.
  3. Google calls your service's APIs and attaches the access token with each request. Your service verifies that the access token grants Google authorization to access the API and then completes the API call.

Handle authorization requests

When a Google application needs to perform account linking via an OAuth 2.0 implicit flow, Google sends the user to your authorization endpoint with a request that includes the following parameters:

Authorization endpoint parameters
client_id The client ID you assigned to Google.
redirect_uri The URL to which you send the response to this request.
state A bookkeeping value that is passed back to Google unchanged in the redirect URI.
response_type The type of value to return in the response. For the OAuth 2.0 implicit flow, the response type is always token.
user_locale The Google Account language setting in RFC5646 format used to localize your content in the user's preferred language.

For example, if your authorization endpoint is available at https://myservice.example.com/auth, a request might look like the following:

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

For your authorization endpoint to handle sign-in requests, do the following steps:

  1. Verify the client_id and redirect_uri values to prevent granting access to unintended or misconfigured client apps:

    • Confirm that the client_id matches the client ID you assigned to Google.
    • Confirm that the URL specified by the redirect_uri parameter has the following form:
      https://oauth-redirect.googleusercontent.com/r/YOUR_PROJECT_ID
      https://oauth-redirect-sandbox.googleusercontent.com/r/YOUR_PROJECT_ID
      
  2. Check if the user is signed in to your service. If the user isn't signed in, complete your service's sign-in or sign-up flow.

  3. Generate an access token for Google to use to access your API. The access token can be any string value, but it must uniquely represent the user and the client the token is for and must not be guessable.

  4. Send an HTTP response that redirects the user's browser to the URL specified by the redirect_uri parameter. Include all of the following parameters in the URL fragment:

    • access_token: The access token you just generated
    • token_type: The string bearer
    • state: The unmodified state value from the original request

    The following is an example of the resulting URL:

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

Google's OAuth 2.0 redirect handler receives the access token and confirms that the state value hasn't changed. After Google has obtained an access token for your service, Google attaches the token to subsequent calls to your service APIs.

จัดการคำขอ 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. ยืนยันว่าระบบเปลี่ยนเส้นทางคุณไปยังแพลตฟอร์ม