เครื่องมือเลือกรายชื่อติดต่อสำหรับเว็บ

Contact Picker API ช่วยให้ผู้ใช้แชร์รายชื่อติดต่อจากรายชื่อติดต่อของตนเองได้อย่างง่ายดาย

Pete LePage

Contact Picker API คืออะไร

การเข้าถึงรายชื่อติดต่อของผู้ใช้บนอุปกรณ์เคลื่อนที่เป็นฟีเจอร์ของแอป iOS/Android มาตั้งแต่ (เกือบ) ยุคแรกๆ นี่เป็นคําขอฟีเจอร์ที่พบบ่อยที่สุดอย่างหนึ่งที่เราได้รับจากนักพัฒนาเว็บ และมักเป็นเหตุผลสําคัญที่นักพัฒนาแอปสร้างแอป iOS/Android

ข้อกำหนดของ Contact Picker API พร้อมใช้งานใน Chrome 80 บน Android M ขึ้นไป ซึ่งเป็น API แบบออนดีมานด์ที่ช่วยให้ผู้ใช้เลือกรายการจากรายชื่อติดต่อและแชร์รายละเอียดที่จํากัดของรายการที่เลือกกับเว็บไซต์ได้ ซึ่งช่วยให้ผู้ใช้แชร์เฉพาะสิ่งที่ต้องการเมื่อต้องการ และช่วยให้ผู้ใช้เข้าถึงและเชื่อมต่อกับเพื่อนและครอบครัวได้ง่ายขึ้น

เช่น โปรแกรมรับส่งอีเมลบนเว็บอาจใช้ Contact Picker API เพื่อเลือกผู้รับอีเมล แอป VoIP อาจค้นหาหมายเลขโทรศัพท์ที่จะโทร หรือโซเชียลเน็ตเวิร์กอาจช่วยให้ผู้ใช้ค้นพบว่าเพื่อนๆ คนไหนเข้าร่วมแล้ว

การใช้ Contact Picker API

Contact Picker API ต้องใช้การเรียกเมธอดที่มีพารามิเตอร์ options ซึ่งระบุประเภทข้อมูลติดต่อที่ต้องการ วิธีที่สองจะบอกคุณว่าระบบพื้นฐานจะให้ข้อมูลใดบ้าง

การตรวจหาฟีเจอร์

หากต้องการตรวจสอบว่าระบบรองรับ Contact Picker API หรือไม่ ให้ใช้

const supported = ('contacts' in navigator && 'ContactsManager' in window);

นอกจากนี้ เครื่องมือเลือกรายชื่อติดต่อใน Android ต้องใช้ Android M ขึ้นไป

การเปิดเครื่องมือเลือกรายชื่อติดต่อ

จุดแรกเข้าของ Contact Picker API คือ navigator.contacts.select() เมื่อเรียกใช้ ฟังก์ชันนี้จะแสดงผลลัพธ์ที่เป็นสัญญาและแสดงเครื่องมือเลือกรายชื่อติดต่อ ซึ่งช่วยให้ผู้ใช้เลือกรายชื่อติดต่อที่ต้องการแชร์กับเว็บไซต์ได้ หลังจากเลือกสิ่งที่จะแชร์แล้วคลิกเสร็จสิ้น ระบบจะแสดงรายการผู้ติดต่อที่ผู้ใช้เลือก

เมื่อเรียกใช้ select() คุณต้องระบุอาร์เรย์ของพร็อพเพอร์ตี้ที่ต้องการแสดงผลเป็นพารามิเตอร์แรก (ค่าที่อนุญาตคือ 'name', 'email', 'tel', 'address' หรือ 'icon') และเลือกได้ว่าจะให้ระบบเลือกผู้ติดต่อได้หลายรายเป็นพารามิเตอร์ที่ 2 หรือไม่

const props = ['name', 'email', 'tel', 'address', 'icon'];
const opts = {multiple: true};

try {
  const contacts = await navigator.contacts.select(props, opts);
  handleResults(contacts);
} catch (ex) {
  // Handle any errors here.
}

Contacts Picker API สามารถเรียกใช้ได้จากบริบทการท่องเว็บระดับบนสุดที่ปลอดภัยเท่านั้น และต้องใช้ท่าทางสัมผัสของผู้ใช้เช่นเดียวกับ API ที่มีประสิทธิภาพอื่นๆ

กำลังตรวจหาพร็อพเพอร์ตี้ที่พร้อมใช้งาน

หากต้องการตรวจหาพร็อพเพอร์ตี้ที่พร้อมใช้งาน ให้โทรหา navigator.contacts.getProperties() โดยจะแสดงผลพรอมต์ที่แก้ไขด้วยอาร์เรย์สตริงที่ระบุพร็อพเพอร์ตี้ที่ใช้ได้ เช่น ['name', 'email', 'tel', 'address'] คุณสามารถส่งค่าเหล่านี้ไปยัง select() ได้

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

การจัดการผลลัพธ์

Contact Picker API จะแสดงผลอาร์เรย์ของรายชื่อติดต่อ และรายชื่อติดต่อแต่ละรายการจะมีอาร์เรย์ของพร็อพเพอร์ตี้ที่ขอ หากผู้ติดต่อไม่มีข้อมูลสำหรับพร็อพเพอร์ตี้ที่ขอ หรือผู้ใช้เลือกที่จะไม่แชร์พร็อพเพอร์ตี้หนึ่งๆ API จะแสดงผลอาร์เรย์ว่าง (ฉันอธิบายวิธีที่ผู้ใช้เลือกพร็อพเพอร์ตี้ในส่วนการควบคุมของผู้ใช้)

ตัวอย่างเช่น หากเว็บไซต์ขอ name, email และ tel และผู้ใช้เลือกรายชื่อติดต่อรายการเดียวที่มีข้อมูลในช่องชื่อ ระบุหมายเลขโทรศัพท์ 2 หมายเลข แต่ไม่มีอีเมล คำตอบที่แสดงจะเป็นดังนี้

[{
  "email": [],
  "name": ["Queen O'Hearts"],
  "tel": ["+1-206-555-1000", "+1-206-555-1111"]
}]

ความปลอดภัยและสิทธิ์

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

การควบคุมของผู้ใช้

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

ถ่ายภาพหน้าจอ ผู้ใช้เลือกพร็อพเพอร์ตี้ที่จะแชร์ได้
ผู้ใช้เลือกที่จะไม่แชร์พร็อพเพอร์ตี้บางรายการได้ ในภาพหน้าจอนี้ ผู้ใช้ได้ยกเลิกการเลือกปุ่ม "หมายเลขโทรศัพท์" แม้ว่าเว็บไซต์จะขอหมายเลขโทรศัพท์ แต่ระบบจะไม่แชร์หมายเลขดังกล่าวกับเว็บไซต์

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

ความโปร่งใส

เครื่องมือเลือกจะแสดงชื่อและไอคอนของรายชื่อติดต่อ รวมถึงพร็อพเพอร์ตี้ที่เว็บไซต์ขอมาเสมอ เพื่อชี้แจงว่าระบบจะแชร์ข้อมูลติดต่อใด เช่น หากเว็บไซต์ขอ name, email และ tel พร็อพเพอร์ตี้ทั้ง 3 รายการจะแสดงในเครื่องมือเลือก หรือหากเว็บไซต์ขอเฉพาะ tel เครื่องมือเลือกจะแสดงเฉพาะชื่อและหมายเลขโทรศัพท์

ภาพหน้าจอเครื่องมือเลือกสำหรับเว็บไซต์ที่ขอพร็อพเพอร์ตี้ทั้งหมด
เครื่องมือเลือก เว็บไซต์ที่ขอ name, email และ tel เลือกผู้ติดต่อ 1 ราย
ภาพหน้าจอเครื่องมือเลือกสำหรับเว็บไซต์ที่ขอเฉพาะหมายเลขโทรศัพท์
เครื่องมือเลือก เว็บไซต์ขอเฉพาะ tel เลือกผู้ติดต่อ 1 ราย
ภาพหน้าจอเครื่องมือเลือกเมื่อกดรายชื่อติดต่อค้างไว้
ผลลัพธ์ของการกดรายชื่อติดต่อค้างไว้

การกดรายชื่อติดต่อค้างไว้จะแสดงข้อมูลทั้งหมดที่จะแชร์หากเลือกรายชื่อติดต่อนั้นไว้ (ดูรูปภาพติดต่อแมวเชสเชอร์)

ไม่มีการเก็บรักษาสิทธิ์

การเข้าถึงรายชื่อติดต่อจะทำได้แบบออนดีมานด์และคงอยู่ตลอดไป ทุกครั้งที่เว็บไซต์ต้องการเข้าถึง จะต้องเรียกใช้ navigator.contacts.select() ด้วยท่าทางสัมผัสของผู้ใช้ และผู้ใช้ต้องเลือกรายชื่อติดต่อที่ต้องการแชร์กับเว็บไซต์ทีละรายการ

ความคิดเห็น

ทีม Chrome อยากทราบความคิดเห็นของคุณเกี่ยวกับ Contact Picker API

พบปัญหาในการติดตั้งใช้งานใช่ไหม

หากพบข้อบกพร่องในการใช้งาน Chrome หรือการใช้งานแตกต่างจากข้อกําหนดหรือไม่

  • รายงานข้อบกพร่องที่ https://new.crbug.com อย่าลืมระบุรายละเอียดให้มากที่สุด ระบุวิธีการง่ายๆ ในการทําให้เกิดข้อบกพร่องซ้ำ และตั้งค่าคอมโพเนนต์เป็น Blink>Contacts Glitch เหมาะสำหรับการแชร์ การทำซ้ำโจทย์ที่ง่ายและรวดเร็ว

หากกำลังวางแผนที่จะใช้ API

คุณกำลังวางแผนที่จะใช้ Contact Picker API ใช่ไหม การสนับสนุนแบบสาธารณะของคุณจะช่วยให้ทีม Chrome จัดลำดับความสำคัญของฟีเจอร์ต่างๆ ได้ และแสดงให้เห็นว่าการสนับสนุนฟีเจอร์เหล่านี้สำคัญเพียงใดต่อผู้ให้บริการเบราว์เซอร์รายอื่นๆ

ลิงก์ที่มีประโยชน์

ขอขอบคุณ

ขอขอบคุณ Finnur Thorarinsson และ Rayan Kanso ที่นำฟีเจอร์นี้ไปใช้งาน และ Peter Beverloo ที่เราขโมยโค้ดมาเพื่อนำไปรีแฟกทอริงสำหรับเดโมนี้

หมายเหตุ: ชื่อในเครื่องมือเลือกรายชื่อติดต่อของฉันเป็นตัวละครจาก Alice in Wonderland