So greifen Sie über das Adressbuch auf Kontakte zu

Thomas Steiner

Manchmal möchten Sie Nutzern Ihrer App die Möglichkeit geben, einen ihrer Kontakte auszuwählen, um ihm eine Nachricht über eine E-Mail- oder Chat-Anwendung zu senden. Oder Sie möchten ihnen helfen, herauszufinden, welche ihrer Kontakte bereits einer sozialen Plattform beigetreten sind.

Der moderne Ansatz

Contact Picker API verwenden

Wenn Sie Kontakte aus dem Adressbuch abrufen möchten, müssen Sie die Contact Picker API verwenden. Damit können Nutzer Einträge aus ihrer Kontaktliste auswählen und begrenzte Details der ausgewählten Einträge für Ihre App freigeben. Es sind mehrere Attribute wie name, email, tel, address, und icon verfügbar. Informationen zu den konkret unterstützten Attributen erhalten Sie mit dem Aufruf von navigator.contacts.getProperties(). Wenn der Nutzer mehrere Kontakte auswählen soll, übergeben Sie {multiple: true} als zweiten Parameter von navigator.contacts.select().

Browser Support

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

Source

Die Contact Picker API ist in der Android-Version von Chrome ab Version 80 verfügbar.

Der klassische Ansatz

Reguläres Formular verwenden

Die Fallback-Methode besteht darin, ein reguläres Formular zu verwenden, in dem der Nutzer die Kontaktdaten eingeben kann.

Browser Support

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

Source

Progressive Enhancement

Wenn die Kontaktauswahl-API unterstützt wird, blenden Sie die statischen Formularfelder aus und zeigen Sie stattdessen eine Auswahlschaltfläche an.

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}`;
    }
  });
}

Weitere Informationen

Demo

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}`
    }
  });
}