ไลบรารี JavaScript google.accounts.oauth2
ช่วยให้คุณแสดงข้อความแจ้งแก่ผู้ใช้
ยินยอมและรับโทเค็นเพื่อการเข้าถึงเพื่อทำงานกับข้อมูลผู้ใช้ โดยอิงตาม
ขั้นตอนการให้สิทธิ์โดยนัย OAuth 2.0 และออกแบบมาเพื่อให้คุณสามารถเรียกใช้ Google
API โดยตรงโดยใช้ REST และ CORS หรือเพื่อใช้ไลบรารีไคลเอ็นต์ Google APIs ของเราสำหรับ
JavaScript (หรือที่เรียกว่า gapi.client
) สำหรับการเข้าถึงที่ง่ายดายและยืดหยุ่น
API ที่ซับซ้อนขึ้นอีก
ก่อนเข้าถึงข้อมูลผู้ใช้ที่มีการคุ้มครองจากเบราว์เซอร์ ผู้ใช้ในเว็บไซต์จะทริกเกอร์ ตัวเลือกบัญชีบนเว็บ การลงชื่อเข้าใช้ และกระบวนการขอความยินยอมของ Google และสุดท้าย เกิดปัญหาเซิร์ฟเวอร์ OAuth ของ Google และส่งคืนโทเค็นเพื่อการเข้าถึงไปยังเว็บแอปของคุณ
ในรูปแบบการให้สิทธิ์ตามโทเค็น ไม่จำเป็นต้องจัดเก็บต่อผู้ใช้ รีเฟรชโทเค็นในเซิร์ฟเวอร์แบ็กเอนด์ของคุณ
เราขอแนะนำให้คุณทำตามวิธีที่ระบุไว้ที่นี่แทน เทคนิคที่ครอบคลุมโดย OAuth 2.0 เวอร์ชันเก่าสำหรับเว็บแอปพลิเคชันฝั่งไคลเอ็นต์
ตั้งค่า
ค้นหาหรือสร้างรหัสไคลเอ็นต์โดยทำตามขั้นตอนที่อธิบายไว้ในบทความรับ
คู่มือรหัสไคลเอ็นต์ Google API ถัดไป ให้เพิ่มไลบรารีของไคลเอ็นต์ลงในหน้า
ในเว็บไซต์ของคุณซึ่งจะเรียกใช้ Google APIs สุดท้าย เริ่มต้นโทเค็น
ของคุณ ซึ่งโดยปกติจะทำได้ภายในเครื่องจัดการ onload
ของไลบรารีของไคลเอ็นต์
เริ่มต้นไคลเอ็นต์โทเค็น
เรียกใช้ initTokenClient()
เพื่อเริ่มต้นไคลเอ็นต์โทเค็นใหม่ด้วย
รหัสไคลเอ็นต์ คุณอาจรวมรายการขอบเขตผู้ใช้อย่างน้อย 1 ขอบเขต
ต้องการเข้าถึง:
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
callback: (response) => {
...
},
});
ทริกเกอร์ขั้นตอนโทเค็น OAuth 2.0
ใช้เมธอด requestAccessToken()
เพื่อทริกเกอร์ขั้นตอน UX ของโทเค็นและรับ
โทเค็นเพื่อการเข้าถึง Google จะแจ้งให้ผู้ใช้ดำเนินการดังนี้
- เลือกบัญชี
- ลงชื่อเข้าใช้บัญชี Google หากยังไม่ได้ลงชื่อเข้าใช้
- ให้ความยินยอมแก่เว็บแอปของคุณในการเข้าถึงขอบเขตที่ขอแต่ละรายการ
ท่าทางสัมผัสของผู้ใช้จะเรียกใช้โฟลว์โทเค็น: <button onclick="client.requestAccessToken();">Authorize me</button>
จากนั้น Google จะส่งกลับ TokenResponse
ที่มีโทเค็นเพื่อการเข้าถึงและลิสต์ของ
ขอบเขตที่ผู้ใช้ให้สิทธิ์การเข้าถึงหรือข้อผิดพลาด แก่ตัวแฮนเดิล Callback ของคุณ
ผู้ใช้อาจปิดหน้าต่างตัวเลือกบัญชีหรือการลงชื่อเข้าใช้ได้ ซึ่งในกรณีนี้ ฟังก์ชัน Callback จะไม่ถูกเรียก
วิธีจัดการความยินยอม
การออกแบบและประสบการณ์ของผู้ใช้สำหรับแอปของคุณควรใช้เฉพาะหลังจากที่ อ่านนโยบาย OAuth 2.0 ของ Google อย่างละเอียด นโยบายเหล่านี้ครอบคลุม การทำงานร่วมกับหลายขอบเขต ช่วงเวลาและวิธีจัดการความยินยอมของผู้ใช้ และอื่นๆ
การให้สิทธิ์ที่เพิ่มขึ้น คือนโยบายและวิธีการออกแบบแอปที่ใช้เพื่อ ขอสิทธิ์เข้าถึงทรัพยากรโดยใช้ขอบเขต ตามความจำเป็นเท่านั้น แทนการชำระเงินล่วงหน้า และทั้งหมดพร้อมกันได้ ผู้ใช้สามารถอนุมัติหรือปฏิเสธการแชร์ทรัพยากรแต่ละรายการ ที่แอปของคุณขอ ซึ่งเรียกว่าสิทธิ์แบบละเอียด
ในระหว่างขั้นตอนนี้ Google แจ้งขอความยินยอมจากผู้ใช้ โดยจะแสดงแต่ละรายการแยกกัน ขอบเขตที่ขอ ผู้ใช้จะเลือกทรัพยากรที่จะแชร์กับแอปของคุณ และ สุดท้าย Google จะเรียกฟังก์ชัน Callback ของคุณเพื่อส่งคืนโทเค็นเพื่อการเข้าถึงและผู้ใช้ ขอบเขตที่อนุมัติ และแอปของคุณจัดการผลลัพธ์ต่างๆ ได้อย่างปลอดภัย ได้ด้วยสิทธิ์แบบละเอียด
การให้สิทธิ์ที่เพิ่มขึ้น
สำหรับเว็บแอป สถานการณ์ระดับสูง 2 แบบต่อไปนี้แสดงให้เห็นการเพิ่ม การให้สิทธิ์โดยใช้
- แอป Ajax แบบหน้าเดียวที่มักใช้
XMLHttpRequest
พร้อมการเข้าถึงแบบไดนามิก ที่ไม่ซับซ้อน - หน้าเว็บหลายหน้า ทรัพยากรต่างๆ ถูกแยกและจัดการในแต่ละหน้า
ทั้ง 2 สถานการณ์นี้นำเสนอขึ้นเพื่ออธิบายข้อควรพิจารณาในการออกแบบและ แต่ไม่ได้มีจุดประสงค์เพื่อให้คำแนะนำที่ครอบคลุมเกี่ยวกับวิธี เพื่อสร้างความยินยอมลงในแอป แอปในการใช้งานจริงอาจใช้เวอร์ชันอื่นๆ หรือ โดยใช้เทคนิคเหล่านี้ร่วมกัน
อาแจ๊กซ์
เพิ่มการรองรับการให้สิทธิ์ที่เพิ่มขึ้นในแอปด้วยการโทรหลายครั้ง
ไปยัง requestAccessToken()
และใช้ออบเจ็กต์ OverridableTokenClientConfig
scope
เพื่อขอขอบเขตแต่ละรายการในเวลาที่จำเป็นและ
เมื่อจำเป็นเท่านั้น ในตัวอย่างนี้ ระบบจะขอและเปิดเผยทรัพยากร
หลังจากที่ท่าทางสัมผัสของผู้ใช้ขยายส่วนเนื้อหาที่ยุบแล้วเท่านั้น
แอป Ajax |
---|
เริ่มต้นไคลเอ็นต์โทเค็นเมื่อโหลดหน้าเว็บ โดยทำดังนี้
const client = google.accounts.oauth2.initTokenClient({ client_id: 'YOUR_GOOGLE_CLIENT_ID', callback: "onTokenResponse", }); เอกสารสำหรับอ่านแสดงเอกสารล่าสุด client.requestAccessToken( overrideConfig = ({ scope = 'https://www.googleapis.com/auth/documents.readonly' }) ); กิจกรรมที่กำลังจะมีขึ้นแสดงข้อมูลปฏิทิน client.requestAccessToken( overrideConfig = ({ scope = 'https://www.googleapis.com/auth/calendar.readonly' }) ); ภาพสไลด์แสดงรูปภาพ client.requestAccessToken( overrideConfig = ({ scope = 'https://www.googleapis.com/auth/photoslibrary.readonly' }) ); |
การโทรมาที่ requestAccessToken
แต่ละครั้งจะทำให้เกิดช่วงเวลาที่ผู้ใช้ให้ความยินยอม แอปของคุณจะ
มีสิทธิ์เข้าถึงเฉพาะทรัพยากรที่จำเป็นในส่วนที่ผู้ใช้เลือก
ซึ่งเป็นการจำกัดการแชร์ทรัพยากรผ่านตัวเลือกของผู้ใช้
หลายหน้าเว็บ
เมื่อออกแบบให้เพิ่มการให้สิทธิ์ได้ จะมีการใช้หน้าเว็บหลายหน้าเพื่อขอ เฉพาะขอบเขตที่จำเป็นในการโหลดหน้าเว็บ ซึ่งลดความซับซ้อนและความจำเป็นที่จะต้อง ทำการเรียกหลายครั้งเพื่อขอรับความยินยอมจากผู้ใช้และเรียกโทเค็นเพื่อการเข้าถึง
แอปที่มีหลายหน้า | ||||||||
---|---|---|---|---|---|---|---|---|
|
แต่ละหน้าจะขอขอบเขตที่จำเป็นและรับโทเค็นเพื่อการเข้าถึงโดยการเรียกใช้
initTokenClient()
และ requestAccessToken()
เมื่อโหลด ในสถานการณ์นี้
หน้าเว็บแต่ละหน้าใช้แยกฟังก์ชันการทำงานของผู้ใช้ และ
ทรัพยากรตามขอบเขต ในสถานการณ์จริง หน้าเว็บแต่ละหน้าอาจส่งคำขอ
ขอบเขตที่เกี่ยวข้องหลายรายการ
สิทธิ์แบบละเอียด
สิทธิ์แบบละเอียดจะได้รับการจัดการในลักษณะเดียวกันในทุกสถานการณ์ หลังจาก
requestAccessToken()
เรียกใช้ฟังก์ชัน Callback และโทเค็นเพื่อการเข้าถึง
โปรดตรวจสอบว่าผู้ใช้ได้อนุมัติขอบเขตที่ขอแล้วโดยใช้
hasGrantedAllScopes()
หรือhasGrantedAnyScope()
เช่น
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly \
https://www.googleapis.com/auth/documents.readonly \
https://www.googleapis.com/auth/photoslibrary.readonly',
callback: (tokenResponse) => {
if (tokenResponse && tokenResponse.access_token) {
if (google.accounts.oauth2.hasGrantedAnyScope(tokenResponse,
'https://www.googleapis.com/auth/photoslibrary.readonly')) {
// Look at pictures
...
}
if (google.accounts.oauth2.hasGrantedAllScopes(tokenResponse,
'https://www.googleapis.com/auth/calendar.readonly',
'https://www.googleapis.com/auth/documents.readonly')) {
// Meeting planning and review documents
...
}
}
},
});
การให้สิทธิ์ที่ยอมรับก่อนหน้านี้จากเซสชันหรือคำขอก่อนหน้าก็จะ
ที่รวมอยู่ในคำตอบ ระบบจะเก็บบันทึกความยินยอมของผู้ใช้ไว้ต่อผู้ใช้ 1 รายและ
รหัสไคลเอ็นต์ และคงอยู่ในการเรียกไปยัง initTokenClient()
หลายครั้ง หรือ
requestAccessToken()
โดยค่าเริ่มต้น ความยินยอมของผู้ใช้จำเป็นเฉพาะ
เมื่อผู้ใช้เข้าชมเว็บไซต์ของคุณ และขอขอบเขตใหม่ แต่อาจได้รับการร้องขอเมื่อ
การโหลดหน้าเว็บโดยใช้ prompt=consent
ในออบเจ็กต์การกำหนดค่าไคลเอ็นต์โทเค็น
การใช้งานโทเค็น
ในรูปแบบโทเค็น ระบบปฏิบัติการหรือเบราว์เซอร์จะไม่จัดเก็บโทเค็นเพื่อการเข้าถึง แต่
ระบบจะได้รับโทเค็นใหม่ก่อนเมื่อโหลดหน้าเว็บ หรือหลังจากนั้นก็ทริกเกอร์
โทรหา requestAccessToken()
ผ่านท่าทางสัมผัสของผู้ใช้ เช่น การกดปุ่ม
การใช้ REST และ CORS กับ Google APIs
คุณสามารถใช้โทเค็นเพื่อการเข้าถึงเพื่อส่งคำขอที่ตรวจสอบสิทธิ์แล้วไปยัง Google APIs โดยใช้ REST และ CORS ซึ่งช่วยให้ผู้ใช้ลงชื่อเข้าใช้ ให้ความยินยอม เพื่อให้ Google ออก โทเค็นเพื่อการเข้าถึงและเว็บไซต์ของคุณเพื่อทำงานกับข้อมูลของผู้ใช้
ในตัวอย่างนี้ ให้ดูกิจกรรมในปฏิทินที่กำลังจะมาถึงของผู้ใช้ที่ลงชื่อเข้าใช้โดยใช้
โทเค็นเพื่อการเข้าถึงที่ tokenRequest()
แสดงผล:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.googleapis.com/calendar/v3/calendars/primary/events');
xhr.setRequestHeader('Authorization', 'Bearer ' + tokenResponse.access_token);
xhr.send();
ดูข้อมูลเพิ่มเติมได้ที่วิธีใช้ CORS เพื่อเข้าถึง Google API
ส่วนถัดไปจะพูดถึงวิธีผสานรวมกับ API ที่ซับซ้อนมากขึ้นได้อย่างง่ายดาย
การทำงานกับไลบรารี JavaScript ของ Google APIs
ไคลเอ็นต์โทเค็นทำงานร่วมกับไลบรารีของไคลเอ็นต์ Google API สำหรับ JavaScript ดูข้อมูลโค้ดด้านล่าง
const client = google.accounts.oauth2.initTokenClient({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
scope: 'https://www.googleapis.com/auth/calendar.readonly',
callback: (tokenResponse) => {
if (tokenResponse && tokenResponse.access_token) {
gapi.client.setApiKey('YOUR_API_KEY');
gapi.client.load('calendar', 'v3', listUpcomingEvents);
}
},
});
function listUpcomingEvents() {
gapi.client.calendar.events.list(...);
}
การหมดอายุของโทเค็น
โทเค็นเพื่อการเข้าถึงมีอายุการใช้งานที่สั้น หากโทเค็นเพื่อการเข้าถึงหมดอายุ
ก่อนเซสชันของผู้ใช้จะสิ้นสุดลง ให้รับโทเค็นใหม่โดยการเรียกใช้
requestAccessToken()
จากเหตุการณ์ที่เกิดจากผู้ใช้ เช่น การกดปุ่ม
การใช้โทเค็นเพื่อการเข้าถึงเพื่อเพิกถอนความยินยอม
เรียกใช้เมธอด google.accounts.oauth2.revoke
เพื่อนำความยินยอมของผู้ใช้ออก และ
สิทธิ์เข้าถึงทรัพยากรสำหรับขอบเขตทั้งหมดที่มอบให้แก่แอปของคุณ สิทธิ์เข้าถึงที่ถูกต้อง
ต้องระบุโทเค็นเพื่อเพิกถอนสิทธิ์นี้
google.accounts.oauth2.revoke('414a76cb127a7ece7ee4bf287602ca2b56f8fcbf7fcecc2cd4e0509268120bd7', done => {
console.log(done);
console.log(done.successful);
console.log(done.error);
console.log(done.error_description);
});