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

Contact Picker API ทำให้ผู้ใช้สามารถแชร์รายชื่อติดต่อจากรายการรายชื่อติดต่อของตนได้อย่างง่ายดาย

Pete LePage

Contact Picker API คืออะไร

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

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

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

หากต้องการตรวจสอบว่าระบบรองรับ 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.
}

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

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

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

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

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

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

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

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

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

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

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

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

วันที่

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

ความโปร่งใส

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

วันที่

วันที่

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

ไม่มีการถาวรของสิทธิ์

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

ความคิดเห็น

ทีม Chrome ต้องการทราบเกี่ยวกับประสบการณ์ที่คุณได้รับจากเครื่องมือเลือกรายชื่อติดต่อ API

หากมีปัญหาในการติดตั้งใช้งาน

คุณพบข้อบกพร่องในการติดตั้งใช้งาน Chrome ไหม หรือเป็นการติดตั้งใช้งาน แตกต่างจากข้อกำหนด

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

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

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

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

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

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

ขอขอบคุณ

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

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