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

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

In the implicit flow, Google opens your authorization endpoint in the user's browser. After successful sign in, you return a long-lived access token to Google. This access token is now included in every request sent from Google.

In the authorization code flow, you need two endpoints:

  • The authorization endpoint, which presents the sign-in UI to your users that aren't already signed in. The authorization endpoint also creates a short-lived authorization code to record users' consent to the requested access.

  • The token exchange endpoint, which is responsible for two types of exchanges:

    1. Exchanges an authorization code for a long-lived refresh token and a short-lived access token. This exchange happens when the user goes through the account linking flow.
    2. Exchanges a long-lived refresh token for a short-lived access token. This exchange happens when Google needs a new access token because the one it had expired.

Choose an OAuth 2.0 flow

Although the implicit flow is simpler to implement, Google recommends that access tokens issued by the implicit flow never expire. This is because the user is forced to link their account again after a token expires with the implicit flow. If you need token expiration for security reasons, we strongly recommend that you use the authorization code flow instead.

Design guidelines

This section describes the design requirements and recommendations for the user screen that you host for OAuth linking flows. After it's called by Google's app, your platform displays a sign in to Google page and account linking consent screen to the user. The user is directed back to Google's app after giving their consent to link accounts.

This figure shows the steps for a user to link their Google account
            to your authentication system. The first screenshot shows
            user-initiated linking from your platform. The second image shows
            user sign-in to Google, while the third shows the user consent and
            confirmation for linking their Google account with your app. The
            final screenshot shows a successfully linked user account in the
            Google app.
Figure 1. Account linking user sign in to Google and consent screens.

Requirements

  1. You must communicate that the user’s account will be linked to Google, not a specific Google product like Google Home or Google Assistant.

Recommendations

We recommend that you do the following:

  1. Display Google's Privacy Policy. Include a link to Google’s Privacy Policy on the consent screen.

  2. Data to be shared. Use clear and concise language to tell the user what data of theirs Google requires and why.

  3. Clear call-to-action. State a clear call-to-action on your consent screen, such as “Agree and link.” This is because users need to understand what data they're required to share with Google to link their accounts.

  4. Ability to cancel. Provide a way for users to go back or cancel, if they choose not to link.

  5. Clear sign-in process. Ensure that users have clear method for signing in to their Google account, such as fields for their username and password or Sign in with Google.

  6. Ability to unlink. Offer a mechanism for users to unlink, such as a URL to their account settings on your platform. Alternatively, you can include a link to Google Account where users can manage their linked account.

  7. Ability to change user account. Suggest a method for users to switch their account(s). This is especially beneficial if users tend to have multiple accounts.

    • If a user must close the consent screen to switch accounts, send a recoverable error to Google so the user can sign in to the desired account with OAuth linking and the implicit flow.
  8. Include your logo. Display your company logo on the consent screen. Use your style guidelines to place your logo. If you wish to also display Google's logo, see Logos and trademarks.

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

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

  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

บริการของคุณจะให้สิทธิ์เพื่อรองรับขั้นตอน 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 ของบริการ

Handle userinfo requests

The userinfo endpoint is an OAuth 2.0 protected resource that return claims about the linked user. Implementing and hosting the userinfo endpoint is optional, except for the following use cases:

After the access token has been successfully retrieved from your token endpoint, Google sends a request to your userinfo endpoint to retrieve basic profile information about the linked user.

userinfo endpoint request headers
Authorization header The access token of type Bearer.

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

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

For your userinfo endpoint to handle requests, do the following steps:

  1. Extract access token from the Authorization header and return information for the user associated with the access token.
  2. If the access token is invalid, return an HTTP 401 Unauthorized error with using the WWW-Authenticate Response Header. Below is an example of a userinfo error response:
    HTTP/1.1 401 Unauthorized
    WWW-Authenticate: error="invalid_token",
    error_description="The Access Token expired"
    
    If a 401 Unauthorized, or any other unsuccessful error response is returned during the linking process, the error will be non-recoverable, the retrieved token will be discarded and the user will have to initiate the linking process again.
  3. If the access token is valid, return and HTTP 200 response with the following JSON object in the body of the HTTPS response:

    {
    "sub": "USER_UUID",
    "email": "EMAIL_ADDRESS",
    "given_name": "FIRST_NAME",
    "family_name": "LAST_NAME",
    "name": "FULL_NAME",
    "picture": "PROFILE_PICTURE",
    }
    If your userinfo endpoint returns an HTTP 200 success response, the retrieved token and claims are registered against the user's Google account.

    userinfo endpoint response
    sub A unique ID that identifies the user in your system.
    email Email address of the user.
    given_name Optional: First name of the user.
    family_name Optional: Last name of the user.
    name Optional: Full name of the user.
    picture Optional: Profile picture of the user.

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

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