वेब के लिए संपर्क पिकर

Contact Picker API, लोगों को उनकी संपर्क सूची से संपर्क शेयर करने का एक आसान तरीका उपलब्ध कराता है.

Pete LePage

Contact Picker API क्या है?

मोबाइल डिवाइस पर उपयोगकर्ता के संपर्कों को ऐक्सेस करने की सुविधा, iOS/Android ऐप्लिकेशन में शुरू से ही उपलब्ध है. यह वेब डेवलपर से मिलने वाली सबसे आम अनुरोधों में से एक है. साथ ही, अक्सर यही मुख्य वजह होती है कि वे iOS/Android ऐप्लिकेशन बनाते हैं.

Android M या इसके बाद के वर्शन पर Chrome 80 से उपलब्ध Contact Picker API स्पेसिफ़िकेशन, मांग पर उपलब्ध होने वाला एपीआई है. इसकी मदद से, लोग अपनी संपर्क सूची से एंट्री चुन सकते हैं. साथ ही, चुनी गई एंट्री की सीमित जानकारी किसी वेबसाइट के साथ शेयर कर सकते हैं. इससे लोगों को यह तय करने में मदद मिलती है कि उन्हें क्या शेयर करना है और कब शेयर करना है. साथ ही, इससे लोगों को अपने दोस्तों और परिवार के सदस्यों से जुड़ने में आसानी होती है.

उदाहरण के लिए, वेब पर चलने वाला कोई ईमेल क्लाइंट, Contact Picker API का इस्तेमाल करके ईमेल पाने वाले लोगों को चुन सकता है. वॉइस-ओवर-आईपी ऐप्लिकेशन यह पता लगा सकता है कि किस फ़ोन नंबर पर कॉल करना है. इसके अलावा, कोई सोशल नेटवर्क किसी व्यक्ति को यह पता लगाने में मदद कर सकता है कि उसके कौन-कौनसे दोस्त पहले ही शामिल हो चुके हैं.

Contact Picker API का इस्तेमाल करना

Contact Picker API को विकल्प पैरामीटर के साथ एक तरीके से कॉल करने की ज़रूरत होती है. यह पैरामीटर, संपर्क जानकारी के उन टाइप के बारे में बताता है जो आपको चाहिए. दूसरे तरीके से आपको यह पता चलता है कि सिस्टम कौनसी जानकारी देगा.

सुविधा का पता लगाना

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' में से किसी भी वैल्यू का इस्तेमाल किया जा सकता है. साथ ही, यह भी बताना होगा कि दूसरे पैरामीटर के तौर पर एक से ज़्यादा संपर्कों को चुना जा सकता है या नहीं.

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 को सिर्फ़ सुरक्षित, टॉप-लेवल के ब्राउज़िंग कॉन्टेक्स्ट से कॉल किया जा सकता है. साथ ही, अन्य पावरफ़ुल एपीआई की तरह, इसके लिए उपयोगकर्ता के जेस्चर की ज़रूरत होती है.

किराये पर लेने के लिए उपलब्ध प्रॉपर्टी का पता लगाना

कौनसी प्रॉपर्टी उपलब्ध हैं, यह पता लगाने के लिए navigator.contacts.getProperties() को कॉल करें. यह एक प्रॉमिस दिखाता है. यह प्रॉमिस, स्ट्रिंग की एक ऐसी कैटगरी के साथ रिज़ॉल्व होता है जिससे यह पता चलता है कि कौनसी प्रॉपर्टी उपलब्ध हैं. उदाहरण के लिए: ['name', 'email', 'tel', 'address']. इन वैल्यू को select() में पास किया जा सकता है.

ध्यान रखें कि प्रॉपर्टी हमेशा उपलब्ध नहीं होती हैं. साथ ही, नई प्रॉपर्टी जोड़ी जा सकती हैं. आने वाले समय में, अन्य प्लैटफ़ॉर्म और संपर्क सोर्स यह तय कर सकते हैं कि कौनसी प्रॉपर्टी शेयर की जा सकती हैं.

नतीजों को मैनेज करना

Contact Picker 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 का अनुरोध करती है, तो तीनों प्रॉपर्टी, पिकर में दिखेंगी. इसके अलावा, अगर कोई साइट सिर्फ़ tel का अनुरोध करती है, तो पिकर सिर्फ़ नाम और फ़ोन नंबर दिखाएगा.

सभी प्रॉपर्टी का अनुरोध करने वाली साइट के लिए, पिकर का स्क्रीनशॉट.
Picker, site requesting name, email, and tel, one contact selected.
सिर्फ़ फ़ोन नंबर का अनुरोध करने वाली साइट के लिए, पिकर का स्क्रीनशॉट.
Picker, site requesting only tel, one contact selected.
किसी संपर्क को दबाकर रखने पर, पिकर का स्क्रीनशॉट.
किसी संपर्क को दबाकर रखने पर दिखने वाला नतीजा.

किसी संपर्क पर देर तक दबाकर रखने से, वह सारी जानकारी दिखेगी जो संपर्क को चुनने पर शेयर की जाएगी. (चेशायर कैट की संपर्क इमेज देखें.)

अनुमति को सेव नहीं किया जाता

संपर्कों का ऐक्सेस सिर्फ़ तब मिलता है, जब इसकी ज़रूरत होती है. इसे सेव नहीं किया जाता. जब भी किसी साइट को ऐक्सेस करना हो, तो उसे उपयोगकर्ता के जेस्चर के साथ navigator.contacts.select() को कॉल करना होगा. साथ ही, उपयोगकर्ता को उन संपर्कों को अलग-अलग चुनना होगा जिन्हें उसे साइट के साथ शेयर करना है.

सुझाव/राय दें या शिकायत करें

Chrome टीम, Contact Picker API को इस्तेमाल करने के आपके अनुभव के बारे में जानना चाहती है.

क्या आपको लागू करने में कोई समस्या आ रही है?

क्या आपको Chrome के साथ काम करने वाले किसी एक्सटेंशन में कोई गड़बड़ी मिली? या क्या लागू करने का तरीका, खास जानकारी से अलग है?

  • https://new.crbug.com पर जाकर, गड़बड़ी की रिपोर्ट करें. ज़्यादा से ज़्यादा जानकारी शामिल करें. गड़बड़ी को दोहराने के लिए आसान निर्देश दें. साथ ही, Components को Blink>Contacts पर सेट करें.

क्या आपको एपीआई का इस्तेमाल करना है?

क्या आपको Contact Picker API का इस्तेमाल करना है? सार्वजनिक तौर पर आपकी मदद से, Chrome टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, इससे अन्य ब्राउज़र वेंडर को यह पता चलता है कि इन सुविधाओं को सपोर्ट करना कितना ज़रूरी है.

  • WICG Discourse थ्रेड पर, हमें बताएं कि आपको इसका इस्तेमाल कैसे करना है.
  • @ChromiumDev को ट्वीट करें. इसके लिए, हैशटैग #ContactPicker का इस्तेमाल करें. साथ ही, हमें बताएं कि इसका इस्तेमाल कहां और कैसे किया जा रहा है.

काम के लिंक

धन्यवाद

इस सुविधा को लागू करने के लिए, फ़िनुर थोरारिनसन और रायन कैन्सो को बहुत-बहुत धन्यवाद. साथ ही, पीटर बेवरलू को भी धन्यवाद, जिनके कोड को मैंने बिना किसी शर्म के चुराया और डेमो के लिए फिर से बनाया.

PS: मेरे संपर्क चुनने वाले टूल में मौजूद नाम, ऐलिस इन वंडरलैंड के किरदार हैं.