![การ์ดการให้สิทธิ์ที่กําหนดเองจากตัวอย่างลิงก์ที่มีโลโก้ คำอธิบาย และปุ่มลงชื่อเข้าใช้ของบริษัท](https://developers-dot-devsite-v2-prod.appspot.com/static/workspace/add-ons/images/card-auth-link-preview.png?authuser=8&hl=th)
หากส่วนเสริมของ Google Workspace เชื่อมต่อกับบริการหรือ API ของบุคคลที่สามที่ต้องได้รับสิทธิ์ ส่วนเสริมจะแจ้งให้ผู้ใช้ลงชื่อเข้าใช้และให้สิทธิ์เข้าถึง
หน้านี้อธิบายวิธีตรวจสอบสิทธิ์ผู้ใช้โดยใช้ขั้นตอนการให้สิทธิ์ (เช่น OAuth) ซึ่งประกอบด้วยขั้นตอนต่อไปนี้
- ตรวจหาเมื่อต้องให้สิทธิ์
- แสดงอินเทอร์เฟซของการ์ดที่แจ้งให้ผู้ใช้ลงชื่อเข้าใช้บริการ
- รีเฟรชส่วนเสริมเพื่อให้ผู้ใช้เข้าถึงบริการหรือทรัพยากรที่มีการป้องกันได้
หากส่วนเสริมต้องใช้เฉพาะข้อมูลประจำตัวของผู้ใช้ คุณจะตรวจสอบสิทธิ์ผู้ใช้ได้โดยตรงโดยใช้รหัส Google Workspace หรืออีเมล หากต้องการใช้อีเมลสำหรับการตรวจสอบสิทธิ์ โปรดดูการตรวจสอบคำขอ JSON หากคุณสร้างส่วนเสริมโดยใช้ Google Apps Script ไป โปรดไปที่เอกสารประกอบของ Apps Script เพื่อดูข้อมูลเกี่ยวกับการเชื่อมต่อส่วนเสริมกับบริการของบุคคลที่สาม
ตรวจพบว่าต้องมีการให้สิทธิ์
เมื่อใช้ส่วนเสริม ผู้ใช้อาจไม่มีสิทธิ์เข้าถึงทรัพยากรที่มีการป้องกันเนื่องจากสาเหตุหลายประการ เช่น
- โทเค็นเพื่อการเข้าถึงสำหรับเชื่อมต่อกับบริการของบุคคลที่สามยังไม่ได้สร้างหรือหมดอายุ
- โทเค็นเพื่อการเข้าถึงไม่ครอบคลุมทรัพยากรที่ขอ
- โทเค็นเพื่อการเข้าถึงไม่ครอบคลุมขอบเขตที่จำเป็นของคำขอ
ส่วนเสริมควรตรวจพบกรณีเหล่านี้เพื่อให้ผู้ใช้ลงชื่อเข้าใช้และเข้าถึงบริการของคุณได้
แจ้งให้ผู้ใช้ลงชื่อเข้าใช้บริการของคุณ
เมื่อส่วนเสริมตรวจพบว่าต้องมีการให้สิทธิ์ ส่วนเสริมต้องแสดงอินเทอร์เฟซการ์ดเพื่อแจ้งให้ผู้ใช้ลงชื่อเข้าใช้บริการ การ์ดลงชื่อเข้าใช้ต้องเปลี่ยนเส้นทางผู้ใช้เพื่อทำขั้นตอนการตรวจสอบสิทธิ์และการให้สิทธิ์ของบุคคลที่สามให้เสร็จสมบูรณ์บนโครงสร้างพื้นฐานของคุณ
เราขอแนะนำให้คุณป้องกันแอปปลายทางด้วย Google Sign-In และรับรหัสผู้ใช้โดยใช้โทเค็นระบุตัวตนที่ออกให้ระหว่างการลงชื่อเข้าใช้ การอ้างสิทธิ์ย่อยมีรหัสที่ไม่ซ้ำกันของผู้ใช้และสามารถเชื่อมโยงกับรหัสจากส่วนเสริมของคุณได้
สร้างและส่งคืนบัตรลงชื่อเข้าใช้
สำหรับบัตรลงชื่อเข้าใช้ของบริการ คุณสามารถใช้บัตรให้สิทธิ์ขั้นพื้นฐานของ Google หรือปรับแต่งบัตรเพื่อแสดงข้อมูลเพิ่มเติม เช่น โลโก้ขององค์กร หากเผยแพร่ส่วนเสริมแบบสาธารณะ คุณต้องใช้การ์ดที่กำหนดเอง
บัตรอนุมัติเบื้องต้น
รูปภาพต่อไปนี้แสดงตัวอย่างบัตรให้สิทธิ์ขั้นพื้นฐานของ Google
![ข้อความแจ้งการให้สิทธิ์เบื้องต้นสำหรับบัญชีตัวอย่าง ข้อความแจ้งว่าส่วนเสริมต้องการแสดงข้อมูลเพิ่มเติม แต่ต้องได้รับอนุมัติจากผู้ใช้จึงจะเข้าถึงบัญชีได้](https://developers-dot-devsite-v2-prod.appspot.com/static/workspace/add-ons/images/third-party-auth-prompt.png?authuser=8&hl=th)
หากต้องการใช้บัตรการให้สิทธิ์พื้นฐาน ให้ส่งการตอบกลับ JSON ต่อไปนี้
{ "basic_authorization_prompt": { "authorization_url": "AUTHORIZATION_REDIRECT", "resource": "RESOURCE_DISPLAY_NAME" } }
แทนที่รายการต่อไปนี้
AUTHORIZATION_REDIRECT
: URL สำหรับเว็บแอปที่จัดการการให้สิทธิ์RESOURCE_DISPLAY_NAME
: ชื่อที่แสดงของทรัพยากรหรือบริการที่ได้รับการคุ้มครอง ชื่อนี้จะแสดงต่อผู้ใช้ในข้อความแจ้งการให้สิทธิ์ เช่น หากRESOURCE_DISPLAY_NAME
คือExample Account
จะมีข้อความแจ้งว่า "ส่วนเสริมนี้ต้องการแสดงข้อมูลเพิ่มเติม แต่ต้องได้รับอนุมัติให้เข้าถึงบัญชีตัวอย่างของคุณ"
หลังจากให้สิทธิ์เสร็จแล้ว ระบบจะแจ้งให้ผู้ใช้รีเฟรชส่วนเสริมเพื่อเข้าถึงทรัพยากรที่มีการป้องกัน
กำหนดวงเงินบัตรเครดิต/บัตรเดบิต
หากต้องการแก้ไขข้อความแจ้งการให้สิทธิ์ คุณสามารถสร้างบัตรแบบกำหนดเองสำหรับการลงชื่อเข้าใช้ของบริการได้
หากเผยแพร่ส่วนเสริมแบบสาธารณะ คุณต้องใช้บัตรกันวงเงินที่กำหนดเอง ดูข้อมูลเพิ่มเติมเกี่ยวกับข้อกำหนดในการเผยแพร่สำหรับ Google Workspace Marketplace ได้ที่เกี่ยวกับการตรวจสอบแอป
รูปภาพต่อไปนี้คือตัวอย่างการ์ดการให้สิทธิ์ที่กำหนดเองสำหรับหน้าแรกของส่วนเสริม การ์ดนี้มีโลโก้ คำอธิบาย และปุ่มลงชื่อเข้าใช้ ดังนี้
![บัตรให้สิทธิ์ที่กำหนดเองสำหรับ Cymbal Labs ที่มีโลโก้ คำอธิบาย และปุ่มลงชื่อเข้าใช้ของบริษัท](https://developers-dot-devsite-v2-prod.appspot.com/static/workspace/add-ons/images/card-auth-homepage.png?authuser=8&hl=th)
หากต้องการใช้ตัวอย่างการ์ดที่กำหนดเองนี้ ให้แสดงผลการตอบกลับ JSON ต่อไปนี้
{ "custom_authorization_prompt": { "action": { "navigations": [ { "pushCard": { "sections": [ { "widgets": [ { "image": { "imageUrl": "LOGO_URL", "altText": "LOGO_ALT_TEXT" } }, { "divider": {} }, { "textParagraph": { "text": "DESCRIPTION" } }, { "buttonList": { "buttons": [ { "text": "Sign in", "onClick": { "openLink": { "url": "AUTHORIZATION_REDIRECT", "onClose": "RELOAD", "openAs": "OVERLAY" } }, "color": { "red": 0, "green": 0, "blue": 1, "alpha": 1, } } ] } }, { "textParagraph": { "text": "TEXT_SIGN_UP" } } ] } ] } } ] } } }
แทนที่รายการต่อไปนี้
LOGO_URL
: URL ของโลโก้หรือรูปภาพ ต้องเป็น URL สาธารณะLOGO_ALT_TEXT
: ข้อความแสดงแทนสำหรับโลโก้หรือรูปภาพ เช่นCymbal Labs Logo
DESCRIPTION
: คำกระตุ้นให้ดำเนินการ (Call-To-Action) เพื่อให้ผู้ใช้ลงชื่อเข้าใช้ เช่นSign in to get started
- วิธีอัปเดตปุ่มลงชื่อเข้าใช้
AUTHORIZATION_REDIRECT
: URL สำหรับเว็บแอปที่จัดการการให้สิทธิ์- ไม่บังคับ: หากต้องการเปลี่ยนสีปุ่ม ให้อัปเดตค่าแบบลอย RGBA ของช่อง
color
TEXT_SIGN_UP
: ข้อความที่แจ้งให้ผู้ใช้สร้างบัญชีในกรณีที่ยังไม่มีบัญชี เช่นNew to Cymbal Labs? <a href=\"https://www.example.com/signup\">Sign up</a> here