Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

iOS 11 Password Autofill

DZone's Guide to

iOS 11 Password Autofill

Learn how to enable a quicktype bar to find saved passwords in iCloud Keychain in iOS11 to avoid typing your password every time.

· Mobile Zone ·
Free Resource

Safari on your iPhone, iPad, and Macbook saves the passwords on iCloud keychain so you do not have to retype them. Now, with iOS 11, the passwords are saved and synced with the associated websites, so if you visit the website of an app and log in there, you do not have to type the password in the app again. To make this happen, you have to do small tweaks. In this article, I will tell you what to do with a simple demo.

If you do not do the necessary changes, here's how your app looks:

Image title

As you can see, there is no quick type bar over the keyboard. To display quick type bar, you should set the Content Type property of UITextField to either username or password. You can do it on Interface Builder or programmatically: 

let usernameField = UITextField()
let passwordField = UITextField()
usernameField.textContentType = .username
passwordField.textContentType = .password


Image title

As you can see, now the user can look for saved passwords in iCloud Keychain by tapping on the key icon and making iOS fill in  the username and password.

If your app has an associated website, you can make the login process easier. Once a user logs in via Safari to your website, the login info is saved into iCloud Keychain, and if you associate the app with the website, here's how it looks in the quick type bar:

Image title

To associate your app with your website, use XCode to select your Target and then Capabilities.

Image title

Enable the "Associated Domains" section and enter your domain. In the "steps" section, if the items are not checked, go to your Apple developer portal, select your app's id in the "Identifiers" section, and enable "Associated Domains" there.

Now the app knows its website, but because it is two-way recognition, the website also has to know its app. To do this, a file named "apple-app-site-association" needs to be deployed to the website's root folder or .well-known directory. The file's content should be like this:

{
   “webcredentials”: {
         “apps”: [“TEAM_IDENTIFIER.BUNDLE_ID”]
    }
}

The team identifier can be found on the Apple developer portal's membership page, and the bundle id is your app's bundle identifier.

After deploying the file, you should test it on real device because associated domains do not work on simulators.

Troubleshooting

If it does not work out, you can search for the "swcd" keyword in the console output. That will help find the problem. 

Topics:
ios ,ios 11 ,tutorial ,mobile

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}