Contact Picker API 可让用户轻松共享其联系人列表中的联系人。
什么是 Contact Picker API?
自从开始, (几乎)时间的黎明。是对我们而言 我听说过 Web 开发者的说法,这通常是他们构建 iOS/Android 应用的主要原因 应用。
适用于 Android M 或更高版本的 Chrome 80 及 Contact Picker API 规范 一个按需 API,让用户可以从联系人列表中选择条目,并 与网站分享所选评注的有限详细信息。它允许用户 只在他们需要的时间分享他们想要的内容,并让用户更轻松地 与他们的朋友和家人联系和联系。
例如,基于网络的电子邮件客户端可以使用 Contact Picker API 来 选择电子邮件的收件人。一个 Voice-over-IP 应用可以 要拨打哪个电话号码或者,社交网络可以帮助用户 已经加入的好友。
使用联系人选取器 API
Contact Picker API 要求方法调用带有一个 options 参数, 指定您需要的联系信息类型。第二种方法是 底层系统将提供的信息
功能检测
如需检查 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.
}
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": ["+1-206-555-1000", "+1-206-555-1111"]
}]
安全与权限
Chrome 团队使用 Android 核心 API 设计并实施了 Contact Picker API。 定义 控制对强大的 Web 平台功能的访问权限, 包括用户控制、透明度和人体工程学。我会逐一介绍。
用户控制
访问用户的通过选择器选择联系人,并且只能使用 在安全的顶级浏览上下文中触发用户手势。 这样可以确保网站无法在网页加载时显示选择器,也不会随机显示 选择器。
<ph type="x-smartling-placeholder">![屏幕截图,用户可以选择要共享的属性。](https://developer.chrome.google.cn/static/docs/capabilities/web-apis/contact-picker/image/screen-shot-users-choos-d939e544a9bcf.jpg?hl=zh-cn)
不提供批量选择所有联系人的选项来鼓励用户 以便仅选择他们需要就某个特定事件共享的联系人 网站。用户还可以控制与网站共享哪些属性 切换选择器顶部的“媒体资源”按钮。
透明度
为了指明分享的联系人详细信息,选择器会始终显示
显示联系人的姓名和图标,以及该网站具有的任何属性
请求。例如,如果某个网站请求 name
、email
和 tel
,
这三项属性都会显示在选择器中。或者
如果网站仅请求 tel
,选择器将仅显示名称,
电话号码。
![请求所有房源的网站选择器的屏幕截图。](https://developer.chrome.google.cn/static/docs/capabilities/web-apis/contact-picker/image/screen-shot-picker-site-60e23bc587f31.jpg?hl=zh-cn)
name
、email
和
tel
,已选择 1 位联系人。
![屏幕截图:只请求电话号码的网站的选择器。](https://developer.chrome.google.cn/static/docs/capabilities/web-apis/contact-picker/image/screen-shot-picker-site-e1490d566fbfd.jpg?hl=zh-cn)
tel
的网站,已选择一个联系人。
![长按联系人时选择器的屏幕截图。](https://developer.chrome.google.cn/static/docs/capabilities/web-apis/contact-picker/image/screen-shot-picker-a-co-d66001cb05793.jpg?hl=zh-cn)
长按某个联系人即可显示 以及联系人的共享权限。(参见 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 我羞愧
窃取并针对演示进行了重构。
附注:我的联系人选择器中的姓名是《爱丽丝梦游仙境》中的角色。