了解 Web 的面容 ID 和触控 ID

了解 Web 的面容 ID 和触控 ID

面容 ID 和触控 ID 可在登录时向你提供顺畅的体验，现在 Safari 浏览器有了 Web 验证 API，你可以将其应用于自己的网站上。了解如何将这另一种便捷、安全的登录方式添加到你的网站上。

资源
相关视频

WWDC20
- Web 开发者的创新
下载

（你好 WWDC 2020）你好欢迎来到 WWDC （了解 Web 的面容 ID 和触控 ID）大家好我是 Jiewen 来自 WebKit 团队今天我要讲的是 Web 的面容 ID 和触控 ID 本次的讲座尤其适合那些想给网站添加这个超酷新特性的 Web 开发者我们直接开始吧对于手机上一些 app 的用户体验我个人很喜欢即使用面容 ID 或触控 ID 来重新登陆 app 下面我用自己最喜欢的演示 app Shiny 来为你展示 Shiny 是一款你每天都可以用的 app 它展示给你的是一幅美好的图景第一次登录 Shiny 我需要输入用户名和密码由于我非常关心安全问题因此我启用了 Shiny 的双因素认证在本例中我需要等待 SMS 第二因素代码再继续登录一旦我提交了 SMS 2FA 代码我就登录了然后我就能看到这只可爱的狗狗 iOS 使用自动填充可以使登录过程更顺畅但是即使如此我仍然需要执行几个步骤并思考很多 Shiny 的一个政策是如果在几个小时内一直不活跃那我就需要重新登录你会在许多高安全级别的情景中看到类似的政策比如登录某一银行但是这一次我在登录的时候我无需经历填写密码以及 SMA 2FA 等流程只像这样使用面容 ID 即可砰我登录好了这样既更高效又更安全本次讲座旨在将相同的用户体验带入你的网站我快速概述一下我点击“登录”按钮 Safari 浏览器提示我进行确认然后砰面容 ID 我登录进去了下面我们开始讲述如何将此功能添加到网站 Web 的面容 ID 和触控 ID 由称为 Web 身份验证的标准提供支持我先简单讨论一下该标准然后介绍 Apple 平台身份验证器的实现
之后我会介绍采用这项出色的新特性所需的基础知识最后讲一些重要的最佳做法结束讲座
现在我们谈一谈 Web 身份验证标准 Web 身份验证是 JavaScript API 对你们 Web 开发者而言可以在 Web 上使用基于公钥的身份验证该 API 是在公钥密码术之上构建的并且带来了许多独特的功能
我们从一些高级概念开始首先你需要习惯这个奇怪而又熟悉的概念即依赖方本它质上代表你的网站其次 API 生成并利用一个 JavaScript 对象我们称之为公钥凭据里面包含执行身份验证所需的所有必要信息
第三所有私钥均由名为身份验证器的设备管理而不是用户的目录管理身份验证器可以是安全密钥这个词你可能听说过或者是我们刚才看见的 iPhone Web 浏览器管理界面以便用户与身份验证器交互并将验证器的响应桥接到网站第四验证器可以根据需要通过我们称为证明的过程加密证明他们的属性
这些概念可能对很多人来说比较陌生但是本次讲座应该解释你需要了解的所有内容以便你在网站开始使用他们我们来看看你为什么要这么做
首先 Web 身份验证通过公钥加密提供了强大的身份验证流程这比密码强大得多并且不能重复使用或被破坏
但更重要的是这可以防备网络钓鱼 Safari 浏览器仅允许在其创建的网站中使用由此 API 创建的公钥凭据并且凭据永远不能从他们创建的身份验证器中导出来这意味着一旦提供了公钥凭据用户不可能将其意外泄露给另一方很酷是吧？这就是对 Web 身份验证标准的概述稍后我将讨论实际 API 现在我们谈谈 Apple 在 Web 身份验证标准下可以启用面容 ID 和触控 ID的一些独特功能
像 iPhone 这种身份验证器我们称为平台身份验证器因为身份验证器是平台内置的功能 Apple 在身份验证器中构建了两个重要的属性如我们所见第一个是面容 ID 和触控 ID 用来验证用户的身份
第二个是安全隔区这是一个处理器用于管理所有的私钥并保证它们不能离开设备通过将两者结合起来使用面容 ID 或触控 ID 进行的每次登录实质上都是一种多因素身份验证设备发送回网站的响应包含两个因素你拥有的东西 iPhone 还有你具有的特征即生物特征然后只需轻按一下即可登录简直太棒了但是网站就像银行一样可以被管控以强制执行多因素身份验证存储在响应中的信息可能是不充足的他们需要制造商提供一些额外的证据证明设备确实保留了这些不错的属性你可以使用称为证明的可选安全功能来执行此操作
这基本上是一种安全的方法你可以向设备制造商索要证明即设备是真实的并且真的具有其声称具有的功能这对于像我刚才提到的那种特定用例非常有用
但是它能通过侵犯用户隐私的方式实现例如设备可以被指示使用单个的、唯一的证明证书然后唯一证书轻松成为跟踪的媒介链接整个 Web 上用户所有已经证明的帐户 Apple 关注用户隐私问题因此 Apple 建立了自己的证明服务该服务会为每个凭据生成唯一证书这样网站将不可以再使用它们跟踪用户该服务称为 Apple Anonymous Attestation 我们即将推出有了这些丰富的功能集 Apple 的平台身份验证器真的很棒现在我们来逐步了解如何在网站中采用它网站需要使用三种不同的方法所有方法都是基于保证的 API 首先你应该检查当前设备是否支持此功能你可以通过调用 PublicKeyCredential.isUserVerifying- PlatformAuthenticatorAvailable 实现然后当用户设置使用它时你需要调用 navigator.credentials.create 来创建一个 PublicKeyCredential 对象里面包含必要的身份验证信息最后当用户想要登录你的网站时调用 navigator.credentials.get 这会返回一个凭据对象你可以在服务器上对其进行校验以验证用户身份
这些是 Web 身份验证 API 的入口点现在让我们看一下如何使用它们在你的网站上设置面容 ID 和触控 ID 进行功能检测非常简单只需调用 PublicKeyCredential.isUserVerifying- PlatformAuthenticatorAvailable 这将会返回一个 Boolean 来告诉你是否可以使用该功能现实是时候引导用户了为此你可能需要先让用户使用其老式密码凭据登录然后你可以向用户显示一则通知写上 “你好我们提供了一项很酷的新功能可让你下次登录时使用面容 ID 或触控 ID 绕过使用用户名和密码你想启用该功能吗？” 通知可以是完整的网页横幅或浮动弹出窗口这取决于网站的样式在我建立的这个 Shiny 网站中我决定使用整页通知（下次登录时你是否希望绕过用户名和密码使用触控 ID？）这就是通知此时大多数用户可能都会按下“好的” 然后为了使用 Web 身份验证 API 启用触控 ID 你应该使用以下脚本来建设你的网站首先我们来构造传递给方法的选项它看起来很吓人但是在我为你详细解释之后你会发现它实际上非常简单首先你需要告诉浏览器你的网站是什么然后是有关用户的一些信息然后你可以指定要使用哪种加密接下来是给加密的挑战然后告诉浏览器你需要使用平台身份验证器这是这里的关键选项最后这完全是可选择的由于 Shiny 有一些特殊的安全要求因此它决定选择加入证明看到了吧？很简单现在你要把这些选项传递给 navigator.credentials.create 然后 Safari 浏览器将处理用户界面并返还给你 PublicKeyCredential 不过在用户激活的事件中调用此方法很重要
让我们看一个演示了解如何将所有东西组合在一起首先我使用主要凭据来登录 Shiny 然后我收到通知我是说为何不接受？
然后 Safari 浏览器会出现一个确认用户界面点击“好的” 然后使用触控 ID 我登录好了以上就是全部的用户引导体验很好但是我们只是完成了一半你刚刚看到的是前端用户体验我们仍然需要在后端做一些事情来处理响应
下面我们简要看一下响应首先它包含一个 ID 你应该保存下来以便在将来引用该特定凭据其次它包含一个针对注册的响应在该响应中你将获得浏览器生成的一些元数据供你验证然后是响应的重要内容一个 attestationObject 其中包含公钥数据和证明证书如果你之前未选择使用证明你将返回一条“无”证明声明正如此处所示以上就是对响应的概述服务器的配置不同代码可能会非常不同但是这里有一份清单你应按照此顺序进行操作首先验证所有元数据客户端数据和身份验证器数据其次如果你选择使用证明则应验证证明声明第三保存凭据 ID 和公钥数据以备将来登录时使用最后你可以选择设置服务器端 cookie 以指示此设备上的特定帐户可启用面容 ID 或触控 ID 这样会使重新认证过程变得更加容易以上就是引导用户所需要做的事情下面我们介绍登录如果你在注册过程中保存了已启用触控 ID 帐户的 cookie 那么现在可以将其作为登录的快速路径整理成清单为了将触控 ID 用于快速路径你将需要以下脚本登录的公式和注册很相似这里必不可少的事情就是挑战就像其他任何公钥加密一样然后这将有助于你告诉 Safari 浏览器你计划使用的确切凭据这样 Safari 浏览器可以为用户提供最优化的用户界面最重要的是你需要指定传输方式现在你把这些选项传递给 navigator.credentials.get 然后 Safari 浏览器将处理用户界面并为你返回 PublicKeyCredential 就像注册一样此外还是和注册一样在用户激活的事件中调用该方法很重要让我们看一个演示了解如何把这些结合在一起我单击“登录”按钮 Safari 浏览器随后将显示一个确认用户界面点击“继续” 然后触控 ID 我进来了因此使用触控 ID 进行登录就是这么简单现在我们转向后端在登录情况下返回的 PublicKeyCredential 略有不同现在响应的类型为 AuthenticatorAssertionResponse 这里响应的重要部分是签名没错以前常用的那种签名你需要对每个公钥加密进行验证这就是响应此处的登录清单比注册部分要简单得多首先你需要验证该用户 ID 确实是你的用户然后检查凭据 ID 是否与该用户 ID 相关联完成此操作后再验证其他的所有元数据最后验证签名然后你可以让用户登录就完成了
这是在 Web 上启用面容 ID 和触控 ID 所需要做的一切我来总结一下这三件事首先你需要检测功能是否存在然后在用户通过传统机制登录后你应该立即显示一条通知请求用户启用该功能这样以后的登录你就可以接受面容 ID 或触控 ID 了
Safari 浏览器中的 Web 面容 ID 和触控 ID 可以作为 SFSafariViewController and ASWebAuthenticationSession 在 macOS、iPadOS 和 iOS 上使用
最后介绍一些最佳做法最重要的一点是使用此功能登录是一种选择方式但不能成为唯一的方式由于私钥已绑定到设备如果该功能是登录网站的唯一方法那么一旦用户丢失了设备他们将永远不能再登入账户使用功能检测而不是用户代理字符串来检测此功能
在用户激活的事件中调用 navigator.credentials.create and.get 如果你需要设置一个标志来指示设备上的帐户是否启用了此功能请使用服务器端安全的 HttpOnly cookie 这将为你提供最长的存储时间最后对于已经通过 Web 身份验证启用了安全密钥的网站你应该考虑把此功能和安全密钥一起提供给用户是否合理因为端到端的用户体验大不相同
总之今天我介绍了 Web 的面容 ID和触控 ID 这可提供无障碍的用户体验与强大的多因素身份验证机制它可以轻松被整合到你的网站中来简化用户的登录体验而且无需更改管理用户会话状态的方式请立即开始测试此功能并将任何可能的漏洞提交到反馈助理或 bugs.webkit.org 感谢观看

// Feature detection

const isAvailable = await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable();

if (isAvailable) {
    // Continue to enrollment or sign in
    // ...
}

8:42 - Enrollment

// Enrollment

const options = {
    publicKey: {
        rp: { name: "example.com" },
        user: {
            name: "john.appleseed@example.com",
            id: userIdBuffer,
            displayName: "John Appleseed"
        },
        pubKeyCredParams: [ { type: "public-key", alg: -7 } ],
        challenge: challengeBuffer,
        authenticatorSelection: { authenticatorAttachment: "platform" },
        attestation: "direct"
    }
};

const publicKeyCredential = await navigator.credentials.create(options);

11:42 - Sign in

// Sign in

const options = {
    publicKey: {
        challenge: challengeBuffer,
        allowCredentials: [{
             type: "public-key",
             id: credentialIdBuffer,
             transports: ["internal"]
        }]
    }
};

const publicKeyCredential = await navigator.credentials.get(options);

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。

提交你查询的内容时出现错误。请检查互联网连接，然后再试一次。

资源

相关视频

WWDC20