利用通行密钥升级和凭证管理器简化登录体验

了解如何将基于密码的现有账户自动升级为使用通行密钥。我们将介绍提升账户安全性并简化登录体验的重要意义和实现途径、适用于凭证管理器 App 的新功能，以及如何将你的 App 信息充分整合到新的“密码”App 中。

章节

0:00 - Introduction
0:38 - Automatic passkey  upgrades
2:37 - The passkey journey
4:18 - Automatic passkey upgrade sequence
7:46 - Shipping and deploying passkey support
9:17 - Improvements for  credential managers
10:14 - The new Passwords app!
11:30 - Updating appearance in the Passwords app
12:31 - One-tap verification code setup

资源

相关视频

下载

大家好我叫 Garrett 很高兴为大家介绍如何在你的 App 和网站中部署自动通行密钥升级以及其他几项新的开发成果这些成果能够提供卓越的登录体验在这个视频中我将介绍如何将现有账户自动升级为通行密钥、

针对凭证管理器推出的几项新功能以及如何让你的 App 在全新“密码”App 中呈现精美外观

我们先来了解一项非常令人兴奋的功能也就是自动通行密钥升级

下面来看个例子这个例子展示了当今典型的登录体验

首先填写用户名

然后填写密码

接下来等待接收短信

并填写验证码

最后成功登录

像这样的多步骤登录体验是网站和 App 提供更高安全性的常见方式但这个过程可能缓慢或繁琐

在这种情况下一些 App 可能会显示某种插页式追加销售让我知道还有更快的替代方案那就是使用通行密钥等方法而这个 App 已采用自动通行密钥升级系统显示一条通知提示已创建通行密钥！没有追加销售屏幕也没有出现中断让用户能够顺畅地享受更轻松、更安全的登录体验当然这也适用于你的网站

整个体验经过精心设计能够尽可能轻松顺畅地过渡到更强大、更安全的登录方式返回到这个 App 现在登录过程超快、超简单只需轻点一下即可完成

并排比较这两个流程时第一步是一样的

通过一个按钮选择账户

对于传统登录方式还要再完成几个步骤但使用通行密钥无需第 2 步或第 3 步就已经登录了另请注意通行密钥更安全

网络钓鱼和其他形式的凭证窃取攻击构成了当今互联网上一些最常见的账户盗用方式

而防范网络钓鱼的最佳方式就是让账户不具备任何易受网络钓鱼攻击的因素

要保护新账户可以采取的有效措施之一是从一开始就为新账户提供通行密钥使用通行密钥不用担心会忘记密码从而降低了需要重设密码的可能性只需轻点或点按一下即可登录

有了通行密钥账户便不容易受到当今我们知道的网络钓鱼的攻击

但几乎所有现有账户仅使用易受网络钓鱼攻击的因素比如密码、短信、电子邮件地址、推送通知以及具有时效性的验证码

虽然结合使用了多种这些因素来帮助避免受到攻击但它们仍有相同的基本漏洞容易受到网络钓鱼的攻击

现在行业已开始进入过渡期正在弃用易受网络钓鱼攻击的登录方式转而使用能够防范网络钓鱼攻击的身份验证机制比如通行密钥

在这个过程中对于现有账户第一步是添加防范网络钓鱼攻击的登录方法作为备选登录方式

这可以帮助你逐步引入通行密钥让用户能按照自身节奏逐步采用

目标依然是最终摆脱所有易受网络钓鱼攻击的身份验证因素不过这个视频重点介绍如何迈出第一步尽可能确保轻松顺畅的体验让用户开始使用通行密钥

下面来看看自动通行密钥升级的时序图 App 向系统发出请求然后系统决定当前是否需要创建通行密钥如果需要系统会返回新的通行密钥

为了做出这个决定系统收到请求后会执行这些操作首先系统会进行一系列内部检查确定目前创建通行密钥是否合适

其中一些检查包括设备当前是否已安装凭证管理器以及是否支持自动通行密钥升级

设备当前是否已准备好使用通行密钥例如它是否设有密码或者对于针对网页的请求它会通过检查确保这是非无痕浏览标签页

如果系统认为请求可以继续它会将请求传递给可用的凭证管理器然后凭证管理器会对请求应用自己的一组条件最重要的条件是它是否用于填写同一账户的用户名和密码同一账户指的是与要注册的通行密钥具有相同用户名的账户

如果答案是肯定的并且满足凭证管理器设置的任何其他条件系统会返回一个新的通行密钥这个通行密钥会传递给 App

如果在这个过程中有任何条件不满足你会收到错误这不一定表示哪里出了问题只是说这一次没有成功创建通行密钥

你可以将自动通行密钥升级当作一项渐进式增强功能它无法保证在任何情况下都能成功注册通行密钥但当它成功注册后便能提供丝滑的用户体验不需要你构建追加销售屏幕也不会妨碍用户使用你的 App

下面来看个例子了解一下基于密码的登录流程这个流程提议创建通行密钥

使用密码登录后它会检查账户是否有通行密钥如果没有则会提议创建一个

目前许多 App 在登录后不久会显示某种对话框提供这一升级

而使用自动通行密钥升级就不再需要这一步你可以传递一个新的注册请求样式也就是 .conditional

如果满足系统和通行密钥管理器的所有先决条件你会收到一个通行密钥同时设备会显示一条通知提示已创建通行密钥所有这一切都不会中断 App 中正在进行的工作

如果有任何先决条件未满足你会收到错误也不会看到任何 UI

这个时候你可以选择显示现有的追加销售对话框也可以选择下次再试

对于网页也一样这是一个标准的通行密钥注册流程

在这里添加 mediation conditional 参数将这个请求从模态通行密钥创建更改为自动升级样式请求

在网页上发出这种样式的请求之前请务必使用 getClientCapabilities 来检查浏览器是否支持这个请求

行业正在从密码过渡到通行密钥自动通行密钥升级将加快这一过渡

在你的 App 中和网站上提供通行密钥支持就像开发和部署某项功能包括学习、构建、测试和交付阶段但通行密钥之旅的独特之处在于有两个最终目标简化登录体验和提高账户安全性

提供通行密钥支持能够大大简化登录过程但如果仍然可以使用密码登录账户则意味着账户还是容易受到网络钓鱼和密码重用攻击

也就是说最终需要开始思考如何消除账户中作为登录选项的所有易受网络钓鱼攻击的因素

如果你的服务发现某个账户不再使用密码则可以考虑弃用密码了

同样对于使用多因素登录的账户如今使用的大多数额外因素也依然容易受到网络钓鱼的攻击因此行业正在转向启用通行密钥

提供通行密钥可以让用户更快、更轻松地登录你的服务同时提供比当今常见的多因素登录形式更强大的安全保护

你可能还无法完全弃用密码但请记住这是部署通行密钥的最终目标

接下来我将介绍针对凭证管理器推出的一些新功能

凭证管理器可以参与自动通行密钥升级这是肯定的

它们现在还可以填写具有时效性的验证码

以及在任意文本字段中填写用户名、密码或一次性验证码

这些都是现有凭证管理器 API 的新增功能要添加对这些功能的支持可以使用几个适用于Info.plist 的新键以及匹配的 API 你可以在“认证服务”文档中查看这些 API

另外借助凭证提供商扩展机制现在可以处理密码、通行密钥和验证码你现在最多可以选择三个 App 来使用 AutoFill

这些就是针对凭证管理器的一些改进

最后我将介绍“密码”App 这是 macOS Sequoia、iOS 18 和 visionOS 2 的一项新功能

在 App 中你的网站名称和图标将突出显示彰显独特个性如果你想更改网站和 App 的展示方式可以采用现有的基于标准的方法来执行这一操作稍后我会介绍这些方法

返回到顶层有一个“Passkeys”部分其中突出显示了已采用防范网络钓鱼攻击登录方式的 App 和网站还有一个关于验证码的部分这可让用户非常轻松地查找和拷贝验证码就像一个专用的身份验证器 App

在“Security”部分中 “密码”App 会列出脆弱、重复使用或出现数据泄露问题的已保存密码如果你采用 well-known URL 来更改密码 “Change Password”按钮会打开更改密码网页

在 macOS 上用户可以启用一个菜单栏项目来快速轻松地访问密码和验证码还可以轻松地从其他凭证管理器导入密码以及导出密码

下面我们通过一个例子来看看 “密码”App 中的账户是什么样子

这个账户同时设有通行密钥和密码

当针对使用同一用户名的同一 App 或网站保存通行密钥和密码时 “密码”App 会将它们合并为一个条目

如果你的网站已采用 OpenGraph 元数据标准 “密码”App 会针对所有已保存的账户显示你的网站名称

如果未采用这个标准 “密码”App 会试图找出你的网站名称或回退到你的域名

OpenGraph 网页标准可让你声明关于网站的元数据方法是在页面的 head 标签中添加特定的元标签

你应该确保针对所有页面和子域以及所有用户代理设置元数据这样你的网站才能始终正确显示

另外请仔细检查你的网站有没有使用高分辨率图标高分辨率图标在你的账户旁边会显得非常美观

最后对于提供具有时限性的验证码的 App 和网站除了标准二维码你还可以提供 otpauth 链接引入一键式验证码设置体验

这个链接将打开系统上默认的验证码 App 让你能够在其他设备上轻松设置验证码或者直接在当前使用的设备上设置验证码

另外如果要显示可用于验证码的身份验证器 App 列表可以考虑将“Apple 密码” 添加到列表中

如需了解有关验证码的更多信息请观看“使用 iCloud Keychain 验证码安全登录”

下面我们来看一些后续步骤如果你还没有部署通行密钥现在是时候采取行动了！它们更快、更轻松而且比密码安全得多另外启用自动升级可以更轻松地开始这一过渡

更新网站的元数据在“密码”App 中突显网站的个性

最后简化验证码设置以便它适用于任意设备上的任何凭证管理器

感谢观看也感谢大家帮助消除网络钓鱼再见

0:01 - Offering a passkey upsell

// Offering a passkey upsell

func signIn() async throws {
    let userInfo = try await signInWithPassword()
    guard !userInfo.hasPasskey else { return }
    let provider = ASAuthorizationPlatformPublicKeyCredentialProvider(
        relyingPartyIdentifier: "example.com")

    guard try offerPasskeyUpsell() else { return }
    let request = provider.createCredentialRegistrationRequest(
        challenge: try await fetchChallenge(),
        name: userInfo.user,
        userID: userInfo.accountID)

    do {
        let passkey = try await authorizationController.performRequest(request)
        // Save new passkey to the backend
    } catch { … }
}

0:02 - Automatic passkey upgrade

// Automatic passkey upgrade

func signIn() async throws {
    let userInfo = try await signInWithPassword()
    guard !userInfo.hasPasskey else { return }
    let provider = ASAuthorizationPlatformPublicKeyCredentialProvider(
        relyingPartyIdentifier: "example.com")

    let request = provider.createCredentialRegistrationRequest(
        challenge: try await fetchChallenge(),
        name: userInfo.user,
        userID: userInfo.accountID,
        requestStyle: .conditional)

    do {
        let passkey = try await authorizationController.performRequest(request)
        // Save new passkey to the backend
    } catch { … }
}

0:03 - Modal passkey creation (web)

// Modal passkey creation

const options = {
    "publicKey": {
        "rp": { … },
        "user": {
            "name": userInfo.user,
            …
        },
        "challenge": …,
        "pubKeyCredParams": [ … ]
    },
};

await navigator.credentials.create(options);

0:04 - Automatic passkey creation (web)

// Automatic passkey creation

let capabilities = await PublicKeyCredential.getClientCapabilities();
if (!capabilities.conditionalCreate) { return; }

const options = {
    "publicKey": {
        "rp": { … },
        "user": {
            "name": userInfo.user,
            …
        },
        "challenge": …,
        "pubKeyCredParams": [ … ]
    },
    "mediation": "conditional"
};

await navigator.credentials.create(options);

0:05 - New Credential provider Info.plist keys

<dict>
	<key>NSExtensionAttributes</key>
	<dict>
		<key>ASCredentialProviderExtensionCapabilities</key>
		<dict>
			<key>ProvidesPasswords</key>
			<true/>
			<key>ProvidesPasskeys</key>
			<true/>
			<key>SupportsConditionalPasskeyRegistration</key>
			<true/>
			<key>ProvidesOneTimeCodes</key>
			<true/>
			<key>ProvidesTextToInsert</key>
			<true/>
		</dict>
	</dict>
</dict>

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

利用通行密钥升级和凭证管理器简化登录体验

章节

资源

相关视频

WWDC23

WWDC22

WWDC21