无需登录 数据私有 本地保存

联系人选择器测试 - Contacts API演示

开发工具 检测工具 API 联系人 选择器
53
0
0
0

联系人选择器演示

Contacts Picker API — 安全地从用户设备获取联系人信息

检测中...
选择结果

尚未选择联系人

点击上方按钮开始体验 Contacts API

关于 Contacts Picker API
什么是 Contacts Picker API？
Contacts Picker API 是一个现代浏览器 API，允许网页在用户明确授权的情况下，从设备通讯录中选择联系人。与传统的联系人访问方式不同，该 API 不会静默获取所有联系人，而是打开系统级的选择器，只返回用户主动选择的联系人及其指定属性。这从根本上保护了用户隐私。
哪些浏览器和设备支持此 API？
目前 Chrome 80+（Android） 提供完整支持。桌面端 Chrome 及其他浏览器（Firefox、Safari、Edge 桌面版）暂不支持。这是因为该 API 依赖 Android 系统的联系人选择器 UI。在桌面端，我们的工具会自动提供模拟演示模式，让您也能完整体验功能流程。
可以获取联系人的哪些信息？
可请求的属性包括：name（姓名）、email（邮箱）、tel（电话）、address（地址）、icon（头像）。具体哪些属性可用取决于设备支持情况。可通过 navigator.contacts.getProperties() 动态检测。地址属性返回的是 ContactAddress 对象，包含街道、城市、邮编等结构化字段。
如何确保用户隐私安全？
  • 用户手势要求：必须由用户点击触发，无法自动弹出选择器
  • 显式选择：只有用户勾选的联系人才会返回数据
  • 按需获取：仅返回请求的属性字段，不会泄露额外信息
  • 需安全上下文：仅 HTTPS 页面可用
  • 无持久权限：每次选择都需要用户重新授权
  • 顶级上下文：iframe 中需要显式的 allow="contacts" 属性
用户取消选择会怎样？如何判断？
用户取消选择时，navigator.contacts.select() 的 Promise 仍会正常 resolve，但返回一个空数组 []。这不是错误，而是用户主动拒绝分享的正常行为。开发者应妥善处理空数组的情况，避免将取消选择误判为错误。
与传统的联系人 API（如 Android ContactsContract）有何区别？
传统 API 通常需要广泛的权限（如 READ_CONTACTS），可读取全部联系人数据，隐私风险高。Contacts Picker API 采用"选择即授权"模式——用户看到什么就分享什么，应用无法在后台静默读取通讯录。这种设计更符合现代隐私保护理念，也是 Google 推荐的新方式。
实际应用场景有哪些？
典型场景包括：邀请好友加入应用、分享内容给指定联系人、自动填充收件人信息、选择紧急联系人、会议邀请等。特别适合需要用户从联系人中挑选少数几位的场景，而非批量导入全部通讯录。
代码示例 
const props = ['name', 'email', 'tel'];
const opts = { multiple: true };
try {
  const contacts = await navigator
    .contacts.select(props, opts);
  if (contacts.length === 0) {
    console.log('用户取消了选择');
  } else {
    contacts.forEach(c => {
      console.log(c.name?.[0]);
      console.log(c.email?.[0]);
      console.log(c.tel?.[0]);
    });
  }
} catch (err) {
  console.error('API错误:', err);
}

使用 getProperties() 检测可用属性，动态适配不同设备。

🔧 相关工具