ऐड्रेस बुक में मौजूद संपर्कों को कैसे ऐक्सेस करें

Thomas Steiner

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

मॉडर्न तरीका

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

ऐड्रेस बुक से संपर्क पाने के लिए, आपको कॉन्टैक्ट पिकर एपीआई का इस्तेमाल करना होगा. इससे उपयोगकर्ताओं को अपनी संपर्क सूची से एंट्री चुनने और चुनी गई एंट्री की सीमित जानकारी आपके ऐप्लिकेशन के साथ शेयर करने की अनुमति मिलती है. इसमें name, email, tel, address, और icon जैसी कई प्रॉपर्टी उपलब्ध हैं. सपोर्ट की जाने वाली प्रॉपर्टी के बारे में जानने के लिए, navigator.contacts.getProperties() को कॉल करें. उपयोगकर्ता को एक से ज़्यादा संपर्क चुनने की अनुमति देने के लिए, navigator.contacts.select() के दूसरे पैरामीटर के तौर पर {multiple: true} पास करें.

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: not supported.
  • Safari: not supported.

Source

कॉन्टैक्ट पिकर एपीआई, Chrome के Android वर्शन में वर्शन 80 से उपलब्ध है.

क्लासिक तरीका

सामान्य फ़ॉर्म का इस्तेमाल करना

फ़ॉलबैक के तौर पर, सामान्य फ़ॉर्म का इस्तेमाल किया जा सकता है. इससे उपयोगकर्ता, संपर्क की जानकारी डाल सकते हैं.

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.

Source

परतदार वृद्धि

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

const button = document.querySelector('button');
const name = document.querySelector('.name');
const address = document.querySelector('.address');
const email = document.querySelector('.email');
const tel = document.querySelector('.tel');
const pre = document.querySelector('pre');
const autofills = document.querySelectorAll('.autofill');

if ('contacts' in navigator) {
  button.hidden = false;
  for (const autofill of autofills) {
    autofill.parentElement.style.display = 'none';
  }
  address.parentElement.style.display = 'block';
  button.addEventListener('click', async () => {
    const props = ['name', 'email', 'tel', 'address'];
    const opts = { multiple: false };
    try {
      const [contact] = await navigator.contacts.select(props, opts);
      name.value = contact.name;
      address.value = contact.address;
      tel.value = contact.tel;
      email.value = contact.email;
    } catch (err) {
      pre.textContent = `${err.name}: ${err.message}`;
    }
  });
}

इस बारे में और पढ़ें

डेमो

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
    />
    <title>How to access contacts from the address book</title>
  </head>
  <body>
    <h1>How to access contacts from the address book</h1>

    <p>Ship your order as a present to a friend.</p>
    <button hidden type="button">Open address book</button>
    <pre></pre>

    <label> Name <input class="name" autocomplete="name"></label>

    <label hidden>Address <input class="address" required></label>

    <label>Street <input class="autofill" autocomplete="address-line1" required></label>

    <label>City <input class="autofill" autocomplete="address-level2" required></label>

    <label>State / Province / Region (optional) <input class="autofill" autocomplete="address-level1"></label>

    <label>ZIP / Postal code (optional) <input class="autofill" autocomplete="postal-code"></label>

    <label>Country <input class="autofill" autocomplete="country"></label>

    <label>Email<input class="email" autocomplete="email"></label>

    <label>Telephone<input class="tel" autocomplete="tel"></label>
  </body>
</html>

CSS


        html {
  box-sizing: border-box;
  font-family: system-ui, sans-serif;
  color-scheme: dark light;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 1rem;
}

input {
  display: block;
  margin-block-end: 1rem;
}

JS


        const button = document.querySelector('button');
const name = document.querySelector('.name')
const address = document.querySelector('.address')
const email = document.querySelector('.email')
const tel = document.querySelector('.tel')
const pre = document.querySelector('pre')
const autofills = document.querySelectorAll('.autofill')

if ('contacts' in navigator) {
  button.hidden = false;
  for (const autofill of autofills) {
    autofill.parentElement.style.display = 'none'
  }
  address.parentElement.style.display = 'block';
  button.addEventListener('click', async () => {
    const props = ['name', 'email', 'tel', 'address'];
    const opts = {multiple: false};
    try {
      const [contact] = await navigator.contacts.select(props, opts);
      name.value = contact.name;
      address.value = contact.address;
      tel.value = contact.tel
      email.value = contact.email;
    } catch (err) {
      pre.textContent = `${err.name}: ${err.message}`
    }
  });
}