雪花新聞

Sign In with Apple 的設計準則和功能實現

在你的 app 或者網站上展示一個「Sign In with Apple」按鈕意味着人們可以只通過他們已經擁有的 Apple ID 進行登錄或註冊,跳過填寫個人信息、確認電子郵箱和選擇密碼的部分。Sign In with Apple 通過給用戶一個一致的、他們可以信任的登錄體驗提供了一個全新的、更加隱私的方式以簡化和加快登錄 app 和網站的過程,也方便了用戶不需要記住多個賬戶和密碼。在你需要請求用戶的名字和電子郵箱的地方,用戶可以選擇對他們的真實電子郵箱進行保密,而提供一個獨一無二的、隨機的、可收發郵件的電子郵箱地址。

Sign In with Apple 讓人們通過 Face ID 或者 Touch ID 完成授權變得簡單,並且內建了兩步驗證以增加安全層級。Apple 不會通過 Sign In with Apple 的活動在 app 中收集用戶的個性化資料和他們的具體活動。

Sign In with Apple 提供了反欺騙的特性,它可以通過機器學習和其他信息提供給開發者一個新用戶是真實人類還是需要進一步觀察的標誌。

目錄

設計帳戶註冊和登錄流程

Sign In with Apple 按鈕

爲了幫助人們註冊一個賬戶和登錄賬戶,最好使用 Apple 爲 Sign In with Apple 功能提供的熟悉的按鈕。當你使用系統 API 創建 Sign In with Apple 按鈕時,你可以獲得下面這些好處:

Sign In with Apple 提供了兩種按鈕樣式變種:「Sign In with Apple」 和 「Continue with Apple」。根據需要,選擇最適合你的服務的登錄場景的那種樣式。

對於 Sign In with Apple 按鈕有三種外觀:白色(White)、帶描邊的白色(White with Outline Rule)、黑色(Black)。根據你要展示按鈕處的 UI 背景選擇最適合的外觀。

白色

在可以提供足夠對比度的深色或者彩色背景上使用白色外觀。

帶描邊的白色

在白色或者不能提供足夠對比度的淺色背景上使用帶描邊的白色外觀。不要在黑色或者太飽和顏色的背景上使用。

黑色

在白色或者可以提供足夠對比度的淺色背景上使用黑色外觀。不要在黑色或者深色的背景上使用。

按鈕尺寸和位置

實現 Sign In with Apple

縱覽

當用戶點擊 Sign In with Apple 按鈕後,用戶會看到一個根據你 app 要求提供的信息而填好了信息的表單顯示在屏幕上,像是名字和電子郵箱。用戶可以在提供原始電子郵箱或者一個新的由 Apple 提供的郵箱之間做出選擇。當用戶點擊繼續按鈕後,就完成了登錄。你的 app 也會獲得一個獨一無二、固定 ID、用戶的名字以及一個可以讓用戶收到郵件的電子郵件地址,不再需要用戶做收取驗證郵件、點擊驗證鏈接這樣的事。

當用戶在一臺新的設備上登錄時,一個輕輕的點擊就可以登錄之前的用戶並開始使用你的 app。

Sign In with Apple 爲你的 app 提供了一套流線化的賬戶設置體驗,不需要填寫複雜的表格,只需要輕輕一點。用戶從 App Store 使用他的 Apple ID 下載了 app,在 app 中也順其自然地通過 Sign In with Apple 完成登錄。開發者也獲得了一個已驗證並且可以讓用戶收到郵件的郵箱,即使用戶隱藏了自己的真實郵箱,提供的新的郵箱收取的郵件也可以通過 Apple 的轉發服務轉到用戶的真實郵箱,同樣用戶也可以使用這個新的郵箱進行郵件回覆。

Apple 也可以在使用 Sign In with Apple 登錄時,通過機器學習和其他獲取的信息告訴開發者這個用戶是真實的還是未知的。如果是真實的,你就不需要再判斷,儘管給這個用戶良好的使用體驗,如果是未知的,那可能是一個真人用戶,也可能是一個機器人。

Sign In with Apple 也是跨平臺的,不僅可以在所有蘋果平臺上使用,也可以通過 JS API 在網站、Windows、Android 上使用。

讓 Sign In with Apple 與你的 app 結合

分成下圖的四個部分:按鈕、授權、鑑權、處理變動。先展示 Sign In with Apple 按鈕,接着配置和執行授權的請求,在用戶看到 Sign In with Apple 按鈕並通過 Face ID/Touch ID 完成確認後,授權的結果會返回給 app。這時你需要與 Apple ID 服務器確認結果並在你的 app 中創建一個新用戶。最後,憑據狀態可能會發生變化,你的 app 需要處理處理好這些變化狀態。

Button 按鈕

只需要幾行代碼,你就可以把 AuthorizationAppleIDButton 添加到你的 app 中。具體代碼如下:

// Add “Sign In with Apple” button to your login view

func setUpProviderLoginView() {
 let button = ASAuthorizationAppleIDButton()
 button.addTarget(self, action: #selector(handleAuthorizationAppleIDButtonPress),for: .touchUpInside)
 self.loginProviderStackView.addArrangedSubview(button)
}

Authorization 授權

利用幾行代碼,你就可以初始化一個 Apple ID 授權請求。具體的代碼如下:

// Configure request, setup delegates and perform authorization request

@objc func handleAuthorizationButtonPress() {
 let request = ASAuthorizationAppleIDProvider().createRequest()
 request.requestedScopes = [.fullName, .email]

 let controller = ASAuthorizationController(authorizationRequests: [request])

 controller.delegate = self
 controller.presentationContextProvider = self

 controller.performRequests()
}

Verification 鑑權

在授權後,app 如果鑑權成功會從憑據中獲得一系列信息,如果用戶中斷了過程或者發生了錯誤需要有錯誤處理的邏輯。具體的代碼如下:

func authorizationController(controller _: ASAuthorizationController, didCompleteWithAuthorization authorization: ASAuthorization) {
 if let credential = authorization.credential as? ASAuthorizationAppleIDCredential {
 let userIdentifier = credential.user
 let identityToken = credential.identityToken
 let authCode = credential.authorizationCode
 let realUserStatus = credential.realUserStatus

 // Create account in your system
 }
}

func authorizationController(_: ASAuthorizationController, didCompleteWithError error: Error) {
 // Handle error
}

對於憑據中的信息,userID 是一個獨一無二、穩定的、團隊範圍內的用戶識別符,你可以在不同的平臺中使用它獲取用戶信息,它是與你的開發者賬戶綁定的。鑑權數據包括身份 token 和授權 code,token 的生命週期很短,可以與 Apple ID 服務器交換新的 token。可選的,系統還會返回你請求的賬戶信息,比如名字和電子郵箱。最後是一個之前提到的真實用戶指示標誌。

Handling Changes 處理變動

你的用戶可能會在你的 app 中停止使用 Apple ID 登錄,可能會在設備中登出。授權服務框架提供了一個快速 API 供開發者獲取相關狀態。具體的代碼如下:

let provider = ASAuthorizationAppleIDProvider()
provider.getCredentialState(forUserID: "currentUserIdentifier") { (credentialState, error) in
 switch(credentialState){
 case .authorized:
     // Apple ID Credential is valid
 case .revoked:
     // Apple ID Credential revoked, handle unlink
 case .notFound:
     // Credential not found, show login UI
 default: break
 }
}

NotificationCenter 也可以發出通知,告訴 app 用戶的憑據狀態已經失效。當失效時,在設備上退出登錄,進一步可以引導用戶重新登錄。具體代碼如下:

// Register for revocation notification
let center = NotificationCenter.default
let name = NSNotification.Name.ASAuthorizationAppleIDProviderCredentialRevoked
let observer = center.addObserver(forName: name, object: nil, queue: nil) { (Notification) in
 // Sign the user out, optionally guide them to sign in again
}

用戶使用 Sign In with Apple 在你的 app 中註冊了用戶,他可能還會在其他設備上使用你的 app 或者需要重新登錄。當第一次進入 app 時,系統會告訴用戶曾經使用 Apple ID 註冊了用戶,經過 Face ID 檢查後就可以完成登錄。

同時,通過相同的 API,iCloud 鑰匙串也可以實現此功能。你需要同時支持這兩種登錄請求。

當用戶已存在時,具體的代碼如下:

///Prompts the user if an existing iCloud Keychain credential or Apple ID credential exists.

func performExistingAccountSetupFlows() {
 // Prepare requests for both Apple ID and password providers.
 let requests = [ASAuthorizationAppleIDProvider().createRequest(),
 ASAuthorizationPasswordProvider().createRequest()]

 // Create an authorization controller with the given requests.
 let authorizationController = ASAuthorizationController(authorizationRequests: requests)
 authorizationController.delegate = self
 authorizationController.presentationContextProvider = self
 authorizationController.performRequests()
 }

判斷是通過 Apple ID 憑據登錄還是 iCloud 鑰匙串登錄的具體代碼如下:

func authorizationController(controller _: ASAuthorizationController, didCompleteWithAuthorization authorization: ASAuthorization) {
 switch authorization.credential {
 case let credential as ASAuthorizationAppleIDCredential:
     let userIdentifier = credential.user
     // Sign the user in using the Apple ID credential
case let credential as ASPasswordCredential:
     // Sign the user in using their existing password credential
 default: break
 }
}

跨平臺

在瀏覽器中,你也可以通過 JS SDK 實現用戶熟悉的登錄窗口,通過輸入 Apple ID 和密碼完成登錄。其 API 與原生的相似。

特別的,在 Safari 瀏覽器上,點擊網頁上的 Sign In with Apple 按鈕會直接定向到一個原生的像 Apple Pay 一樣的表單,用戶可以通過 Touch ID 授權快速完成登錄。

Best Practices

相關文章