Kontaktauswahl für das Web

Die Contact Picker API bietet eine einfache Möglichkeit für Nutzer, Kontakte aus ihrer Kontaktliste freizugeben.

Pete LePage

Was ist die Contact Picker API?

Der Zugriff auf die Kontakte des Nutzers auf einem Mobilgerät ist seitdem eine Funktion von iOS- und Android-Apps. (fast) am Morgen der Zeit. Das ist eine der häufigsten Funktionsanfragen, Ich höre von Webentwicklern, und das ist oft der Hauptgrund dafür, dass sie eine iOS- oder Android-App

Die Contact Picker API-Spezifikation ist ab Chrome 80 für Android M und höher verfügbar. On-Demand-API, mit der Nutzer Einträge aus ihrer Kontaktliste auswählen und Bestimmte Details zu den ausgewählten Einträgen an eine Website weitergeben Damit können Nutzende und nur das freigeben, was sie wollen und wann sie es wollen. Außerdem erleichtern Sie es den Nutzenden, um mit Freunden und Familie in Kontakt zu treten.

Ein webbasierter E-Mail-Client könnte beispielsweise die Contact Picker API verwenden, um die Empfänger einer E-Mail auswählen. Eine Voiceover-IP-App könnte welche Telefonnummer angerufen werden soll. Oder ein soziales Netzwerk könnte Nutzenden helfen, welche Freunde bereits beigetreten sind.

Contact Picker API verwenden

Die Contact Picker API erfordert einen Methodenaufruf mit einem Optionsparameter, der gibt die gewünschten Arten von Kontaktinformationen an. Eine zweite Methode zeigt Ihnen, welche Informationen das zugrunde liegende System liefert.

Funktionserkennung

So prüfen Sie, ob die Contact Picker API unterstützt wird:

const supported = ('contacts' in navigator && 'ContactsManager' in window);

Auf Android-Geräten ist außerdem für die Kontaktauswahl Android M oder höher erforderlich.

Öffnen der Kontaktauswahl

Der Einstiegspunkt für die Contact Picker API ist navigator.contacts.select(). Wenn sie aufgerufen wird, gibt sie ein Promise zurück und zeigt den Kontakt-Picker an, Nutzer die Kontakte auswählen, die sie für die Website freigeben möchten. Nachher Wenn du ausgewählt hast, was du teilen möchtest, und auf Fertig klickst, wird das Versprechen mit einer Array der vom Nutzer ausgewählten Kontakte

Beim Aufrufen von select() müssen Sie ein Array mit Eigenschaften angeben, die Sie verwenden möchten. werden als erster Parameter zurückgegeben (wobei die zulässigen Werte 'name', 'email', 'tel', 'address' oder 'icon'), und optional festlegen, ob mehrere Kontakte als zweiten Parameter ausgewählt.

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.
}

Die Contacts Picker API kann nur von einem sicheren, Browserkontext auf oberster Ebene und wie andere leistungsstarke APIs auch für den Nutzer.

Verfügbare Attribute ermitteln

Rufen Sie navigator.contacts.getProperties() auf, um zu ermitteln, welche Unterkünfte verfügbar sind. Es gibt ein Versprechen zurück, das mit einem Array von Zeichenfolgen aufgelöst wird, die angeben, welche verfügbar sind. Beispiel: ['name', 'email', 'tel', 'address'] Sie können diese Werte an select() übergeben.

Hinweis: Unterkünfte sind nicht immer verfügbar und neue Properties können hinzugefügt. Künftig werden andere Plattformen und Kontaktquellen möglicherweise welche Eigenschaften gemeinsam genutzt werden.

Ergebnisse verarbeiten

Die Contact Picker API gibt ein Array von Kontakten zurück und jeder Kontakt enthält Ein Array der angeforderten Attribute. Hat ein Kontakt keine Daten zum Property ausgewählt haben oder der Nutzer die Freigabe eines bestimmten gibt die API ein leeres Array zurück. (Ich beschreibe, wie Nutzer Properties auswählen. im Bereich Nutzersteuerung)

Beispiel: Eine Website fordert name, email und tel an und ein Nutzer einen einzelnen Kontakt auswählt, für den Daten im Namensfeld enthalten sind, und gibt zwei Telefonnummern, die aber keine E-Mail-Adresse haben, wird folgende Antwort zurückgegeben:

[{
  "email": [],
  "name": ["Queen O'Hearts"],
  "tel": ["+1-206-555-1000", "+1-206-555-1111"]
}]

Sicherheit und Berechtigungen

Das Chrome-Team entwickelte und implementierte die Contact Picker API mithilfe der zentralen die in den Zugriff auf leistungsstarke Webplattform-Funktionen steuern einschließlich Nutzersteuerung, Transparenz und Ergonomie. Ich erläutere sie im Einzelnen.

Nutzersteuerung

Zugriff auf die ist über die Auswahl verfügbar und kann nur mit Eine Nutzergeste in einem sicheren Browserkontext auf oberster Ebene So wird verhindert, dass die Auswahl beim Seitenaufbau oder zufällig eingeblendet wird ohne Kontext hinzufügen.

<ph type="x-smartling-placeholder">
</ph> Screenshot: Nutzer können auswählen, welche Eigenschaften sie teilen möchten. <ph type="x-smartling-placeholder">
</ph> Nutzer können bestimmte Unterkünfte nicht freigeben. In diesem Screenshot Nutzer hat das Häkchen neben "Telefonnummern" entfernt. Schaltfläche. Auch wenn die Website nach Telefonnummern fragen, werden diese nicht an die Website weitergegeben.

Es gibt keine Option zur Bulk-Auswahl aller Kontakte, sodass die Nutzer ermutigt werden. um nur die Kontakte auszuwählen, die sie für diese bestimmte Person freigeben müssen, Website. Nutzer können auch steuern, welche Eigenschaften für die Website freigegeben werden. indem Sie oben in der Auswahl auf die Schaltfläche „Property“ (Eigenschaften) klicken.

Transparenz

Um klarzustellen, welche Kontaktdetails geteilt werden, Name und Symbol des Kontakts sowie alle Eigenschaften, die die Website hat angefordert. Wenn eine Website beispielsweise name, email und tel anfordert, werden alle drei Eigenschaften in der Auswahl angezeigt. Alternativ können Sie Wenn eine Website nur tel anfordert, wird in der Auswahl nur der Name angezeigt. Telefonnummern.

<ph type="x-smartling-placeholder">
</ph> Screenshot der Auswahl für die Website, in der alle Unterkünfte angefordert werden. <ph type="x-smartling-placeholder">
</ph> Auswahl, Website, die name, email und tel, 1 Kontakt ausgewählt.
<ph type="x-smartling-placeholder">
</ph> Screenshot der Auswahl für eine Website, in der nur Telefonnummern angefordert werden <ph type="x-smartling-placeholder">
</ph> Auswahl, Website fordert nur tel an, ein Kontakt ausgewählt.
<ph type="x-smartling-placeholder">
</ph> Screenshot der Auswahl, wenn ein Kontakt lange gedrückt wird. <ph type="x-smartling-placeholder">
</ph> Das Ergebnis eines langen Drückens auf einen Kontakt.

Durch langes Drücken auf einen Kontakt werden alle Informationen wenn der Kontakt ausgewählt ist. (Siehe Kontaktbild für Cheshire Cat.)

Keine Berechtigungspersistenz

Der Zugriff auf Kontakte ist bei Bedarf und nicht dauerhaft möglich. Jedes Mal, wenn eine Website muss navigator.contacts.select() mit einer Nutzergeste aufgerufen werden. und der Nutzer muss die Kontakte, die er teilen möchte, einzeln auswählen mit der Website.

Feedback

Das Chrome-Team möchte mehr über Ihre Erfahrungen mit der Kontaktauswahl erfahren der API erstellen.

Probleme bei der Implementierung?

Haben Sie bei der Implementierung von Chrome einen Fehler gefunden? Oder ist die Implementierung von der Spezifikation abweichen?

  • Melden Sie den Fehler unter https://new.crbug.com. Achten Sie darauf, so viele wie möglich, einfache Anweisungen zum Reproduzieren des Fehlers Setzen Sie Components auf Blink>Contacts. Glitch funktioniert super für das schnelle und einfache Reproduzieren von Problemen.

Möchten Sie die API verwenden?

Möchten Sie die Contact Picker API verwenden? Ihre öffentliche Unterstützung hilft Chrome-Team, um Funktionen zu priorisieren, und zeigt anderen Browseranbietern, ist es wichtig, sie zu unterstützen.

Nützliche Links

Vielen Dank

Ein großes Lob und ein großes Dankeschön an Finnur Thorarinsson und Rayan Kanso, die Implementierung der Funktion und Peter Beverloo, Code: Ich fühle mich schamlos wurde gestohlen und für die Demo refaktoriert.

PS: Die Namen in meinem Kontakt-Picker sind Figuren aus Alice im Wunderland.