Problem:
We often tend to forget our passwords and so we use some 3rd party password manager to remember. Some time in the process of securing various accounts we tend to keep the password hard as possible with a complex combination which we forget sometimes or make mistake in entering. This may also be a reason for using these apps.
History:
Apple has already addressed this issue in its Safari web browser which automatically fills the password if we had saved one before for any specific sites. This helps the user not to worry about the password or to maintain it somewhere. Apple itself saves it in user’s iCloud account and using which the user can make use of those passwords wherever or whichever device(iPhone, iPad or Mac) their iCloud is configured with.
Solution:
Now Apple has brought a similar feature to the third party apps. Apple has introduced password autofill feature from iOS 11 for third party apps also which is somewhat similar to the same feature which already exists in the Safari browser.
With this feature now the user can just choose a password and it automatically fills the username and password in its respective places without making the user type it.
How to use:
1. Select the field where they want to enter the credentials
2. Select the “Key” icon from the keyboard quicktype bar which lists all the credentials stored in the iCloud account. Or if configured correctly directly choose associated website linked credentials.
3. During the selection process in the above step, the user will be prompted with either Touch ID or Passcode for security reasons.
4. And once chosen any credentials it will automatically be filled in the respective places and the user just needs to select the button to log in.
Note*
1. For this feature to work, there must be some credentials available in their “Accounts & Passwords”.
2. You the credentials can be added in two ways,
a.) Log into a particular website in Safari and save the password when asked.
b.) Add credentials in Settings -> Accounts & Passwords option.
How to implement:
Before we dive into the implementation process let’s see in how many ways this could be done.
1. Apple automatically enables this features for few apps using some complex Heuristics. Where we no need to handle anything for those apps and it will work by default.
2. Manually configuration.
We will cover about the 2nd point which will be useful for developers who wants to implement this feature in their apps.
For which we consider creating an application with a login screen which has two text fields(username & password) and one button for login action.
Note*
1. It is better to do the manual configuration for the app rather than expecting the heuristics do the work.
Steps involved:
1. Make sure to show the quicktype bar appear with key icon in it by doing the following
a. Set “textContent” property for your UITextField / UITextView whichever you are using in your case either through storyboard as follows
• Choose the Text Field in our case.
• Select Attribute inspector. In which change the “content type” property to “username” for username text field and set “password” for password text field.
b. You can set the content type in the code as follows.
usernameTextField.textContentType = .username
passwordTextField.textContentType = .password
Just by making the above change the quicktype bar with the key icon will be displayed and from where you can select the key and choose credentials from the list shown.
2. If you want to make the suggestion more specific for example if you are maintaining a site called “example.com” and you want to suggest the password belonging to that specific site then this step is for you.
For giving particular suggestion in the quicktype bar we have to perform the following steps,
In our Xcode project:
a. Turn on “Associated Domains” from Project Settings -> Capabilities.
b. Add your website URL by clicking the + icon in the following format. For example, you domain name is “example.com” then your associated domain name should be prefixed with “webcredentials:” in the following format
webcredientials:example.com
In our website:
Yes, we also need to perform few steps in the associated website also. This process is for security purpose in order to make sure that website is owned by us and for other security reasons.
Note*
1. It’s mandatory that the associated site must be “HTTPS”(SSL) site else this won’t work.
a. create a file named “apple-app-site-association” and paste the following set of codes which is the standard format used for this purpose. And place the following file in a folder named “.well-known” and place it the folder in your website root directory.
Also, make sure when this file is accessed it should return us the JSON response exactly as follows and not by encoded with any other characters.
{
“webcredentials” : {
“apps” : [“1ABCDEFGHIJ.com.example.TestApp”]
}
}
In the above code snippet,
“1ABCDEFGHIJ” is your team ID.
“com.example.TestApp” is your app bundle ID.
After uploading the above file in its place. If we call the following link it should show the above JSON content.
link:
https://example.com/.web-known/apple-app-site-association.
Now if you run your app the quicktype bar will show us a suggested credentials related to our site.
So now we just need to select the suggestion to perform the authentication process(Touch ID or Passcode) and the credentials will be auto filled.
Conclusion:
Autofill password feature reduces user’s work and which in turn reduces the scale of abandoning the app.
It’s better to include this feature which will be very much useful for the users to overcome the problem I have stated in the first section of this blog and for user convenience.
–
Bharath R,
iOS Developer,
Mallow Technologies.