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

Contact Picker API ช่วยให้ผู้ใช้สามารถแบ่งปันที่อยู่ติดต่อจากรายการที่อยู่ติดต่อของตนได้โดยง่าย

Pete LePage

Contact Picker API คืออะไร

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

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

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

การใช้ Contact Picker 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 และผู้ใช้เลือกรายชื่อติดต่อรายการเดียวที่มีข้อมูลในช่องชื่อ แต่ระบุหมายเลขโทรศัพท์ 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 รายการ
ภาพหน้าจอของเครื่องมือเลือกเมื่อกดรายชื่อติดต่อค้างไว้
ผลลัพธ์ของการกดรายชื่อติดต่อค้างไว้

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

ไม่มีความต่อเนื่องของสิทธิ์

การเข้าถึงรายชื่อติดต่อเป็นแบบออนดีมานด์และยังคงอยู่ ทุกครั้งที่เว็บไซต์ต้องการเข้าถึง เว็บไซต์จะต้องเรียกใช้ 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 ที่ผมขโมยและเปลี่ยนโฉมหน้าวิดีโอนี้อย่างน่าอับอาย

ป.ล. ชื่อในเครื่องมือเลือกรายชื่อติดต่อของฉันเป็นตัวละครจากอลิซในแดนมหัศจรรย์