联系人选择器 API
Contact Picker API 允许用户从他们的联系人列表中选择条目,并将选定条目的有限详细信息共享给网站或应用程序。
注意: 此 API 在 Web Workers 中不可用(未通过 WorkerNavigator 暴露)。
Contact Picker API 的概念和用法
长期以来,访问联系人一直是原生应用程序中的一项功能。Contacts Picker API 将此功能引入了 Web 应用程序。
用例包括选择联系人,通过电子邮件或聊天应用程序发送消息;选择联系人的电话号码用于 IP 语音 (VOIP);或者发现已经加入社交平台的联系人。用户代理还可以提供与用户设备上的其他应用程序一致的体验。
调用 select 方法时,系统会向用户显示一个联系人选择器,他们可以通过该选择器选择要与 Web 应用程序共享的联系人信息。在授予显示联系人选择器的权限之前,需要用户进行交互,并且对联系人的访问不是持久的;用户必须在应用程序每次发出请求时授予访问权限。
此 API 仅从安全的顶级浏览上下文中可用,并且非常谨慎地考虑联系人数据的敏感性和隐私。用户有责任选择要共享的数据,并且只允许共享选定联系人的特定数据,而不能访问其他联系人的任何数据。
接口
ContactAddress-
表示一个物理地址。
ContactsManager-
为用户提供了一种选择和共享联系人有限详细信息给 Web 应用程序的方式。
-
返回一个
ContactsManager对象实例,可以从该实例访问所有其他功能。
示例
特性检测
以下代码检查 Contact Picker API 是否受支持。
const supported = "contacts" in navigator;
检查支持的属性
以下异步函数使用 getProperties() 方法来检查支持的属性。
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
}
}
选择联系人
以下示例设置了要为每个联系人检索的属性数组,并设置了一个选项对象以允许选择多个联系人。
然后定义一个异步函数,该函数使用 select() 方法向用户显示联系人选择器界面并处理所选结果。
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() 是一个由开发者定义的函数。
规范
| 规范 |
|---|
| 联系人选择器 API # contacts-manager |
浏览器兼容性
加载中…