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

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

Pete LePage

Contact Picker API คืออะไร

การใช้ Contact Picker API

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

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

หากต้องการตรวจสอบว่าระบบรองรับ Contact Picker API หรือไม่ ให้ใช้โค้ดต่อไปนี้

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

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

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

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

เมื่อเรียกใช้ 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 ที่มีประสิทธิภาพอื่นๆ API นี้ต้องใช้ท่าทางสัมผัสของผู้ใช้

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

หากต้องการตรวจหาพร็อพเพอร์ตี้ที่พร้อมใช้งาน ให้เรียกใช้ navigator.contacts.getProperties() โดยจะแสดงผล Promise ที่แก้ไขด้วยอาร์เรย์ของสตริงซึ่งระบุว่ามีพร็อพเพอร์ตี้ใดบ้าง ที่พร้อมใช้งาน ตัวอย่างเช่น ['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 ตัวเลือกจะแสดงเฉพาะชื่อและ หมายเลขโทรศัพท์

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

ไม่มีการคงสิทธิ์

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

ความคิดเห็น

ทีม Chrome ต้องการทราบความคิดเห็นของคุณเกี่ยวกับประสบการณ์การใช้งาน Contact Picker API

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

หากพบข้อบกพร่องในการใช้งาน Chrome หรือการติดตั้งใช้งาน แตกต่างจากข้อกำหนด

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

หากมีแผนจะใช้ API

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

• แชร์วิธีที่คุณวางแผนจะใช้ในเธรด WICG Discourse
• ส่งทวีตถึง @ChromiumDev โดยใช้แฮชแท็ก #ContactPicker และ แจ้งให้เราทราบว่าคุณใช้ฟีเจอร์นี้ที่ไหนและอย่างไร

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

• คำอธิบายสาธารณะ
• ข้อกำหนดของเครื่องมือเลือกรายชื่อที่ติดต่อ
• การสาธิต Contact Picker API และแหล่งที่มาของการสาธิต Contact Picker API
• ข้อบกพร่องในการติดตาม
• รายการใน ChromeStatus.com
• คอมโพเนนต์ Blink: Blink>Contacts

ขอขอบคุณ

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

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