IOS Password AutoFill Development Guide

Introduction

The new features of IOS11 are described in the book "IPhone User Guide for IOS 11.4". In the section of Safari, fill in forms is described. That is, when you log in, sign up, and buy on the Web, users can fill out the page's form by using the keyboard, or safari to fill it out (provided you have autofill enabled).

AutoFill function Open with: Set →safari→ auto-Fill (AutoFill). There are two functions of using autofill:

1. Save your password: You enter the password in the webpage, Safari asks if you want to save the password for the website you are logged into, and click Yes.

2. To provide a suggestion password for the new account: Click the Password area, click the prompt password, click on the use of the suggested password, you can use the suggested password

In order to register the process of B station, open Safari, and then open the site, you can register, register in the new password, there will be prompted password, click the prompt password will pop up figure (1), Safari will generate a suggested password for you, then you use the suggested password can be (2), When you log in again, simply select the account password you have stored.

There is also a very good function point: when you log in with the site associated with the app, the system will automatically fill in your account password, to achieve two-step login effect (click the prompt to automatically enter the account password, and then click Login to log in)

If you want to see your saved password, you can view your current stored password by opening the settings → account and password → app and website password:

The following is a simple implementation of a similar function of the demo: After the Web login, the app can be directly password AutoFill. will be introduced from four aspects:

1. How to show it QuickType Bar
2. Ensure the correct UI display
3. Let QuickType bar display the correct information
4. Certification for third-party services

How to show it QuickType Bar

The so-called QuickType bar, is that you use the input box to adjust the keyboard when the bar on the keyboard, to show out QuickType bar, the first thing to meet the condition is: in the set of accounts and passwords must have saved account password .

Such as:

On the left, there is no account and password in the account and password, the right side is the case of saving an account and password. That is, as long as the system in the "Account and password" to save data, QuickType Bar will appear a lock, click to select the current saved account and password to achieve the fill input effect.

As long as you use Uitextfield or Uitextview, you can show QuickType Bar without developing any code. Of course, if you are not using these two controls, then you need to implement the <UITextInput> protocol. This feature can also be used after implementing this protocol. The question is: How does the Apple system know how the content you saved in your account and password is automatically populated in your own development page form? The Textcontenttype is used here:

Textcontenttype represents the semantics expected by the text input area. For example, you can execute the input box Textcontenttype: uitextcontenttypeemailaddress, so that when you enter content, the system can in some cases automatically select the appropriate keyboard. By default, this property is nil.

The contenttype included in the system before iOS11 are: (note iOS system version limitations)

Uikit_extern UitextcontenttypeConstuitextcontenttypename Ns_available_ios (10_0); Uikit_extern UitextcontenttypeConstuitextcontenttypenameprefix Ns_available_ios (10_0); Uikit_extern UitextcontenttypeConstuitextcontenttypegivenname Ns_available_ios (10_0); Uikit_extern UitextcontenttypeConstuitextcontenttypemiddlename Ns_available_ios (10_0); Uikit_extern UitextcontenttypeConstuitextcontenttypefamilyname Ns_available_ios (10_0); Uikit_extern UitextcontenttypeConstuitextcontenttypenamesuffix Ns_available_ios (10_0); Uikit_extern UitextcontenttypeConstuitextcontenttypenickname Ns_available_ios (10_0); Uikit_extern UitextcontenttypeConstuitextcontenttypejobtitle Ns_available_ios (10_0); Uikit_extern UitextcontenttypeConstuitextcontenttypeorganizationname Ns_available_ios (10_0); Uikit_extern UitextcontenttypeConstuitextcontenttypelocation Ns_available_ios (10_0); Uikit_extern UitextcontenttypeConstuitextcontenttypefullstreetaddress Ns_available_ios (10_0); Uikit_extern UitextcontenttypeConstUITextContentTypeStreetAddressLine1 Ns_available_ios (10_0); Uikit_extern UitextcontenttypeConstUITextContentTypeStreetAddressLine2 Ns_available_ios (10_0); Uikit_extern UitextcontenttypeConstuitextcontenttypeaddresscity Ns_available_ios (10_0); Uikit_extern UitextcontenttypeConstuitextcontenttypeaddressstate Ns_available_ios (10_0); Uikit_extern UitextcontenttypeConstuitextcontenttypeaddresscityandstate Ns_available_ios (10_0); Uikit_extern UitextcontenttypeConstuitextcontenttypesublocality Ns_available_ios (10_0); Uikit_extern UitextcontenttypeConstuitextcontenttypecountryname Ns_available_ios (10_0); Uikit_extern UitextcontenttypeConstuitextcontenttypepostalcode Ns_available_ios (10_0); Uikit_extern UitextcontenttypeConstuitextcontenttypetelephonenumber Ns_available_ios (10_0); Uikit_extern UitextcontenttypeConstuitextcontenttypeemailaddress Ns_available_ios (10_0); Uikit_extern UitextcontenttypeConstuitextcontenttypeurl Ns_available_ios (10_0); Uikit_extern UitextcontenttypeConstuitextcontenttypecreditcardnumber Ns_available_ios (10_0); Uikit_extern UitextcontenttypeConstuitextcontenttypeusername Ns_available_ios (11_0); Uikit_extern UitextcontenttypeConstUitextcontenttypepassword Ns_available_ios (11_0);

Two new uitextcontenttypeusername and Uitextcontenttypepassword are added to the iOS11, just set this property for TextField:

Self.accountTextField.textContentType == Uitextcontenttypepassword;

This system will be based on the contenttype of your account and password according to your settings to fill in the corresponding input box. If your account is a mailbox, you can set ContentType to Uitextcontenttypeusername and set the keyboard keyboardtype to: Uikeyboardtypeemailaddress.

Ensure the correct UI display

As long as we have set the textcontenttype of two input boxes, we can fill the specified information into the specified TextField. However, sometimes this is the case: after two input box contents are filled out, the login button can be clicked. In this case, we need to handle the UI operation. From clicking on the key icon of QuickType Bar to Uitextfield filling the content, you will notice that there is no view declaration period called. Therefore, it is obviously not feasible to handle UI presentation in the view lifecycle. You can work with the Uitextfielddidchange proxy method. We will not repeat it here.

Let QuickType bar display the correct information

Look directly at the first figure of 5, then the question is, QuickType bar how to know it to show the specific app's account and password? You'll need to associate the app with the Web page here. Here is a detailed description.

App settings

First we need to set up the app:

First open associated Domains, you can login directly at https://developer.apple.com/and then enter certificates, Identifiers & Profiles, Select your identifiers, click Edit, tick associated Domains.

Once you're done, add it in the format above. Webcredentials: Website address. After the add is complete, the app settings are complete.

Server settings

Create a JSON file named apple-app-site-association (do not add a JSON suffix), and then fill in the following information:

" webcredentials " : {    "apps""E5334VM85F.com.example.Shiny"  ]  }}

The JSON file is then placed at the root of the domain name, or under the. Well-known directory, as long as it can be accessed using the following URL: TheApps content format is Teamid.bundle Identifier.

HTTPS://example.com/.well-known/apple-app-site-associationhttps://  Example.com/apple-app-site-association

This completes the service-side setup. Here is the access link for a station: Https://www.bilibili.com/.well-known/apple-app-site-association. Its format is universal links format, and is not followed but still can be used correctly. Why???.

By completing the above two steps, the password AutoFill function can be realized and can be displayed in Quicktypebar.

But in an existing way, only after we log in and store the password in Safari can we use it in the app. (If you know the URL, you can manually add it to your "account and password"). The only thing I've seen to do this now is station B. The following is a simple schematic diagram:

Certification for third-party services

For a third-party account login, Apple recommends using Safari View controller, which should use the controller to load a three-party authentication login and then save the data through Safari View controller. Most apps that have a three-way login directly evoke a three-party app (such as) and then return to their app after performing the action, which is a personal understanding that this feature is temporarily unavailable.

Specific implementation of our own research.

Summarize

Using this method can greatly reduce the cost of user input operations, but it is embarrassing to have Safari login now (Mobile Safari and Mac Safari). The Mac can also be synchronized, but only takes time. However, this operation is very convenient if the user saves their account password to the "account and password" in the system.

Syncing at this stage only synchronizes Safari's login information to the app, which is said to iOS12 the app's information to the website, and the mobile app supports registration by filling in the recommended password (Textcontenttype adds NewPassword. Currently only Safari supports the recommended password). But at this stage has not upgraded to IOS12, interested in can view WWDC2018, there is the introduction of this piece.

Report

1.wwdc2017 Introduction to Password AutoFill

2.Implementing AutoFill Credential Provider Extensions

3.Automatic Strong passwords and Security Code AutoFill

4.Support Universal Links

IOS Password AutoFill Development Guide