Как получить доступ к контактам из адресной книги

Томас Штайнер

Иногда вам может понадобиться позволить пользователям вашего приложения выбрать один из своих контактов для отправки сообщения по электронной почте или в чате, или помочь им узнать, кто из их контактов уже зарегистрирован на той или иной социальной платформе.

Современный способ

Использование API выбора контактов

Для получения контактов из адресной книги необходимо использовать API выбора контактов , который позволяет пользователям выбирать записи из списка контактов и делиться ограниченной информацией о выбранных записях с вашим приложением. Доступны несколько свойств, таких как name , email , tel , address и icon . Чтобы узнать о конкретных поддерживаемых свойствах, вызовите метод navigator.contacts.getProperties() . Чтобы разрешить пользователю выбирать несколько контактов, передайте {multiple: true} в качестве второго параметра метода navigator.contacts.select() .

Browser Support

  • Chrome: не поддерживается.
  • Edge: не поддерживается.
  • Firefox: не поддерживается.
  • Safari: не поддерживается.

Source

API для выбора контактов доступен в Android-версии Chrome, начиная с версии 80.

Классический способ

Используя правильную форму

В качестве запасного варианта используется стандартная форма, позволяющая пользователю ввести контактные данные.

Browser Support

  • Chrome: 1.
  • Край: 12.
  • Firefox: 1.
  • Сафари: 3.

Source

Прогрессивное улучшение

Если API для выбора контактов поддерживается, скройте статические поля формы и вместо них отобразите кнопку выбора.

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