ลงชื่อเข้าใช้ในทีวีและอุปกรณ์อินพุตที่จำกัด

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

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

หากต้องการใช้ขั้นตอนการลงชื่อเข้าใช้นี้ แอปต้องทำงานบนอุปกรณ์ที่เป็นไปตามเกณฑ์ต่อไปนี้

  • อุปกรณ์ต้องแสดง URL แบบ 40 อักขระและรหัสผู้ใช้ 15 อักขระ พร้อมทั้งวิธีการสำหรับผู้ใช้
  • อุปกรณ์ต้องเชื่อมต่ออินเทอร์เน็ต

รับรหัสไคลเอ็นต์และรหัสลับไคลเอ็นต์

แอปของคุณต้องใช้รหัสไคลเอ็นต์ OAuth 2.0 และรหัสลับไคลเอ็นต์เพื่อส่งคำขอไปยังปลายทางการลงชื่อเข้าใช้ของ Google

วิธีค้นหารหัสไคลเอ็นต์และรหัสลับไคลเอ็นต์ของโปรเจ็กต์

  1. เลือกข้อมูลเข้าสู่ระบบ OAuth 2.0 ที่มีอยู่หรือเปิดหน้าข้อมูลเข้าสู่ระบบ
  2. หากยังไม่ได้สร้าง ให้สร้างข้อมูลเข้าสู่ระบบ OAuth 2.0 ของโปรเจ็กต์โดยคลิกสร้างข้อมูลเข้าสู่ระบบ > รหัสไคลเอ็นต์ OAuth แล้วระบุข้อมูลที่จำเป็นในการสร้างข้อมูลเข้าสู่ระบบ
  3. มองหารหัสไคลเอ็นต์ในส่วนรหัสไคลเอ็นต์ OAuth 2.0 คลิกรหัสไคลเอ็นต์เพื่อดูรายละเอียด

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

รับรหัสผู้ใช้และ URL การยืนยัน

เมื่อผู้ใช้ขอลงชื่อเข้าใช้โดยใช้บัญชี Google คุณจะได้รับรหัสผู้ใช้และ URL ยืนยันโดยส่งคําขอ HTTP POST ไปยังปลายทางอุปกรณ์ OAuth 2.0 ที่ https://oauth2.googleapis.com/device/code ระบุรหัสไคลเอ็นต์และรายการขอบเขตที่ต้องการในคำขอ หากต้องการลงชื่อเข้าใช้ผู้ใช้ด้วยบัญชี Google เท่านั้น ให้ขอเฉพาะขอบเขต profile และ email หรือหากต้องการขอสิทธิ์เรียกใช้ API ที่รองรับในนามของผู้ใช้ ให้ขอขอบเขตที่จําเป็นเพิ่มเติมจากขอบเขต profile และ email

ตัวอย่างคําขอรหัสผู้ใช้มีดังนี้

POST /device/code HTTP/1.1
Host: oauth2.googleapis.com
Content-Type: application/x-www-form-urlencoded

client_id=YOUR_GOOGLE_CLIENT_ID&scope=email%20profile

วิธีใช้ curl

curl -d "client_id=YOUR_GOOGLE_CLIENT_ID&scope=email profile" https://oauth2.googleapis.com/device/code

ระบบจะแสดงผลลัพธ์เป็นออบเจ็กต์ JSON

 {
  "device_code" : "4/4-GMMhmHCXhWEzkobqIHGG_EnNYYsAkukHspeYUk9E8",
  "user_code" : "GQVQ-JKEC",
  "verification_url" : "https://www.google.com/device",
  "expires_in" : 1800,
  "interval" : 5
}

แอปจะแสดงค่า user_code และ verification_url แก่ผู้ใช้ และในเวลาเดียวกันจะตรวจสอบปลายทางการลงชื่อเข้าใช้ที่ interval ที่ระบุไว้จนกว่าผู้ใช้จะลงชื่อเข้าใช้หรือเวลาตามที่ expires_in ระบุไว้ผ่านไป

แสดงรหัสผู้ใช้และ URL การยืนยัน

หลังจากได้รับรหัสผู้ใช้และ URL การยืนยันจากอุปกรณ์ปลายทางแล้ว ให้แสดงรหัสและ URL ดังกล่าวและบอกให้ผู้ใช้เปิด URL และป้อนรหัสผู้ใช้

ค่าของ verification_url และ user_code อาจมีการเปลี่ยนแปลง ออกแบบ UI ในลักษณะที่รองรับขีดจํากัดต่อไปนี้

  • user_code ต้องแสดงในช่องที่กว้างพอที่จะรองรับอักขระขนาด W 15 ตัว
  • verification_url ต้องแสดงในช่องที่กว้างพอที่จะรองรับสตริง URL ที่มีความยาว 40 อักขระ

สตริงทั้ง 2 รายการอาจมีอักขระที่พิมพ์ได้จากชุดอักขระ US-ASCII

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

คุณสามารถแก้ไขสตริง verification_url ได้โดยตัดรูปแบบออกจาก URL เพื่อวัตถุประสงค์ในการแสดงผล หากต้องการ หากใช้ โปรดตรวจสอบว่าแอปของคุณรองรับทั้งตัวแปร "http" และ "https" และอย่าแก้ไขสตริง verification_url

เมื่อผู้ใช้ไปยัง URL การยืนยัน ก็จะเห็นหน้าเว็บที่คล้ายกับตัวอย่างต่อไปนี้

เชื่อมต่ออุปกรณ์ด้วยการป้อนรหัส

หลังจากผู้ใช้ป้อนรหัสผู้ใช้แล้ว เว็บไซต์ Google Sign-In จะแสดงหน้าจอขอความยินยอมที่คล้ายกับตัวอย่างต่อไปนี้

ตัวอย่างหน้าจอขอความยินยอมสำหรับไคลเอ็นต์อุปกรณ์

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

รับโทเค็นระบุตัวตนและโทเค็นการรีเฟรช

หลังจากแอปแสดงรหัสผู้ใช้และ URL การยืนยันแล้ว ให้เริ่มการโหวตเอนด์พอยต์โทเค็น (https://oauth2.googleapis.com/token) ด้วยรหัสอุปกรณ์ที่คุณได้รับจากเอนด์พอยต์อุปกรณ์ ตรวจสอบปลายทางโทเค็นเป็นช่วงๆ โดยระบุเป็นวินาทีตามค่า interval

ตัวอย่างคําขอมีดังนี้

POST /token HTTP/1.1
Host: oauth2.googleapis.com
Content-Type: application/x-www-form-urlencoded

client_id=YOUR_GOOGLE_CLIENT_ID&client_secret=YOUR_CLIENT_SECRET&code=DEVICE_CODE&grant_type=http://oauth.net/grant_type/device/1.0

กำลังใช้ curl:

curl -d "client_id=YOUR_CLIENT_ID&client_secret=YOUR_CLIENT_SECRET&code=YOUR_DEVICE_CODE&grant_type=http://oauth.net/grant_type/device/1.0" https://oauth2.googleapis.com/token

หากผู้ใช้ยังไม่ได้อนุมัติคำขอ การตอบกลับจะเป็นดังนี้

{
  "error" : "authorization_pending"
}

แอปควรส่งคำขอเหล่านี้ซ้ำในอัตราที่ไม่เกินค่าของ interval หากแอปของคุณทำการสำรวจเร็วเกินไป ระบบจะแสดงผลดังนี้

{
  "error" : "slow_down"
}

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

{
  "access_token": "ya29.AHES6ZSuY8f6WFLswSv0HZLP2J4cCvFSj-8GiZM0Pr6cgXU",
  "token_type": "Bearer",
  "expires_in": 3600,
  "refresh_token": "1/551G1yXUqgkDGnkfFk6ZbjMMMDIMxo3JFc8lY8CAR-Q",
  "id_token": "eyJhbGciOiJSUzI..."
}

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

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

รับข้อมูลโปรไฟล์ผู้ใช้จากโทเค็นรหัส

คุณสามารถดูข้อมูลโปรไฟล์เกี่ยวกับผู้ใช้ที่ลงชื่อเข้าใช้ได้โดยการถอดรหัสโทเค็นระบุตัวตนด้วยไลบรารีการถอดรหัส JWT ตัวอย่างเช่น การใช้ไลบรารี JavaScript ของ Auth0 ที่มีชื่อว่า jwt-decode

var user_profile = jwt_decode(<var>id_token</var>);

// The "sub" field is available on all ID tokens. This value is unique for each
// Google account and can be used to identify the user. (But do not send this
// value to your server; instead, send the whole ID token so its authenticity
// can be verified.)
var user_id = user_profile["sub"];

// These values are available when you request the "profile" and "email" scopes.
var user_email = user_profile["email"];
var email_verified = user_profile["email_verified"];
var user_name = user_profile["name"];
var user_photo_url = user_profile["picture"];
var user_given_name = user_profile["given_name"];
var user_family_name = user_profile["family_name"];
var user_locale = user_profile["locale"];

ข้อมูลเพิ่มเติม