Selektor kontaktów w internecie

Interfejs Contact Picker API ułatwia użytkownikom udostępnianie kontaktów z listy kontaktów.

Pete LePage

Czym jest interfejs Contact Picker API?

Korzystanie z interfejsu API selektora kontaktów

Interfejs Contact Picker API wymaga wywołania metody z parametrem „ options” określa typy informacji kontaktowych, które chcesz uzyskać. Druga metoda wskazuje, jakie informacje dostarcza bazowy system.

Wykrywanie cech

Aby sprawdzić, czy interfejs Contact Picker API jest obsługiwany, użyj tych poleceń:

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

Oprócz tego na urządzeniach z Androidem Selektor kontaktów wymaga Androida M lub nowszego.

Otwieranie selektora kontaktów

Punkt wejścia interfejsu Contact Picker API to navigator.contacts.select(). Po wywołaniu zwraca obietnicę i wyświetla selektor kontaktów, umożliwiając użytkownik wybierze kontakty, które chce udostępnić witrynie. Po wybierz, co chcesz udostępnić, i kliknie Gotowe, tablica kontaktów wybranych przez użytkownika.

Gdy wywołujesz funkcję select(), musisz podać tablicę właściwości, które chcesz zwracany jako pierwszy parametr (przy dozwolonych wartościach dowolnej z 'name', 'email', 'tel', 'address' lub 'icon'), oraz opcjonalnie informacje, czy można dodawać wiele kontaktów wybrany jako drugi parametr.

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

Interfejs Contact Picker API można wywołać tylko z bezpiecznej, w kontekście przeglądania i tak jak inne zaawansowane interfejsy API, wymaga gest użytkownika.

Wykrywam dostępne właściwości

Aby sprawdzić, które właściwości są dostępne, wywołaj navigator.contacts.getProperties(). Zwraca obietnicę, która jest rozwiązywana przez tablicę ciągów znaków wskazujących, usług. Na przykład: ['name', 'email', 'tel', 'address']. Możesz przekazać te wartości do select().

Pamiętaj, że usługi nie zawsze są dostępne, a nowe usługi mogą – dodano. W przyszłości inne platformy i źródła kontaktów mogą nakładać ograniczenia które właściwości są udostępniane.

Praca z wynikami

Interfejs Contact Picker API zwraca tablicę kontaktów, a każdy kontakt zawiera tablicę żądanych właściwości. Jeśli kontakt nie ma danych dla żądaną usługę lub użytkownik zrezygnuje z udostępniania , interfejs API zwraca pustą tablicę. (Opiszę, w jaki sposób użytkownik wybiera właściwości w sekcji Kontrola użytkowników).

Jeśli np. witryna żąda name, email i tel, a użytkownik wybiera jeden kontakt, który ma dane w polu nazwy, powoduje wyświetlenie dwóch numerów telefonów, ale nie ma adresu e-mail, zwrócona odpowiedź będzie wyglądać tak:

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

Bezpieczeństwo i uprawnienia

Zespół Chrome zaprojektował i wdrożył interfejs Contact Picker API, wykorzystując podstawowe zasady zdefiniowane w Kontrola dostępu do zaawansowanych funkcji platform internetowych, takich jak kontrola użytkownika, przejrzystość i ergonomia. Wyjaśnię każdy z nich.

Kontrola użytkowników

Dostęp do kont użytkowników kontaktów można otworzyć za pomocą selektora i można je wywołać wyłącznie gestu użytkownika w bezpiecznym kontekście przeglądania najwyższego poziomu. Dzięki temu witryna nie będzie wyświetlać selektora przy wczytywaniu strony ani bez żadnego kontekstu.

Nie można zbiorczo zaznaczyć wszystkich kontaktów, aby zachęcić użytkowników wybrać tylko te kontakty, które muszą udostępnić w przypadku tego konkretnego witryny. Użytkownicy mogą też decydować, które usługi są udostępniane witrynie. klikając przycisk usługi w górnej części selektora.

Przejrzystość

Aby łatwo było zrozumieć, które dane kontaktowe są udostępniane, selektor zawsze zawiera nazwę i ikonę kontaktu oraz wszystkie właściwości witryny poproszono o dostęp. Jeśli np. witryna żąda name, email i tel, wszystkie 3 właściwości pojawią się w selektorze. Ewentualnie jeśli witryna żąda tylko parametru tel, selektor wyświetli tylko nazwę, numerów telefonów.

.

.

Przytrzymanie kontaktu spowoduje wyświetlenie wszystkich informacji, które zostaną udostępniane po zaznaczeniu kontaktu. (Zobacz zdjęcie kontaktu z Cheshire Cat).

Brak trwałości uprawnień

Dostęp do kontaktów jest uzyskiwany na żądanie i nie jest zachowywany. Za każdym razem, gdy strona chce dostępu, musi wywołać funkcję navigator.contacts.select() gestem użytkownika, a użytkownik musi samodzielnie wybrać kontakty, które chce udostępnić. z witryną.

Prześlij opinię

Zespół Chrome chce dowiedzieć się więcej o Twoich doświadczeniach z selektorem kontaktów API.

Problem z implementacją?

Czy wystąpił błąd z implementacją Chrome? Czy wdrożenie różni się od specyfikacji?

• Zgłoś błąd na https://new.crbug.com. Podaj jak najwięcej Podaj możliwie najdokładniejsze instrukcje umożliwiające odtworzenie błędu. ustaw Komponenty na Blink>Contacts. Błąd działa bardzo dobrze do szybkiego i łatwego reprodukcji problemów.

Planujesz korzystać z interfejsu API?

Czy zamierzasz korzystać z interfejsu Contact Picker API? Twoje publiczne wsparcie pomaga Zespół Chrome nadaje priorytet funkcjom i pokazuje innym dostawcom przeglądarek, jak jest ich wsparcie.

• Poinformuj nas, jak zamierzasz korzystać z tego narzędzia w wątku poświęconym dysku WICG.
• Wyślij tweeta na adres @ChromiumDev, używając hashtagu #ContactPicker i daj nam znać, gdzie i jak go używasz.

Przydatne linki

• Publiczne wyjaśnienie
• Specyfikacja selektora kontaktów
• Wersja demonstracyjna interfejsu Contact Picker API i źródło wersji demonstracyjnej interfejsu Contact Picker API
• Śledzenie błędu
• Wpis na temat ChromeStatus.com
• Komponent Blink: Blink>Contacts

Dziękujemy

Wyróżnienie i podziękowania dla Finnur Thorarinssona i Rayana Kanso, którzy i Peter Beverloo, którego twórca koduj ja bez wstydu skradzione i zoptymalizowane na potrzeby wersji demonstracyjnej.

P.S. Imiona i nazwiska w selektorze kontaktów to znaki z Alicji w Krainie Czarów.