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.

 

ios 10

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.

 

ios 10

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 in iOS 10

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

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

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

 

  1. Drag the Button object to View Controller.
  2. Stretch the button so it covers the width of the device.
  3. Double click on the Button text. Type Touch to Start Secure App as shown in Figure 6.
  4. Scroll down in the button’s attributes until you find the View attributes. Change the Background color to Other.
  5. When the Colors panel appears, click on the Pencils button.
  6. Choose a background color like Banana as shown in Figure 6.
  7. Close the colors panel.

 

Figure 6 – Adding color to the background of the button

 

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

 

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

 

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

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

 

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:

NOTE: If you want to see all the code, there’s a full listing near the end of this article.

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

 

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!

 

Leave a Reply

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