联系人选择器 API

可用性有限

此特性不是基线特性,因为它在一些最广泛使用的浏览器中不起作用。

安全上下文: 此功能仅在安全上下文(HTTPS)中可用,且支持此功能的浏览器数量有限。

实验性: 这是一项实验性技术
在生产中使用此技术之前,请仔细检查浏览器兼容性表格

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 是否受支持。

js
const supported = "contacts" in navigator;

检查支持的属性

以下异步函数使用 getProperties() 方法来检查支持的属性。

js
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() 方法向用户显示联系人选择器界面并处理所选结果。

js
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

浏览器兼容性

另见