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

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

संपर्क पिकर एपीआई क्या है?

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

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

उदाहरण के लिए, वेब पर आधारित ईमेल क्लाइंट संपर्क पिकर 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.
}

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

उपलब्ध प्रॉपर्टी का पता लगाया जा रहा है

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

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

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

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

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

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

क्या आपको Chrome को लागू करने में कोई गड़बड़ी मिली? या, लागू करने पर क्या यह स्पेसिफ़िकेशन से अलग है?

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

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

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

मददगार लिंक

धन्यवाद

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

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