iOS Password AutoFill

QiShare發表於2019-12-09
iOS

級別：★☆☆☆☆
標籤：「iOS」「Password AutoFill」
作者： WYW
審校： QiShare團隊

前言：Password AutoFill
是iOS11及之後蘋果官方推出的新功能，可用於註冊的時候自動生成密碼，登入成功之後儲存帳號、密碼，相關帳號密碼會儲存在iCloud的KeyChain中，下次登入的時候，可以填充已儲存的帳號密碼，可以自動填充簡訊驗證碼。 可以簡化使用App 和 網頁登入和啟動流程。原生端的UITextField和UITextView都可以做相關配置。我們在Safari瀏覽器中登入成功後儲存的密碼，在App中，也可以自動填充帳號密碼。

一、Password AutoFill準備工作

專案配置

Xcode配置

TARGETS -> Signing & Capabilities -> Associated Domains：新增如：webcredentials:你的域名

服務端配置

在服務端這個路徑下新增apple-app-site-association的檔案，檔案內容為如下json內容。

{ 
    "webcredentials": { 
    	"apps": ["teamID.bundleID"]  
	} 
}
複製程式碼
檢驗方式

簡單校驗方式：訪問 https://你的域名/.well-known/apple-app-site-association 可以訪問到相應檔案。

二、註冊提示、填充強密碼

UITextField或UITextView 配置使用者名稱、密碼文字內容型別。

如果我們想要使用者在註冊的時候，給使用者一個自動生成密碼的選擇。可以使用 passwordTextField.textContentType = UITextContentTypeNewPassword; 指定自動填充密碼。

效果圖

01register.PNG

程式碼

accountTextField.textContentType = UITextContentTypeUsername;
accountTextField.keyboardType = UIKeyboardTypeEmailAddress;

passwordTextField.textContentType = UITextContentTypeNewPassword;
passwordTextField.secureTextEntry = YES;
複製程式碼

UITextContentTypeUsername 及 UITextContentTypeNewPassword 適用於系統版本大於等於 iOS11的裝置。

UIKIT_EXTERN UITextContentType const UITextContentTypeUsername                  API_AVAILABLE(ios(11.0));
UIKIT_EXTERN UITextContentType const UITextContentTypePassword                  API_AVAILABLE(ios(11.0));
複製程式碼

我們可以對密碼填充規則有我們自己的規則，可以使用 UITextInputPasswordRules 配置密碼填充規則。

// 配置密碼規則
passwordTextField.passwordRules = [UITextInputPasswordRules passwordRulesWithDescriptor:@"required: lower; required: upper; required: digit; required: [-]; required: [&]; required: [+]; minlength: 20;"];
複製程式碼

上述密碼輸入框的密碼填充規則為，生成的密碼需要滿足含小寫、大寫字母，數字、 -、&、+的條件，且最小長度為20位。更多相關內容可檢視密碼驗證工具。

UITextInputPasswordRules 適用於系統版本大於等於 iOS12的裝置。

UIKIT_EXTERN API_AVAILABLE(ios(12.0)) @interface UITextInputPasswordRules : NSObject <NSSecureCoding, NSCopying>
複製程式碼

遇到問題

問題1：iCloud Keychain is disabled

[AutoFill] Cannot show Automatic Strong Passwords for app bundleID: bundleID內容 due to error: iCloud Keychain is disabled

上述報錯是因為iCloud 的 Keychain沒有開啟。

處理方式為：設定 iCloud 鑰匙串 設定 -> 點選名字 -> 點選iCloud -> 點選鑰匙串 -> 開啟。

三、登入提示、填充已儲存帳號密碼

當我們想要儲存帳號、密碼的時候需要配置。帳號、密碼輸入框相應的textContentType。

效果圖

鍵盤上方的QuickTypeBar 顯示小鑰匙

02login.PNG

顯示已經儲存過的帳號密碼

03loginPresent.PNG

登入成功後系統自動儲存密碼

05savePassword.PNG

修改已存登入帳號密碼

06updatePassword.PNG

程式碼

accountTextField.textContentType = UITextContentTypeUsername;
accountTextField.keyboardType = UIKeyboardTypeEmailAddress;

passwordTextField.textContentType = UITextContentTypePassword;
passwordTextField.secureTextEntry = YES;
複製程式碼

UITextContentTypeUsername、UITextContentTypePassword 適用於系統版本大於等於 iOS11的裝置。

UIKIT_EXTERN UITextContentType const UITextContentTypeUsername                  API_AVAILABLE(ios(11.0));
UIKIT_EXTERN UITextContentType const UITextContentTypePassword                  API_AVAILABLE(ios(11.0));
複製程式碼

配置瞭如上程式碼後，就會在點選密碼輸入框的時候，顯示鑰匙圖示，點選要是圖示後，就會顯示出已儲存的帳號密碼。並且，只要移除自己的登入頁面的時候，系統就會自動彈出儲存或修改帳號密碼的彈框。

遇到問題

問題1：不顯示密碼填充的小鑰匙。

解決方法：開啟自動填充密碼：設定 -> 密碼與帳戶 -> 開啟自動填充密碼

問題2：登入成功後，沒有顯示儲存密碼，修改密碼系統彈框。

解決辦法：目前筆者在iOS13.0 的iPhone6s的裝置上測試發現彈框顯示與否和 accountTextField.keyboardType = UIKeyboardTypeEmailAddress; 有關，大家如果遇到登入成功後，沒有顯示儲存密碼彈框的問題，可以設定需要的keyboardText的型別試試看。

四、修改密碼

修改密碼的時候也可以使用，自動填充驗證的簡訊（點選鍵盤上的Quick TypeBar，驗證碼自動填充如輸入框），及要使用的自動生成的密碼。

效果圖

鍵盤上方的QuickTypeBar顯示當前收到的簡訊

04modifyPassword.PNG

程式碼

accountTextField.textContentType = UITextContentTypeUsername;
passwordTextField.textContentType = UITextContentTypeNewPassword;
smsCodeTextField.textContentType = UITextContentTypeOneTimeCode;
複製程式碼

UITextContentTypeNewPassword、UITextContentTypeOneTimeCode 適用於系統版本大於等於 iOS12的裝置。

UIKIT_EXTERN UITextContentType const UITextContentTypeNewPassword               API_AVAILABLE(ios(12.0));
UIKIT_EXTERN UITextContentType const UITextContentTypeOneTimeCode               API_AVAILABLE(ios(12.0));
複製程式碼

五、其他

新增帳號密碼

設定 -> 密碼與帳戶 -> 網站與App密碼 ： 新增帳號密碼

根據網站、使用者名稱、密碼新增新的帳號密碼。

新增完畢後，在自動填充密碼的登入頁面，可供選擇填充新增的使用者名稱密碼。

關於WebView相關的內容

關於WebView相關的內容，敬請檢視 Enabling Password AutoFill on an HTML Input Element

和ASPasswordCredential的授權方法有關聯

以前做蘋果登入Sign In With Apple（一） ，登入成功的時候會呼叫如下授權成功的方法。

其中，我們的自動填充密碼，填充成功後，會呼叫到如下方法的ASPasswordCredential型別分支部分。

- (void)authorizationController:(ASAuthorizationController *)controller didCompleteWithAuthorization:(ASAuthorization *)authorization  API_AVAILABLE(ios(13.0)) {
    
    if ([authorization.credential isKindOfClass:[ASPasswordCredential class]]) {
        
        // 儲存過帳號密碼的情況，授權登入的時候會呼叫這裡
        
    }
}
複製程式碼

六、Demo

示例程式碼見：QiPasswordAutoFill

參考學習資料

瞭解更多iOS及相關新技術，請關注我們的公眾號：

iOS Password AutoFill

小編微信：可加並拉入《QiShare技術交流群》。

iOS Password AutoFill

關注我們的途徑有：
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公眾號)

推薦文章：
iOS 給UILabel新增點選事件
用SwiftUI給檢視新增動畫
用SwiftUI寫一個簡單頁面
Swift 5.1 (7) - 閉包
iOS App啟動優化（三）—— 自己做一個工具監控App的啟動耗時
iOS App啟動優化（二）—— 使用“Time Profiler”工具監控App的啟動耗時
iOS App啟動優化（一）—— 瞭解App的啟動流程
奇舞週刊

相關文章