优化“通过 Apple 登录”体验

优化“通过 Apple 登录”体验

了解如何运用“通过 Apple 登录”，在您的 App 中提供安全而快速的身份验证。我们将向您介绍如何将基于密码的帐户升级到安全的一键登录凭证，并探索如何在您的 App 中无缝处理对用户会话的更改。我们还将帮助您在网页和其他平台上使用“通过 Apple 登录”。为能更好地理解此讲座，我们建议您先对“通过 Apple 登录”和 REST API 进行基本了解。此外，对 JavaScript 的了解也将很有帮助。

资源
相关视频

WWDC22
- 探索“通过 Apple 登录”在公司与学校中的运用
- 通行密钥简介
WWDC20
- 一键式帐户安全升级
- 充分利用“通过 Apple 登录”
下载

Ram: 大家好我是 Ram 是客户体验团队的一名工程师我将和我的同事 Patrick 一起谈谈如何为您的 App 增强通过 Apple 登录体验自从 iOS 13 系统引入了通过 Apple 登录之后人们就喜欢上了这种快速简单的账户设置和登录功能只需几行代码您就可以一键快速设置账户无需填写任何表格或密码每个通过 Apple 登录账户都会受到强大的双因素认证保护该认证已被用于保护用户的 Apple ID 如果您需要与您的用户交流通过 Apple 登录会为您提供一个可用的电子邮件地址无需额外验证通过 Apple 登录还提供了一个指示器显示用户真实存在的可能性有多大这可以帮助您打击诈骗通过 Apple 登录可以在任何地方使用包括您在工作和学校使用的管理式 Apple ID 要了解更多关于如何将您的 App 与工作和学校帐户集成的信息请查看讲座 “Discover Sign in with Apple at Work & School“ 在本期讲座中我们将讨论如何增强和简化您的通过 Apple 登录体验首先我将谈一谈如何通过检查 App 中的现有凭证来防止帐户重复接下来我将深入谈谈 Apple ID 凭证然后我将讨论一些可以监视凭证更改的方法并讨论如何处理帐户删除等情况最后 Patrick 将谈一谈如何将通过 Apple 登录与网络和其他平台结合让我们开始吧与传统的基于用户名和密码的认证方式相比通过 Apple 登录是一个方便而安全的选择但您的用户仍然可以使用密码解锁的账户如果您的用户已经有了一个可以使用的账户那么不为您的 App 创建第二个账户就很重要我将探讨如何在登录时引导用户做出正确的决定
这是 Juice 一个使用通过 Apple 登录的样例 App 您可以在这个视频的相关链接中找到它的源代码
您可以使用传统的电子邮件和密码登录 Juice 也可以使用通过 Apple 登录如果您的用户已经拥有这些凭证中的任何一个那么帮助他们登录到正确的帐户就是您的责任首先请确保实现密码自动填充以便在登录屏幕的键盘上显示现有的密码凭证
这样用户只需点击一次就可以实现自动填充凭证
另外您应该帮助您的用户将基于密码的账户升级到通过 Apple 登录一旦升级您的用户将获得一个内置安全功能的账户他们也少了一个需要记住的密码这是通过帐户身份验证修改扩展来实现的基于扩展的 API 为您的用户提供了无缝体验以升级他们使用通过 Apple 登录来登录的方式
要想了解更多关于为用户的账户提供安全升级的信息请查看文档 “Get the most out of 通过 Apple 登录” 和“One-tap account security upgrades”
除了提供密码自动填充之外您还可以更进一步在 App 启动时立即提供现有的凭证这样您的用户甚至可以在看到登录屏幕之前就使用正确的帐户进行登录验证服务 API 在这方面非常灵活认证服务除了允许用户创建通过 Apple 登录的凭证外 API 还可以提供现有凭证包括基于密码的凭证
采用这种方法真的很容易让我带您看一些实现这一点所用的代码如果您已经在使用 Authentication Services API 那么您应该对这段代码非常熟悉
首先创建一个 ASAuthorizationController 实例并在授权请求数组中包含 ASAuthorizationAppleIDProvider 和 ASAuthorizationPasswordProvider 然后您需要设置一个委托和一个对象来帮助呈现接口最后您需要在授权控制器上使用 preferimmediateyavailablecredentials 选项来调用 performRequests 这在 iOS 16 上是新选项它告诉系统您只需要设备上立即可用的凭证它是专门在 App 发布时调用的
如果您想支持以前的 iOS 版本您可以使用 performRequests 当您这样做时您将看到一个现有凭证的列表现在您的用户可以选择现有的通过 Apple 登录凭证或现有的密码凭证在用户选择了一个凭证之后系统将在 ASAuthorizationController 委托上调用 didCompleteWithAuthorization 如果用户选择了通过 Apple 登录账户您将继续使用 AppleIDCredential 如果用户选择了基于密码的帐户则使用返回的 passwordCredential 进行登录如果用户没有现有的凭证 API 将不会显示欲创建通过 Apple 登录帐户的用户相反系统会调用 didCompleteWithError 在这些场景中您应该返回到显示标准登录流顺便一提同样的 Authentication Services API 也可以无缝用于万能钥匙要了解更多关于万能钥匙一种替代密码的新一代身份验证技术的信息请查看课程 “Meet passkeys” 只需几行代码您就可以充分利用登录体验现在您可以帮助您的用户选择正确的帐户了这样就有望防止在您的系统中创建重复帐户
接下来我想带您深入了解一下 Apple ID 凭证
如您所知在使用通过 Apple 登录成功授权后您得到的响应是一个 ASAuthorizationAppleIDCredential 对象它包含像用户 fullName 电子邮件 realUserStatus identityToken 和 authorizationCode 这样的值我将简要地介绍它们 User 是唯一且稳定的标识符它是在您的开发者团队的所有 App 中都相同的标识符
使用这个可以唯一标识系统中的用户您应该只在需要的时候要求 fullName 如果请求了您的用户可以共享他们想共享的任何名称如果您想和您的用户交流您应该请求电子邮件当被请求时您的用户有两种共享电子邮件地址的选择一种选择是共享与 Apple ID 关联的邮箱另一种选择是使用 “隐藏我的邮箱”功能这会创建一个隐藏的电子邮件地址转接到他们的收件箱它是双向中继的所以它也可以处理回复
无论选择哪一种方式邮箱地址都已经经过 Apple 公司的验证可以使用此外并不是所有帐户都有关联的电子邮箱所以要准备好处理即使您请求了电子邮件也没有电子邮件值的情况
RealUserStatus 是一个关于用户真实可能性的高置信度指标它是在保护用户隐私的同时通过使用设备时的机器学习帐户历史记录和硬件认证来计算的 realUserStatus 有三种类型 “可能真实”意味着用户看起来是一个真实的人要为这个用户提供最好的体验例如跳过 CAPTCHA 这样的额外的欺诈验证检查 “未知”是指系统还没有确定用户是否是真人就像信任任何需要额外验证步骤的信息有限的帐户一样信任此用户用户仍可能是真实的所以不要阻止他们使用您的 App
最后 “不受支持”意味着系统不具备这种判断能力我应该指出像 fullName 电子邮件和 realUserStatus 这样的属性只在第一次创建帐户时返回
后续登录时不会返回这些值所以要确保安全地缓存像 fullName 和电子邮件这样的属性直到您可以验证您的系统中已经创建了一个帐户
identityToken 是一个 JSON web 令牌包含了 App 服务器需要的大部分数据包括用户信息这是一种行业标准验证方法 JSON web 令牌或称 JWT 由三部分组成 base-64 URL 编码 header base-64 URL 编码有效载荷以及来自 Apple 的签名您应该用 Apple 的公钥验证签名以确保响应没有被篡改并且确实来自 Apple ID 服务器应用服务器检查令牌的可用性同样重要解码有效载荷之后您应该验证发布者是否是 appleid.apple.com 验证受众字段是您的 App 的包标识符然后确保过期时间戳大于当前时间这样您就知道令牌是有效的主题将是您的用户标识符如果您要求用户的电子邮件地址它也将包括在内您还可以找到 realUserStatus 该值为 0 表示“不支持” 1 表示“未知” 2 表示“可能真实” 最后验证 nonce 是否与创建授权请求之前生成的 nonce 相同
要了解更多关于 nonce 以及如何保护您的授权过程以减轻重放攻击的信息请查看讲座 “Get the most out of 通过 Apple 登录”
AuthorizationCode 是一个短时的一次性令牌您可以提供 Apple ID 服务器来交换刷新令牌如果您的系统已经使用了 OAuth 2.0 这样的开放标准那么这对您来说可能很熟悉为了生成一个刷新令牌您应该向 auth/token 端点发送一个 post 请求您要传递客户端 ID 和客户端机密以及刚刚接收到的授权代码关于如何创建客户端机密的详细描述可以在 Apple Developer 文档中找到在响应中您将获得一个刷新令牌一个访问令牌和一个与您之前收到的令牌类似的新身份令牌如果您有过期的访问令牌您可以使用刷新令牌通过相同的端点获得一个新的访问令牌您还可以继续使用相同的刷新令牌直到它失效为止如果令牌验证失败或用户会话周围发生更改刷新令牌可能会失效
谈到用户会话接下来我将谈一谈如何处理和监视凭证状态的变化在验证身份令牌之后您的 App 要负责管理用户会话
有多种场景可以触发用户会话更改例如用户可以在设置中停止在您的 App 中使用 Apple ID 或者他们可能已经注销了设备要优雅地处理会话更改请调用 ASAuthorizationAppleIDProvider 上的 getCredentialState(forUserID:) 建议您在 App 启用时或者在任何您想要检查状态的地方调用这个 API 您还应该观察 credentialRevokedNotification 以便您的 App 在证书被撤销时得到通知如果您观察到状态的任何变化您应该假设一个不同的用户已经登录并将当前用户退出 App 如果您有一个 App 服务器您应该订阅服务器到服务器通知您的服务器将收到关于您的用户和他们的帐户的重要更新在以下场景中通知将会发送到 App 的每个组当用户禁用或启用他们的邮件转发首选项时当用户停止在您的 App 中使用他们的 Apple ID 时或者当用户永久删除他们的 Apple ID 时要开始接收通知您应该首先在 Apple Developer 门户中注册一个端点 URL 所有事件都会到达相同的端点 URL 事件以 Apple 签名的 JSON web 令牌的形式发送如果邮件转发被禁用您将在 JWT 的有效载荷中收到一个禁用邮件的事件
当用户停止在您的 App 中使用他们的 Apple ID 时您会收到一个同意撤销事件当您收到此事件时重要的是使任何活动用户会话无效
如果用户删除了他们的 Apple ID 您会收到一个账户删除事件同样请确保使任何活动用户会话无效并根据您的流程更新他们的帐户
现在我想把重点放在删除账户上账户是我们身份的一部分我们用它们来管理一些最个人和隐私的数据有人可能会想要删除他们的帐户您需要在您的 App 中支持这一点
您应该提供一种从您的 App 中初始化帐户删除的方法管理整个删除过程是您的责任
如果您有一个存储用户信息的 App 服务器通常情况下 App 会通知服务器删除用户帐户现在您可以在删除过程中加入通过 Apple 登录了实现这一点需要使用一个新的您的服务器可以使用的 REST 端点来删除与您的 App 相关联的帐户让我简要介绍一下这个 API 为了删除帐户您必须为用户提供有效的刷新令牌或有效的访问令牌如果这两个令牌都没有可以使用 auth/token 端点生成一旦您有了这两个令牌之一就可以使用带有所需参数的 auth/revoke 端点使用刷新令牌时将令牌类型设置为 REFRESH_TOKEN
如果要使用访问令牌进行删除请将令牌类型设置为 ACCESS_TOKEN 如果您获得了一个成功响应令牌和用户的活动会话将立即失效
一旦被删除用户返回到您的 App 并使用通过 Apple 登录时将拥有与他们第一次使用 App 创建帐户时相似的体验
接下来我会退出让我的同事 Patrick 继续探讨您可以如何在网络和其他平台上使用通过 Apple 登录的问题
Patrick: 谢谢 Ram 人们喜欢通过 Apple 登录在所有 Apple 平台上无缝运行的方式但它不止于此通过 Apple 登录也可以在网络和其他平台上无缝运行让我们来讨论一下如何增强您的通过 Apple 登录体验以支持网络和其他平台
Ram 之前介绍过一款 iOS App 叫做 Juice 我们希望通过扩展到网络将 Juice 带给更多的用户让我们从讨论如何将相似的 App 分组开始
建议您将相关的 App 组合在一起以精简用户体验通过将相关的 App 分在一组您的用户只需要同意一次就可以与您的 App 共享他们的信息
例如您的 App 可能在 iOS 和 macOS 上可用但在每个平台上会使用不同的捆绑标识符建议您将这些 App 分在一组当使用通过 Apple 登录时您的用户会看到您设置为主 App 的 App Icon 让我们来看看如何通过配置一个服务 ID 来支持在您的网站上使用通过 Apple 登录首先登录到 Apple Developer Portal 并导航到 “Certificates, Identifiers & Profiles”
选择 Services IDs 旁边的单选按钮然后单击 “继续”
输入您的服务描述
为您的服务输入唯一标识符然后单击继续
单击通过 Apple 登录旁边的复选框然后单击配置按钮在 Web Authentication Configuration 界面的下拉菜单中选择 Primary App ID
接下来输入您将用于支持通过 Apple 登录的网站的域名和子域名最后输入一个重定向 URL 让 Apple 在授权成功后将您的用户重定向到您的 App 或网站就是这样您已经配置好了一个服务 ID 以在您的网站上支持通过 Apple 登录您需要一个按钮用于向用户显示您的网站支持通过 Apple 登录 Apple 提供了一个高度可配置的按钮 API 来生成通过 Apple 登录的按钮图像
使用这个在您的 App 或网站自定义并嵌入您的按钮选择通过 Apple 登录 JS 是一个简单的 Javascript framework 它使通过 Apple 登录在网络上更容易集成在您的 App 或网站中首先要包含通过 Apple 登录 Javascript framework 这个简单的 API 将允许您对用户进行身份验证并获得不同的 asset 比如只需一个简单的 DIV 就可以创建的通过 Apple 登录按钮您也可以通过修改按钮的属性自定义按钮以适应您的 App 或网站
例如在当前属性中您会看到一个白色的通过 Apple 登录按钮它有边界和默认的角半径通过更改数据颜色属性我们就可以为按钮选择不同的背景颜色如果我们将数据类型更改为“继续” 按钮文本将更新为显示 “继续使用 Apple”
或者您可以通过将数据模式属性设置为仅限登录来创建仅限登录按钮通过 Apple 登录 Javascript Button API 提供了更多可定制的属性您可以参考通过 Apple 登录按钮资源来轻松配置这些选项
如果您偏好使用 REST API 来生成通过 Apple 登录按钮您可以使用 Apple ID 按钮端点之一来生成一个按钮中间对齐左对齐和徽标按钮分别有独立的端点您可以通过查询参数来自定义该按钮在这个请求示例中我自定义了一个带边框的白色的通过 Apple 登录按钮我收到了一个以 PNG 图像作为自定义按钮的响应现在您已经自定义了通过 Apple 登录按钮是时候验证您的用户了您需要向 Apple 发送一个带有所需参数的授权请求这些是成功登录用户所需的参数
因为您已经在 Apple 平台上使用了通过 Apple 登录所以您应该对这些参数非常熟悉
首先我们需要设置客户端 ID 这将是您在 Apple Developer Portal 上为您的 App 或网站创建的服务 ID
接下来如果您的 App 或网站需要电子邮件或名称填写 “范围” 参数如果请求多个范围请使用空格来分隔每个范围只请求需要的数据是很重要的
您将在重定向 URI 参数处添加您之前在 Apple Developer Portal 上注册的 URL 并通知 Apple 将用户导向您的网站上的哪一处
您还可以添加一个状态和 nonce 来保护您的请求
最后使用 use Pop up 参数您可以选择在一个单独的弹出窗口显示登录屏幕或者将现有窗口重定向到 Apple 登录网站如果有人在使用 Safari 浏览器他们会看到这样一个本机屏幕为他们提供登录您的网站的一流体验在 Apple ID 服务器处理授权请求之后您将收到一个包含授权结果的 DOM 事件要处理成功响应可以为 AppleIDSignInOnSuccess 添加一个事件监听器
要处理失败响应可以为 AppleIDSignInOnFailure 添加一个事件监听器
如果授权成功您将收到一个响应其中包含授权代码身份令牌如果请求了还会有用户信息这与您在 Apple 平台上已经习惯的响应类似如果您希望使用 REST API 直接与 Apple ID 服务器集成您可以用所需的参数将授权请求定向到授权端点如果授权成功您将得到一个包含授权代码身份令牌和用户信息的响应这与您在 Apple 平台上已经习惯的响应非常相似就是这样您已经成功地在您的网站上采用了通过 Apple 登录最后我想强调一些在实现通过 Apple 登录时需要牢记的重要事项
除非您的 App 需要大量基于账户的功能让人们无需登录就可以使用您的 App 例如您可以允许用户使用 Apple Pay 购买商品然后让他们可以选择在购买完成后将这次购买与账户绑定通过把用户名和密码认证切换到通过 Apple 登录为现有用户提供升级帐户安全性的能力如果您只需要一个唯一的标识符来识别用户不要收集姓名或电子邮件如果您确实用 Sign In with Apple 收集了邮箱地址请确保您尊重了用户的选择您不应该提示输入额外的邮箱地址
在所有提供您的 App 或网站的平台上支持使用 Sign In with Apple 是很重要的您的用户可能会使用多个平台他们会希望在任何地方都能使用 Sign In with Apple 我们非常期待看到您会在您的 App 中使用 Sign In with Apple 做些什么我们期待您的反馈感谢收看请享受余下的 WWDC 之旅吧

// Requesting both Sign in with Apple and password-based accounts.

import AuthenticationServices

let controller = ASAuthorizationController(authorizationRequests: [
    ASAuthorizationAppleIDProvider().createRequest(),
    ASAuthorizationPasswordProvider().createRequest()
])

controller.delegate = self
controller.presentationContextProvider = self

if #available(iOS 16.0, *) {
    controller.performRequests(options: .preferImmediatelyAvailableCredentials)
} else {
    controller.performRequests()
}

5:14 - ASAuthorizationControllerDelegate Implementation

// ASAuthorizationControllerDelegate

func authorizationController(controller: ASAuthorizationController,
                             didCompleteWithAuthorization authorization: ASAuthorization) {
    switch authorization.credential {  
		case let appleIDCredential as ASAuthorizationAppleIDCredential:
        // Sign the user in with Apple ID credential.
        // ...

    case let passwordCredential as ASPasswordCredential:
       // Sign the user in with password credential
       // ...
   }
}

func authorizationController(controller: ASAuthorizationController, 
   didCompleteWithError error: Error) {
    // No credential found. Fall back to login UI.
}

12:00 - Checking Credential State

// Check User Credentials on app launch

let appleIDProvider = ASAuthorizationAppleIDProvider()
appleIDProvider.getCredentialState(forUserID: "currentUserIdentifier") 
{ (credentialState, error) in
    switch(credentialState){
    case .authorized:
        // Found valid Apple ID credential
    case .revoked:
        // Apple ID credential revoked. Log the user out.
    case .notFound:
        // No credential found. Show login UI.
    case .transferred:
        // Team is transferred
    }
}

12:18 - Register for Revocation Notification

// Register for revocation notification

let notificationName = ASAuthorizationAppleIDProvider.credentialRevokedNotification

NotificationCenter.default.addObserver(self, 
                                       selector: #selector(signOut(_:)),
                                       name: notificationName, 
                                       object: nil)

17:55 - Sample HTML and Javascript Implementation

// Embed Sign in with Apple JS
<html>
    <body>
        <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
        <div id="appleid-signin" data-color="white" data-border="true" data-type="sign in"/>
        <script type="text/javascript">
            AppleID.auth.init({
                clientId : '[CLIENT_ID]',
                scope : '[SCOPES]',
                redirectURI : '[REDIRECT_URI]',
                state : '[STATE]',
                nonce : '[NONCE]',
                usePopup : true
            });
        </script>
    </body>
</html>

18:28 - White Sign in with Apple Button

<div id="appleid-signin" data-color="white" data-border="true" data-type="sign in"/>

18:38 - Black Sign in with Apple Button

<div id="appleid-signin" data-color="black" data-border="true" data-type="sign in"/>

18:44 - Black Continue with Apple Button

<div id="appleid-signin" data-color="black" data-border="true" data-type="continue"/>

18:50 - Black Logo Only Button

<div id="appleid-signin" data-color="black" data-border="true" data-mode="logo-only"/>

19:47 - Sample HTML and Javascript Implementation

// Embed Sign in with Apple JS
<html>
    <body>
        <script type="text/javascript" src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
        <div id="appleid-signin" data-color="white" data-border="true" data-type="sign in"/>
        <script type="text/javascript">
            AppleID.auth.init({
                clientId : '[CLIENT_ID]',
                scope : '[SCOPES]',
                redirectURI : '[REDIRECT_URI]',
                state : '[STATE]',
                nonce : '[NONCE]',
                usePopup : true
            });
        </script>
    </body>
</html>

21:11 - Handle DOM Response

// Listen for authorization success.
document.addEventListener('AppleIDSignInOnSuccess', (event) => {
    // Handle successful response.
    console.log(event.detail.data);
});

// Listen for authorization failures.
document.addEventListener('AppleIDSignInOnFailure', (event) => {
     // Handle error.
     console.log(event.detail.error);
});

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

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

资源

相关视频

WWDC22

WWDC20