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

संपर्क पिकर एपीआई, उपयोगकर्ताओं को अपनी संपर्क सूची में से संपर्कों को शेयर करने का एक आसान तरीका उपलब्ध कराता है.

कॉन्टैक्ट पिकर एपीआई क्या है?

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

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

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

संपर्क पिकर एपीआई का इस्तेमाल करना

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

सुविधा की पहचान करने की सुविधा

यह देखने के लिए कि कॉन्टैक्ट पिकर एपीआई काम करता है या नहीं, इसका इस्तेमाल करें:

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

इसके अलावा, Android पर संपर्क पिकर का इस्तेमाल करने के लिए, Android M या इसके बाद का वर्शन होना ज़रूरी है.

संपर्क पिकर खोलना

कॉन्टैक्ट पिकर एपीआई का एंट्री पॉइंट 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.
}

संपर्क पिकर एपीआई को सिर्फ़ सुरक्षित और टॉप-लेवल के ब्राउज़िंग कॉन्टेक्स्ट से ही कॉल किया जा सकता है. दूसरे दमदार एपीआई की तरह ही, इसके लिए उपयोगकर्ता जेस्चर की ज़रूरत होती है.

उपलब्ध प्रॉपर्टी का पता लगाना

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

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

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

संपर्क पिकर एपीआई संपर्कों का अरे दिखाता है और हर संपर्क में अनुरोध की गई प्रॉपर्टी का कलेक्शन शामिल होता है. अगर किसी संपर्क के पास अनुरोध की गई प्रॉपर्टी का डेटा नहीं है या उपयोगकर्ता किसी खास प्रॉपर्टी को शेयर करने से ऑप्ट-आउट करने का विकल्प चुनता है, तो एपीआई एक खाली अरे दिखाता है. (उपयोगकर्ता कंट्रोल सेक्शन में बताया गया है कि उपयोगकर्ता प्रॉपर्टी कैसे चुनता है.)

उदाहरण के लिए, अगर कोई साइट name, email, और tel का अनुरोध करती है और कोई उपयोगकर्ता सिर्फ़ एक ऐसा संपर्क चुनता है जिसके नाम वाले फ़ील्ड में डेटा है, तो वह दो फ़ोन नंबर देता है, लेकिन उसके पास ईमेल पता नहीं है. ऐसे में, उपयोगकर्ता को यह जवाब मिलेगा:

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

सुरक्षा और अनुमतियां

Chrome की टीम ने कॉन्टैक्ट पिकर एपीआई को डिज़ाइन और लागू करने के लिए, वेब प्लैटफ़ॉर्म की बेहतर सुविधाओं का ऐक्सेस कंट्रोल करना सेक्शन में बताए गए मुख्य सिद्धांतों का पालन किया है. इनमें उपयोगकर्ता कंट्रोल, पारदर्शिता, और एल्गोरिदम की जानकारी शामिल है. मैं हर एक के बारे में विस्तार से बताऊँगी.

उपयोगकर्ता कंट्रोल

उपयोगकर्ताओं के संपर्कों को पिकर के ज़रिए ऐक्सेस किया जा सकता है और इसे सुरक्षित, शीर्ष-स्तरीय ब्राउज़िंग संदर्भ पर केवल उपयोगकर्ता जेस्चर के ज़रिए ही कॉल किया जा सकता है. इससे यह पक्का होता है कि कोई साइट, पेज लोड होने पर पिकर नहीं दिखा सकती है या बिना कॉन्टेक्स्ट के, बिना किसी क्रम के पिकर नहीं दिखा सकती है.

स्क्रीन शॉट, उपयोगकर्ता चुन सकते हैं कि कौनसी प्रॉपर्टी शेयर करनी है.
उपयोगकर्ता, कुछ प्रॉपर्टी शेयर न करने का विकल्प चुन सकते हैं. इस स्क्रीनशॉट में, उपयोगकर्ता ने 'फ़ोन नंबर' बटन से सही का निशान हटा दिया है. साइट ने भले ही फ़ोन नंबर मांगे, लेकिन उन्हें साइट के साथ शेयर नहीं किया जाएगा.

सभी संपर्कों को एक साथ चुनने का कोई विकल्प नहीं है, ताकि उपयोगकर्ताओं को सिर्फ़ वे संपर्क चुनने के लिए बढ़ावा दिया जा सके जिन्हें उन्हें उस वेबसाइट के लिए शेयर करना ज़रूरी है. उपयोगकर्ता, पिकर के ऊपर दिए गए प्रॉपर्टी बटन को टॉगल करके यह भी कंट्रोल कर सकते हैं कि साइट के साथ कौनसी प्रॉपर्टी शेयर की जाएं.

पारदर्शिता

यह साफ़ करने के लिए कि कौनसी संपर्क जानकारी शेयर की जा रही है, पिकर हमेशा संपर्क का नाम, आइकॉन, और साइट से अनुरोध की गई प्रॉपर्टी दिखाता है. उदाहरण के लिए, अगर कोई साइट name, email, और tel का अनुरोध करती है, तो सभी तीनों प्रॉपर्टी, पिकर में दिखेंगी. इसके अलावा, अगर कोई साइट सिर्फ़ tel का अनुरोध करती है, तो पिकर सिर्फ़ नाम और टेलीफ़ोन नंबर दिखाएगा.

सभी प्रॉपर्टी का अनुरोध करने वाली साइट के पिकर का स्क्रीन शॉट.
पिकर, name, email, और tel का अनुरोध करने वाली साइट, एक संपर्क चुना गया.
सिर्फ़ फ़ोन नंबर का अनुरोध करने वाली साइट के पिकर का स्क्रीन शॉट.
पिकर, सिर्फ़ tel का अनुरोध करने वाली साइट, एक संपर्क चुना गया.
किसी संपर्क को दबाकर रखने पर, पिकर का स्क्रीन शॉट.
किसी संपर्क को दबाकर रखने का नतीजा.

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

अनुमति बनी रहती है

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

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

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

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

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

  • https://new.crbug.com पर जाकर गड़बड़ी की शिकायत करें. ज़्यादा से ज़्यादा जानकारी दें, गड़बड़ी ठीक करने के लिए आसान निर्देश दें, और कॉम्पोनेंट को Blink>Contacts पर सेट करें. Glitch का इस्तेमाल करके, समस्या को तुरंत और आसानी से दोबारा शेयर करने में मदद मिलती है.

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

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

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

मददगार लिंक

धन्यवाद

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

कृपया ध्यान दें: मेरे कॉन्टैक्ट पिकर में जो नाम दिए गए हैं वे ऐलिस इन वंडरलैंड के हैं.