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

คุณสามารถให้ผู้ใช้ลงชื่อเข้าใช้แอปด้วยบัญชี 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 จะแสดงหน้าจอขอความยินยอมที่คล้ายกับข้อความต่อไปนี้

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

หากผู้ใช้คลิกอนุญาต แอปของคุณจะสามารถรับโทเค็นรหัสเพื่อระบุผู้ใช้ โทเค็นเพื่อการเข้าถึงสำหรับเรียกใช้ 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 ที่ผู้ใช้ให้สิทธิ์ได้ด้วย

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

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

คุณดูข้อมูลโปรไฟล์เกี่ยวกับผู้ใช้ที่ลงชื่อเข้าใช้ได้โดยการถอดรหัสโทเค็นรหัสด้วยไลบรารีการถอดรหัส 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"];

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