前言
介绍了如何使用 JavaScript 中的 Contact Picker API 来读取手机联系人列表的技术和步骤。今日前端早读课文章由 @南城翻译；公号：南城大前端授权分享。
正文从这开始～～
作者注：本文中描述的技术和流程是实验性的，只能在少数浏览器中工作。在撰写本文时，联系人选择器 API 仅支持 Android Chrome（从版本 80 开始）和 iOS Safari（从版本 14.5 开始）。如果要检查是否可使用这个功能，可以访问这个演示网站 alvaromontoro.com/demos/contacts/ 体验。
在以前使用 JavaScript 从手机访问联系人数据是不可想象的。现在有了联系人选择器 API，我们可以使用 JavaScript 来实现这个功能。
【第3360期】在JavaScript中从外部解决Promise：实际应用场景
此功能在需要联系人信息（如电话号码或 VoIP）的应用程序，通过这个功能我们可以在社交平台中发现通讯录中的好友 (前提需要社交平台有对应的手机号码字段)，或者需要填写联系人表单信息时则无需切换应用程序即可获取到相应的数据。
API 和设备将限制可用的属性。开发者可以选择以下五个标准属性：
以上返回的都是数组形式，因为联系人可以有多个电话、电子邮件或多个地址。为了保持一致性，即使它是单个值，返回的数据始终是一个数组。
隐私和安全
存储在手机上的联系人信息可能包含敏感信息，我们必须小心处理。我们需要必须考虑到隐私和安全问题：
联系人选择器 API 代码必须在顶级浏览上下文中运行。它防止外部代码，如广告或第三方插件，读取手机上的联系人列表。
联系人选择器 API 代码只能在用户手势后运行。开发者不能完全自动化这个过程，用户必须采取行为触发后读取联系人。
用户必须允许访问联系人列表。这个是由手机限制而不是 JavaScript 强加的。用户必须授予浏览器访问联系人的权限（如果它还没有授权）。
当他们第一次使用使用联系人选择器 API 的网站时，他们可能会收到这样的提示：
手机会在每次使用联系人选择器 API 代码时显示这个弹出窗口，直到用户点击 “允许”。联系人选择器 API 在未允许之前不会运行。这个一次性的，授权之后不会再弹出。
【第3147期】前端Monorepo大仓权限设计的思考与实现
API 和代码
联系人选择器 API 只定义了两个方法：
两种方法都返回 Promise，但考虑到它们触发的操作会阻止应用程序的正常流程，我们在处理它们时应该使用 async /await。
如前面隐私和安全部分所述，在调用 API 之前需要用户操作，因此如果没有用户交互，我们就无法触发任何内容，因此我们新增一个按钮：
<button onclick="getContactData()">Show contact databutton>
主要的代码将在 getContactData() 函数中。但在此之前如果联系人选择器 API 不可用，显示按钮没有意义，在默认情况下隐藏按钮（添加 hidden 属性），仅在 API 可用时才显示它。通过 "contacts" in navigator 判断当前浏览器环境是否支持该 API：
if ("contacts" in navigator) {
document.querySelector("button").removeAttribute("hidden");
}
接下来是核心的按钮逻辑：
async function getContactData() {
// 指定将读取哪些联系人值
const props = ["tel", "name", "email"];
try {
// 打开本地联系人选择器（在权限被授予后）
const contacts = await navigator.contacts.select(props);
// 这将在本地联系人选择器关闭后执行
if (contacts.length) {
// 如果有数据，显示
alert("选中的数据: " + JSON.stringify(contacts));
} else {
// 没有表示没有选择
alert("没有选择任何内容");
}
} catch (ex) {
// 如果发生错误，显示错误信息
alert(ex.message)
}
}
一旦按钮触发了这个功能，如果浏览器有权限，联系人选择页将会显示出来，展示基本信息：阅读数据的 URL，它将返回什么数据，以及要从中挑选的联系人列表。
关闭弹窗后，contacts 变量将以 JSON 格式存储数据，作为一个数组，其中包含所请求信息的对象（如果联系人卡片中不可用，则可能为空）。
【第3282期】如何在 JS 中快速读取文件
这是选择了联系人后的结果示例：
[
{
"address": [],
"email": [ "[email protected]" ],
"icon": [],
"name": [ "Alvaro Montoro" ],
"tel": [ "555-555-5555", "555-123-4567" ]
}
]
如果数据包含图标，则它将是带有图像的 blob。如果数据包含地址，它将是一个更复杂的对象，包含街道、城市、国家、邮政编码等。
选择多个联系人
可以选择多个联系人。我们需要向 navigator.contacts.select() 方法传递第二个参数来指示此选项。
const props = ["tel", "address", "icon", "name", "email"];
const options = { multiple: true };
const contacts = await navigator.contacts.select(props, options);
结果是一个联系人数组，和上面的示例返回结果是一样的。
总结
联系信息是个人身份信息，我们必须以敏感数据所需的所有谨慎和安全性来处理它。
尊重人们的隐私。不要强迫他们分享他们不想分享的信息。
以安全的方式小心处理数据。如果您正在处理的数据是您自己的数据，您会感到舒适吗？
如果不需要，请不要存储数据。读它，用它，忘记它。不要存储你不使用的数据。
只获取您需要的数据。获得建立信誉和信任所需的一切。
假设一个 Web 应用程序试图在选择电话号码时读取地址、姓名或电子邮件。如果这种情况发生在我身上，我会拒绝授权并离开这个网站。
关于本文
译者：@南城
译文：https://mp.weixin.qq.com/s/BiMsKrglnQxhWHvIfE6X_g
作者：@Alvaro Montoro
原文：https://alvaromontoro.com/blog/68058/read-phone-contact-list-from-javascript
这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下 。
