There comes a time when login within an app is necessary to access a secure resource. This post walks through the implementation of a simple login view in Swift. There a number of things new Mobile App developers can find confusing and difficult:
How do I display a login view if the user is not logged in?
How do I keep a user logged in?
How do I display x view of my app once the user is logged in?
This post will help you with these important topics. Future posts will deal with other things which are important such as validating the username and password before sending a request to the server, displaying validation messages to users, dealing with failed login attempts and what to do when the OAuth Token becomes invalid.
Backend Service to deal with login
Writing the service which authenticates a user is out of scope for this post so I have produced a simple service in Apigee which will return an OAuth Token. There is no validation on this service for this example though so any username and password will return an OAuth Token.
To get an OAuth Token from the OAuth service you need to make a POST request as follows:
If successful you should get a response from the OAuth Service with the following information:
Getting Started With Showing A Login Form
Start up Xcode 6 and go to File -> New -> Project and choose the Single View Application template and click Next.
Fill out the details as follows:
Product Name: LoginSample
Displaying a login view to users who are not logged in
To start with we are going to cover the following user story by the end of this step you will have an app which either displays a login view of a welcome screen dependant on whether the user is logged in or not.
User Story Display a login screen to users who are not logged in when they use the app
This post doesn’t cover Auto Layout so we are going to disable it, if you are OK with Auto Layout feel free to leave it enabled and add the relevant layout constraints to the views we are about to create.
Open Main.storyboard and within the File Inspector (⌘ + ⌥ + 1) deselect “Use Auto Layout” and “Use Size Classes” in the Interface Builder Document section.
Drag a new View Controller onto Main.storyboard and within theAttributes Inspector (⌘ + ⌥ + 4) enter the title “Login View”. Drag a Text Field onto the View and position as follows within the Size Inspector (⌘ + ⌥ + 5) and set-up the View as follows:
Switch to the Attributes Inspector (⌘ + ⌥ + 4) and enter the Placeholder text: “Enter a username”. Drag another Text Field onto the View and position as follows within the Size Inspector.
Switch to the Attributes Inspector (⌘ + ⌥ + 4) and enter the Placeholder text: “Enter a password”. Tick the Secure Text Entry checkbox.
Drag a Button onto the View and position within the Size Inspector as follows:
Double Click on the Button and change the button title to Login. Switch to the Attributes Inspector and set the Background colour as follows:
Set the Text Color to White and set the Font to System Bold.
OK, we are now going to add a new UIViewController class for our Login View. Go to File->New->File and select Swift File. Click Next and name the file LoginViewController and click Create.
Open LoginViewController and modify as follows:
Open Main.storyboard back up and click on the Login View and within the Identity Inspector (⌘ + ⌥ + 3) set the Class to LoginViewController. You will also want to set the Storyboard ID to Login
Switch to the Assistant Editor and Ctrl Click from each field to the LoginViewController
Once done your LoginViewController should look as follows:
OK, we are now ready to show the login form. In the AppDelegate.swift file and replace application(_:didFinishLaunchingWithOptions) function with the following:
Run the project and if you followed all of the steps correctly you should see the Login View displayed.
If you’ve got this far and got everything working you have earned yourself a coffee! In Part 2 of this post “How To: A Simple Login Form In Swift” we are going to allow you to sign in to the simple backend and show a Welcome Screen or Login Screen dependant on whether you are currently logged in.