Web için kişi seçici

Kişi Seçici API'sı, kullanıcıların kendi kişi listelerindeki kişileri paylaşması için kolay bir yol sağlar.

Contact Picker API'si nedir?

Kullanıcının kişilerine mobil cihazdan erişme olanağı, iOS/Android uygulamalarının bir özelliğidir. (neredeyse) zamanın şafak vakti. YouTube'da en çok kullanılan özellik Web geliştiricilerden gelen geri bildirimlere göre, iOS/Android cihazlarını uygulamasını indirin.

Chrome 80'de Android M veya sonraki sürümlerde kullanılabilen Contact Picker API spesifikasyonu Kullanıcıların kişi listelerinden girişler seçmelerine ve Seçilen girişlerin sınırlı ayrıntılarını bir web sitesiyle paylaşma. Kullanıcılara şunları sağlar: istedikleri şeyi istedikleri zaman paylaşmalarına olanak sağlar ve kullanıcıların arkadaşlarına ve ailelerine ulaşıp onlarla bağ kurabilirsiniz.

Örneğin, web tabanlı bir e-posta istemcisi; Contact Picker API'sini kullanarak e-postanın alıcılarını seçin. Seslendirme IP uygulaması Telefon numarasını girin. Ya da sosyal ağ, kullanıcının daha önce katılmış olan arkadaşları görebilirsiniz.

Contact Picker API'sini kullanma

Contact Picker API'si, istediğiniz iletişim bilgisi türlerini belirtir. İkinci bir yöntem de temel sistemin hangi bilgileri sağlayacağını belirlemek önemlidir.

Özellik algılama

Contact Picker API'sinin desteklenip desteklenmediğini kontrol etmek için şunu kullanın:

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

Ayrıca, Android'de Kişi Seçici için Android M veya sonraki sürümleri gerekir.

Kişi Seçiciyi Açma

Contact Picker API'sinin giriş noktası navigator.contacts.select(). Çağrı yapıldığında bir söz döndürür ve kişi seçiciyi göstererek kullanıcının siteyle paylaşmak istediği kişileri seçmesine olanak tanır. Şu tarihten sonra: paylaşacağınızı seçtikten sonra Bitti'yi tıkladığınızda vaat kullanıcı tarafından seçilen kişi dizisidir.

select() öğesini çağırırken istediğiniz bir özellik dizisini sağlamanız gerekir ilk parametre olarak döndürülür (izin verilen değerler, 'name', 'email', 'tel', 'address' veya 'icon'), ve isteğe bağlı olarak birden çok kişinin ikinci parametre olarak seçilir.

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

Kişi Seçici API'si yalnızca güvenli bağlamına göz atmak ister. Diğer güçlü API'lerde olduğu gibi, Kullanıcı hareketi.

Kullanılabilir özellikleri algılama

Hangi tesislerin kullanılabilir olduğunu tespit etmek için navigator.contacts.getProperties() işlevini çağırın. Bir vaat döndürerek söz konusu dizelerle çözülür. kullanılabilir. Örnek: ['name', 'email', 'tel', 'address']. Bu değerleri select() adlı cihaza aktarabilirsiniz.

Özelliklerin her zaman kullanılamayacağını ve yeni mülklerin eklendi. Gelecekte diğer platformlar ve kişi kaynakları bu kısıtlamaya tabi olabilir. ve hangi özelliklerin paylaşılacağını belirler.

Sonuçları işleme

Contact Picker API'si bir dizi kişi döndürür ve her kişi istenen özelliklerin dizisi. Bir kişinin veya kullanıcı belirli bir öğeyi paylaşmayı devre dışı bırakmayı seçerse özelliği varsa API boş bir dizi döndürür. (Kullanıcının tesisleri nasıl seçtiğini açıklıyorum (Kullanıcı denetimi bölümündeki) tıklayın.)

Örneğin, bir site name, email ve tel isteğinde bulunursa ve bir kullanıcı ad alanında veri bulunan tek bir kişi seçer ve ancak bir e-posta adresi yoksa döndürülen yanıt şöyle olur:

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

Güvenlik ve izinler

Chrome ekibi, temel bilgileri kullanarak Contact Picker API'sini tanımlanan ilkelere Güçlü Web Platformu Özelliklerine Erişimi Kontrol Etme dahil olmak üzere tüm bunları kapsar. Her birini açıklayacağım.

Kullanıcı denetimi

Kullanıcıların kişiler seçici aracılığıyla oluşturulur ve yalnızca güvenli, üst düzey göz atma bağlamında bir kullanıcı hareketi. Bu durum, bir sitenin sayfa yüklenirken seçiciyi ya da rastgele gösterilmesini engeller bağlam olmadan kullanabilirsiniz.

Ekran görüntüsü, kullanıcılar hangi özelliklerin paylaşılacağını seçebilir.
Kullanıcılar bazı tesisleri paylaşmamayı seçebilir. Bu ekran görüntüsünde, kullanıcı 'Telefon numaraları'nın işaretini kaldırdı düğmesini tıklayın. Her ne kadar site telefon numaraları istendiğinde siteyle paylaşılmaz.

Kullanıcıları teşvik etmek için tüm kişileri topluca seçme imkanı yoktur. yalnızca o paylaşım için paylaşmaları gereken kişileri seçmek web sitesi. Kullanıcılar, siteyle hangi mülklerin paylaşılacağını da kontrol edebilir Bunu yapmak için seçicinin üst kısmındaki özellik düğmesini etkinleştirin.

Şeffaflık

Hangi kişi ayrıntılarının paylaşıldığını netleştirmek için seçici her zaman kişinin adı ve simgesi ile sitenin sahip olduğu tüm özellikleri gösterir istendi. Örneğin, bir site name, email ve tel için istekte bulunursa üç özellik de seçicide gösterilir. Alternatif olarak: Bir site yalnızca tel isteğinde bulunursa seçici yalnızca adı gösterir ve telefon numaraları.

Tüm özellikleri isteyen site için seçicinin ekran görüntüsü.
Seçici, istekte bulunan site: name, email ve tel, bir kişi seçildi.
ziyaret edin.
'nı inceleyin.
Yalnızca telefon numaraları isteyen sitenin seçicisinin ekran görüntüsü.
Seçici, yalnızca tel isteyen site, bir kişi seçildi.
Bir kişiye uzun basıldığında seçicinin ekran görüntüsü.
Bir kişiye uzun basmanın sonucu.

Bir kişiye uzun bastığınızda, içinde bulunacak tüm bilgiler kişi seçilirse paylaşılır. (Cheshire Cat'in kişi resmine bakın.)

İzin kalıcılığı yok

Kişilere erişim isteğe bağlıdır ve kalıcı değildir. Bir site her istekte bulunduğunda navigator.contacts.select() bir kullanıcı hareketiyle çağrılmalıdır, ve kullanıcının paylaşmak istediği kişileri tek tek seçmesi gerekir göstermenin iyi bir yoludur.

Geri bildirim

Chrome ekibi, Kişi Seçici ile ilgili deneyimlerinizi öğrenmek istiyor API'ye gidin.

Uygulamayla ilgili bir sorun mu var?

Chrome'un uygulanmasıyla ilgili bir hata buldunuz mu? Yoksa ve spesifikasyondan farklı mı?

  • https://new.crbug.com adresinden hata bildiriminde bulunun. Olabildiğince çok sayıda ve hatayı yeniden oluşturmak için basit talimatlar sağlayın ve Bileşenler'i Blink>Contacts olarak ayarlayın. Glitch çok iyi sonuç veriyor hızlı ve kolay problem yeniden prodüksiyonları paylaşmanız için gereklidir.

API'yi kullanmayı mı planlıyorsunuz?

Contact Picker API'yi kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chrome ekibinin özelliklere öncelik vermesi için yardımcı olur ve diğer tarayıcı tedarikçilerine onu desteklemek çok önemli.

Faydalı bağlantılar

Teşekkürler

Finnur Thorarinsson ve Rayan Kanso'ya teşekkür ederiz. Peter Beverloo’yu kodlama utançsızca çalındı ve yeniden düzenlendi.

Not: Kişi seçicimdeki adlar Aylin Harikalar Diyarında'dan karakterler.