Contact Picker API

Der Zugriff auf Kontakte ist seit langem eine Funktion, die in nativen Anwendungen verfügbar ist. Die Contacts Picker API bringt diese Funktionalität in Webanwendungen.

Anwendungsfälle umfassen das Auswählen von Kontakten für Nachrichten über eine E-Mail- oder Chat-Anwendung, die Auswahl einer Telefonnummer eines Kontakts für die Nutzung mit Voice over IP (VOIP) oder das Entdecken von Kontakten, die einer sozialen Plattform bereits beigetreten sind. Benutzeragenten können auch eine konsistente Erfahrung mit anderen Anwendungen auf dem Gerät eines Benutzers bieten.

Beim Aufruf der select-Methode der ContactsManager-Schnittstelle wird dem Benutzer ein Contact Picker angezeigt, über den sie dann Kontaktinformationen zur Freigabe mit der Webanwendung auswählen können. Eine Benutzerinteraktion ist erforderlich, bevor die Erlaubnis zum Anzeigen des Contact Pickers erteilt wird, und der Zugriff auf Kontakte ist nicht persistent; der Benutzer muss bei jeder Anfrage durch die Anwendung den Zugriff erneut erlauben.

Diese API ist nur aus einem sicheren Top-Level-Browsing-Kontext verfügbar und berücksichtigt sehr sorgfältig die Sensibilität und den Datenschutz von Kontaktdaten. Es liegt in der Verantwortung des Benutzers, welche Daten er teilt. Es werden nur spezifische Daten für ausgewählte Kontakte erlaubt, ohne Zugang zu irgendwelchen Daten anderer Kontakte.

ContactAddress

Repräsentiert eine physische Adresse.

ContactsManager

Bietet eine Möglichkeit für Benutzer, begrenzte Details von Kontakten mit einer Webanwendung auszuwählen und zu teilen.

Navigator.contacts

Gibt eine ContactsManager-Objektinstanz zurück, über die alle anderen Funktionen abgerufen werden können.

Der folgende Code überprüft, ob die Contact Picker API unterstützt wird.

const supported = "contacts" in navigator;

Die folgende asynchrone Funktion verwendet die getProperties()-Methode, um unterstützte Eigenschaften zu überprüfen.

async function checkProperties() {
  const supportedProperties = await navigator.contacts.getProperties();
  if (supportedProperties.includes("name")) {
    // run code for name support
  }
  if (supportedProperties.includes("email")) {
    // run code for email support
  }
  if (supportedProperties.includes("tel")) {
    // run code for telephone number support
  }
  if (supportedProperties.includes("address")) {
    // run code for address support
  }
  if (supportedProperties.includes("icon")) {
    // run code for avatar support
  }
}

Das folgende Beispiel setzt ein Array von Eigenschaften, die für jeden Kontakt abgerufen werden sollen, und legt ein Optionsobjekt fest, um die Auswahl mehrerer Kontakte zu ermöglichen.

Es wird dann eine asynchrone Funktion definiert, die die select()-Methode verwendet, um dem Benutzer eine Contact Picker-Oberfläche zu zeigen und die ausgewählten Ergebnisse zu verarbeiten.

const props = ["name", "email", "tel", "address", "icon"];
const opts = { multiple: true };

async function getContacts() {
  try {
    const contacts = await navigator.contacts.select(props, opts);
    handleResults(contacts);
  } catch (ex) {
    // Handle any errors here.
  }
}

handleResults() ist eine vom Entwickler definierte Funktion.

• A Contact Picker for the Web
• A Contact Picker demo on glitch