网页版联系人选择器

Contact Picker API 可让用户轻松共享其联系人列表中的联系人。

Pete LePage

什么是 Contact Picker API？

自从开始， （几乎）时间的黎明。是对我们而言 我听说过 Web 开发者的说法，这通常是他们构建 iOS/Android 应用的主要原因 应用。

适用于 Android M 或更高版本的 Chrome 80 及 Contact Picker API 规范 一个按需 API，让用户可以从联系人列表中选择条目，并 与网站分享所选评注的有限详细信息。它允许用户 只在他们需要的时间分享他们想要的内容，并让用户更轻松地 与他们的朋友和家人联系和联系。

例如，基于网络的电子邮件客户端可以使用 Contact Picker API 来 选择电子邮件的收件人。一个 Voice-over-IP 应用可以 要拨打哪个电话号码或者，社交网络可以帮助用户 已经加入的好友。

注意：Chrome 团队对设计和实现进行了很多思考 Contact Picker API 的详细信息，以确保浏览器只会准确共享 人们的选择请参阅安全和隐私权 部分。

使用联系人选取器 API

Contact Picker API 要求方法调用带有一个 options 参数， 指定您需要的联系信息类型。第二种方法是 底层系统将提供的信息

注意：请查看 Contact Picker API 演示 并查看 来源。

功能检测

如需检查 Contact Picker API 是否受支持，请使用以下命令：

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

此外，在 Android 上，联系人选取器要求使用 Android M 或更高版本。

打开联系人选择器

Contact Picker API 的入口点是 navigator.contacts.select()。 调用后，它会返回一个 promise 并显示联系人选择器，以便允许 用户选择要与网站共享的联系人。更新后 选择要共享的内容并点击完成后，promise 会解析为 用户选择的联系人数组。

调用 select() 时，您必须提供所需的属性数组 作为第一个参数返回（允许的值为以下任何一项）： 'name'、'email'、'tel'、'address' 或 'icon'）， 还可以选择是否允许多个联系人 作为第二个参数

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

注意：若要支持 'address' 和 'icon'，需要使用 Chrome 84 或更高版本。

Contacts Picker API 只能从安全的 顶级浏览上下文，与其他强大的 API 一样，它需要 手势。

检测可用属性

如需检测哪些属性可用，请调用 navigator.contacts.getProperties()。 它会返回一个使用字符串数组进行解析的 promise，该数组指示 属性可用。例如：['name', 'email', 'tel', 'address']。您可以将这些值传递给 select()。

请注意，属性并非始终可用， 已添加。未来，其他平台和联系方式可能会限制 要共享哪些属性

处理结果

Contact Picker API 会返回一个联系人数组，每个联系人都包含 所请求属性的数组。如果联系人没有 或者用户选择拒绝共享特定的 属性，API 将返回一个空数组。（我描述用户如何选择媒体资源 “用户控制”部分。）

例如，如果某个网站请求 name、email 和 tel，而用户 选择姓名字段中有数据的单个联系人，并提供两个 但没有电子邮件地址，则返回的响应将是：

[{
  "email": [],
  "name": ["Queen O'Hearts"],
  "tel": ["[phone]", "[phone]"]
}]

注意：联系人字段上的标签和其他语义信息会被舍弃。

安全与权限

Chrome 团队使用 Android 核心 API 设计并实施了 Contact Picker API。 定义 控制对强大的 Web 平台功能的访问权限， 包括用户控制、透明度和人体工程学。我会逐一介绍。

用户控制

访问用户的通过选择器选择联系人，并且只能使用 在安全的顶级浏览上下文中触发用户手势。 这样可以确保网站无法在网页加载时显示选择器，也不会随机显示 选择器。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 用户可以选择不共享某些属性。在此屏幕截图中， 用户已取消选中“电话号码”按钮。虽然网站 但我们不会将其与网站共享。

不提供批量选择所有联系人的选项来鼓励用户 以便仅选择他们需要就某个特定事件共享的联系人 网站。用户还可以控制与网站共享哪些属性 切换选择器顶部的“媒体资源”按钮。

透明度

为了指明分享的联系人详细信息，选择器会始终显示 显示联系人的姓名和图标，以及该网站具有的任何属性 请求。例如，如果某个网站请求 name、email 和 tel， 这三项属性都会显示在选择器中。或者 如果网站仅请求 tel，选择器将仅显示名称， 电话号码。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 选择器，网站请求获取 name、email和 tel，已选择 1 位联系人。

。

<ph type="x-smartling-placeholder">

</ph>

选择器，仅请求访问 tel 的网站，已选择一个联系人。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 长按某个联系人的结果。

长按某个联系人即可显示 以及联系人的共享权限。（参见 Cheshire Cat 联系人图片。）

没有权限保留

对联系人的访问权限是按需使用的，不会保留。每当网站想 它必须通过用户手势调用 navigator.contacts.select()， 并且用户必须单独选择要共享的联系人 。

反馈

Chrome 团队希望了解您使用联系人选择器的体验 API。

实施时遇到问题？

您在 Chrome 的实现过程中是否发现了错误？还是 与规范不同？

• 访问 https://new.crbug.com 提交 bug。务必尽可能多添加一些 提供重现错误的简单说明，以及 将 Components 设为 Blink>Contacts。故障效果非常好 以便轻松快速地重现问题。

打算使用该 API？

您打算使用 Contact Picker API 吗？你的公开支持将帮助 Chrome 团队确定各项功能的优先级，并向其他浏览器供应商展示如何 但为他们提供支持至关重要

• 请在 WICG Discourse 会话中说明您打算如何使用它。
• 使用 # 标签向 @ChromiumDev 发送推文 #ContactPicker和 请告诉我们您使用它的地点和方式。

实用链接

• 公开铺垫消息
• 联系人选择器规范
• Contact Picker API 演示和 Contact Picker API 演示源代码
• 跟踪错误
• ChromeStatus.com 条目
• Blink 组件：Blink>Contacts

谢谢

非常感谢 负责实现这项功能的 Peter Beverloo code 我羞愧 窃取并针对演示进行了重构。

附注：我的联系人选择器中的姓名是《爱丽丝梦游仙境》中的角色。