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

คุณจะอนุญาตให้ผู้ใช้ลงชื่อเข้าใช้แอปด้วยบัญชี 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=CLIENT_ID&scope=email%20profile

กําลังใช้ curl

curl -d "client_id=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 แล้วป้อนรหัสผู้ใช้

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

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

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

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

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

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

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

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

รับโทเค็นรหัสและโทเค็นการรีเฟรช

หลังจากที่แอปแสดงรหัสผู้ใช้และ 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=CLIENT_ID&client_secret=CLIENT_SECRET&code=DEVICE_CODE&grant_type=http://oauth.net/grant_type/device/1.0

กําลังใช้ curl

curl -d "client_id=CLIENT_ID&client_secret=CLIENT_SECRET&code=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 เพื่อตรวจสอบสิทธิ์กับเซิร์ฟเวอร์ได้อย่างปลอดภัย นอกจากนี้ แอปยังใช้โทเค็นเพื่อการเข้าถึงเพื่อเรียก Google APIs ที่ผู้ใช้อนุญาตได้อีกด้วย

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

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

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

var user_profile = jwt_decode(id_token);

// 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"];

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

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