iOS 10 is here along with a new version of Xcode. There is also a new version of Swift 3 that is now in a stable format. What all this means is that even if your iOS app code worked before, there’s a chance parts of it have broken. In this article we are going to create an app that uses the latest technology at the time of the writing of this article. This app requires the user to authenticate that the device belongs to them using the TouchID. Most people are familiar using the TouchID (fingerprint biometrics) to unlock their phone. However, not many people know that you can also do the same thing with your apps. In this tutorial, we will use the latest version of Xcode (8.2), Swift 3 and make the new iPhone 7 our target device.

Setting up the Project

At the start of this project, you may want to check to make sure that you have a current version of Xcode. In this article, Xcode 8.2 beta is used. To start, launch Xcode and create a Single View Application as shown in Figure 1.

Figure 1 – Single View Application

Figure 1 – Single View Application

After clicking the Next button, you’ll be asked for some information for your app. In Figure 2 you’ll see some data that has been added. As you type in the Organization Identifier, the unique Bundle Identifier will appear below the text field. Typically a “reverse domain” name is used so the ltp.com is com. ltp. It doesn’t matter for this project if it’s for the phone or iPad so leave the Device at Universal. Once the dialogue is complete, click the Next button.

Figure 2 - Options for the Project

Figure 2 – Options for the Project

Xcode will ask for a location to save this file. Once you have a location picked on your computer, click the Next button again.

What you will notice, is that by default the highest target value SDK is selected. The code in this article is set for the latest version, 10.2, at the time of writing. When you look at the main project screen, you’ll see the Deployment Target in the Deployment info section.

Setting up Authentication

Before getting into the interface design or coding, you should load in the Local Authentication framework. To load this framework:

  1. Click on the Build Phases.
  2. In the Link Binary with Libraries category, click the Add (+) button.
  3. In the Choose framework dialog box, type local to filter the frameworks.
  4. Click on the LocalAuthentication framework.
  5. Click the Add button. Look at Figure 3 to see the steps.
    Figure 3 - Adding the LocalAuthentication framework

    Figure 3 – Adding the LocalAuthentication framework

  6. Click on ViewController.swift file in Project Navigator so you can edit the code.
  7. Under the import UIKit, add import LocalAuthentication as shown in Figure 4.
    Figure 4 - Importing the LocalAuthentication

    Figure 4 – Importing the LocalAuthentication

Setting up the Interface

For this application, we will only need two objects; a button and an image. The idea behind the app is that the image is meant to be kept secured. Only the owner of the phone can access the image. Within the code, you will see how you can run the rest of the program once the user has been authenticated.

To build the interface:

  1. Click on the Main.storyboard in the Project navigator panel.
  2. Click on the Show Objects button near the bottom of the Utilities panel.
  3. Rather than scrolling through all the objects, start typing button at the bottom. You’ll see the button object appear at the top as shown in Figure 5.
    Figure 5 - Button object

    Figure 5 – Button object

  4. Drag the Button object to View Controller.
  5. Stretch the button so it covers the width of the device.
  6. Double click on the Button text. Type Touch to Start Secure App as shown in Figure 6.
    Figure 6 - Adding color to the background of the button

    Figure 6 – Adding color to the background of the button

  7. Scroll down in the button’s attributes until you find the View attributes. Change the Background color to Other.
  8. When the Colors panel appears, click on the Pencils button.
  9. Choose a background color like Banana as shown in Figure 6.
  10. Close the colors panel.

Before bringing over the image object, drag the image into the project. For this article I have a profile shot of a 50mm gun shown at a military conference. While this is not secure image, it’s being used as secure content. For this article, feel free to use any image you want.

Once you have the image selected, drag the image from Finder to the Project Navigator panel. A dialog box similar to Figure 7 will appear. It is very important to make sure Copy Items if needed is selected. This will ensure that the image is copied into the project folder. Therefore, if you move the project to another computer, all the assets will come with it and it shouldn’t break.

Figure 7 - Copy image to project folder

Figure 7 – Copy image to project folder

To set up the images:

  1. In the Object library, type in image in the filter text field.
  2. Drag an image object onto the view controller.
  3. At the top of the Utilities, click on the Image pull-down menu. Select the image you dragged into the project folders. In this case, it’s Gun Profile.jpg.
  4. Staying in the Utilities panel, click on the Hidden check box so the image will not appear. Figure 8 shows what the Utilities panel should resemble.
    Figure 8 - Configuring the image not to appear

    Figure 8 – Configuring the image not to appear

The Coding

It’s now time to add the code. The pseudo code could be written as follows:

  • Test to see if the device can evaluate the authentication policy
  • If yes, then check to see if the authentication passed
    • If yes, then make image visible (launch program)
  • else
  • Give an error message that you’re not the right user
  • else
  • Show alert indicating that the device does not support authentication

Before starting, the image needs to be linked as an outlet and the button has to be linked as an action object.

Before linking the objects, turn on the Assistant by clicking the Assistant button as shown in Figure 9.

Figure 9 - Turn on the Assistant

Figure 9 – Turn on the Assistant

To link the image, hold the CTRL key down and click on the image. While the mouse button is still down, drag the arrow to the line just under the class ViewController.UIViewController as shown in Figure 10. Give the outlet name secureContent.

Figure 10 - Linking the image

Figure 10 – Linking the image

Next, click on the button. Hold down the CTRL key and drag the mouse to the bottom of the code but before the last closing}. Change the Connection to Action. Give it the name btnAuthentication. Click the Connect button. Your code should look similar to the code below. To make it easier to read, add some blank lines between the braces:

At the beginning, we define a constant and a variable. Type in the following code between the brackets.

The next step is to check to see if the device can evaluate the user. Before writing the code, keep your eye on what Xcode does. It will provide you hints on what it thinks you are going to write. Once you see the hint you want, press the Enter key. Xcode will write the code you need. Not only does this save time, it eliminates typing errors on some very long names. Another nice thing is that you can press the Tab key to jump to different parameters. Figure 11 shows you what the hinting will look like:

Figure 11 - Code hinting

Figure 11 – Code hinting

The code to type in is as follows:

The next step is if the device can detect fingerprints and then to see if the user is the authentic user of the device. Under the remark statement, write the following code:

This sets up the structure of the validation. The addition of the comments should help determine what each area does. If the program is successful, then you can get the code to call a function that will show the hidden image. Before the last closing brace, add the following code:

You should then add the following code in the valid user section. (Only add the bolded code. The rest of the code is there as a reference.)

The line of code with the OperationQueue is an optional line. Without this line, the delay in waiting for the authentication to work takes anywhere from five to 10 seconds or more, in some cases. By adding this line, you speed up the authentication process to less than a second, in most cases.

To add code for the invalid fingerprint, add the following code under the Not Valid comment. The code will show an alert dialog box with the appropriate message. This message is that the user is not the authentic user. This message would appear if someone other than the device owner tried the fingerprint scanner or if the user scanned a finger other than the one used when setting up the authentication.

That covers a majority of the code. However, it was put together in pieces. Below is the complete code.

In order to see this work properly, it would need to be published to a device that has the localAuthentication setup and have an operating system equal to or greater than the base SDK. If you recall, the base SDK for this article is 10.2.

Conclusion

That is the end of the authentication portion of the app. If errors occur, check the base SDK of the project. The localAuthentication functions are geared for 10.2. If you have a lower base SDK, such as 10.1 or lower, errors will be flagged. One of the great features of Xcode is that will provide you with hints as to what the issues are and suggest fixes. While the program just reveals a hidden image, there are many other things that can be added. For example, a second view controller can be added to the app. After the authentication, the second view controller can be pushed. The only way that you’d get to this controller, is if the user has their fingerprint stored within their device. Hopefully, the fact that you can use the TouchID within the app, and not just to unlock the device, will get your imagination running. Happy coding!

One thought on “Your First iOS 10 App

  1. Thanks for this Touch ID tutorial!

    A few observations:
    – Cut and Paste of source code into XCode produced errors related to string encoding. Type the code instead (or at least type the strings yourself).
    – You can test Touch ID in the Simulator by :
    – enable Touch ID by selecting the ‘Hardware -> Touch ID -> Toggle Enrolled State’ menu item.
    – Click ‘Touch to Secure App’ button.
    – Select ‘Hardware -> Touch ID -> Matching Touch’ or ‘Hardware -> Touch ID -> Non-matching Touch’.

    Also I uploaded the source to github: https://github.com/rcuyegkeng/Start-with-Touch-ID

    Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *