คุณสามารถให้ผู้ใช้ลงชื่อเข้าใช้แอปด้วยบัญชี Google ของตนในอุปกรณ์ที่มีความสามารถในการป้อนข้อมูลที่จำกัด เช่น ทีวีที่เชื่อมต่ออินเทอร์เน็ต
แอปจะแสดงรหัสสั้นๆ และ URL สำหรับลงชื่อเข้าใช้ให้กับผู้ใช้ จากนั้นผู้ใช้จะเปิด URL สำหรับลงชื่อเข้าใช้ในเว็บเบราว์เซอร์ ป้อนรหัส และให้สิทธิ์แอปในการเข้าถึงข้อมูลการลงชื่อเข้าใช้ของผู้ใช้ สุดท้าย แอปได้รับการยืนยัน และผู้ใช้ลงชื่อเข้าใช้
หากต้องการใช้ขั้นตอนการลงชื่อเข้าใช้นี้ แอปต้องทำงานบนอุปกรณ์ที่เป็นไปตามเกณฑ์ต่อไปนี้
- อุปกรณ์ต้องแสดง URL ยาว 40 อักขระ และรหัสผู้ใช้ 15 อักขระ พร้อมด้วยวิธีการแก่ผู้ใช้
- อุปกรณ์ต้องเชื่อมต่ออินเทอร์เน็ต
รับรหัสไคลเอ็นต์และรหัสลับไคลเอ็นต์
แอปของคุณต้องใช้รหัสไคลเอ็นต์ OAuth 2.0 และรหัสลับไคลเอ็นต์เพื่อส่งคำขอไปยังปลายทางการลงชื่อเข้าใช้ของ Google
หากต้องการค้นหารหัสไคลเอ็นต์และรหัสลับไคลเอ็นต์ของโปรเจ็กต์ ให้ทำดังนี้
- เลือกข้อมูลเข้าสู่ระบบ OAuth 2.0 ที่มีอยู่หรือเปิดหน้าข้อมูลเข้าสู่ระบบ
- หากยังไม่ได้ดำเนินการ ให้สร้างข้อมูลเข้าสู่ระบบ OAuth 2.0 ของโปรเจ็กต์โดยคลิกสร้างข้อมูลเข้าสู่ระบบ > รหัสไคลเอ็นต์ OAuth แล้วระบุข้อมูลที่จำเป็นต่อการสร้างข้อมูลเข้าสู่ระบบ
- ค้นหารหัสไคลเอ็นต์ในส่วนรหัสไคลเอ็นต์ 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"];
ข้อมูลเพิ่มเติม
- หากต้องการให้ผู้ใช้ลงชื่อเข้าใช้ต่อไปเกินอายุการใช้งานของโทเค็นรหัส โปรดดูการรีเฟรชโทเค็นเพื่อการเข้าถึง
- หากคุณต้องการตรวจสอบสิทธิ์กับเซิร์ฟเวอร์แบ็กเอนด์ โปรดดูตรวจสอบสิทธิ์กับเซิร์ฟเวอร์แบ็กเอนด์สำหรับข้อมูลเกี่ยวกับการดำเนินการอย่างปลอดภัย