Safari调用navigator.credentials获取密码凭证仅支持PublicKeyCredential问题咨询

问题根因 #

MDN对navigator.credentials的支持标注不存在错误，你遇到的报错是Safari对该API分类型分版本支持的特性导致：

• Safari从13版本开始就支持navigator.credentials根接口，但16.4之前的版本仅支持WebAuthn对应的PublicKeyCredential类型，完全不支持PasswordCredential类型的存取操作
• 你使用的Safari 14.1.1属于未支持密码凭证的版本，调用navigator.credentials.get传入password: true参数时，自然会抛出NotSupportedError: Only PublicKeyCredential is supported.错误

兼容解决方案 #

你可以按照优先级选择适配方案：

• 优先做特性兜底判断，不要直接调用API，执行逻辑前先校验环境支持度：

if ('PasswordCredential' in window) {
  // 环境支持，走navigator.credentials的程序化密码存取逻辑
} else {
  // 环境不支持，走降级方案
}

• 低版本Safari降级使用原生表单自动填充能力：给账号输入框添加autocomplete="username"属性，密码输入框添加autocomplete="current-password"属性，即可实现几乎一致的自动填充体验，仅缺少程序化控制的能力
• 若需要更强的自定义控制能力，可以降级到本地加密存储方案：将加密后的用户凭证存储在本地，用户完成身份校验后解密读取，注意不要明文存储敏感信息到localStorage、sessionStorage等明文存储介质中

额外注意事项 #

• 即使是支持PasswordCredential的Safari版本，也要求站点必须部署HTTPS（localhost本地开发环境除外），否则navigator.credentials接口会直接返回undefined
• 调用接口前需要确认用户未开启Safari的「阻止跨站跟踪」功能，该功能会限制所有凭证类API的调用权限

内容的提问来源于stack exchange，提问作者M1Reeder