This post will go over how to add Facebook Sign in capabilities to your app with Swift 3.0. Facebook has a Swift SDK that they provide (although documentation on this is scarce) and I will be going over exactly what you need to do to create a Facebook login in Swift 3.0!
This tutorial will cover:
- Installing the Facebook Swift SDK via CocoaPods
- Configuring the Facebook Login Button
- Registering the App under Facebook Developers
- Presenting the main screen of an app from the login screen
Installing the Facebook Swift SDK via CocoaPods
Add the following pods to your Podfile in order to include the Facebook Swift SDK.
pod ‘FacebookCore’
pod ‘FacebookLogin’
Then run pod install and a file with the name “<Your App Name>.xcworkspace” will be created in your directory if this is your first time installing pods. Open this .xcworkspace file from now on for your project instead of the normal .xcodeproj file.
Configuring the Facebook Login Button
Creating a Facebook Login button is best done within the view controller rather than in the Storyboard. This is because it is necessary to specify read permissions when initializing the button.
The read permissions specified for the Facebook Login button state exactly what information you would like to retrieve from the user after they log in. These permissions will be presented to the User and the User must agree to all of them. To learn more about what specific Read permissions you can obtain, refer to Facebook’s Permissions Reference.
In the View Controller for your login page add the following:
1. Import the Facebook SDK Libraries
2. Make your Login Screen’s View Controller conform’s to the LoginButtonDelegate Protocol which requires that you implement the loginButtonDidCompleteLogin(loginButton: , result:) and loginButtonDidLogOut(loginButton:) methods. (We will fill in those methods later)
…
3. Create the actual Facebook Login Button in the ViewDidLoad() Method. This requires a little configuration. First I initialize the LoginButton() passing in the read permission array containing all of the read permissions I need for my app. In this case below, only the .publicProfile permission is used. Then I set the login button’s delegate to point this this View Controller so that when the button is clicked on, it knows where the implemented delegate methods are located. Lastly I just center the button and add it the root view.
Registering the App under Facebook Developers
That’s it for the Login Button itself! Now all that is needed is to create a Facebook app under the Facebook Developers page.
To create a new Facebook App visit https://developers.facebook.com/products/login and click “Add a new App” in the dropdown menu at the top right of the page. The following dialogue will pop up.
Click “Create the App ID” and you will be redirected to the Product Setup Page. Click “Get Started” on the Facebook Login Product
The last step for configuring this Facebook app with your project is to visit https://developers.facebook.com/docs/facebook-login/ios and only follow steps 3 and 4 while making sure that your app is selected in step 1.
Once you’re done with steps 3 and 4 on Facebook’s iOS configuration page, add the following.
1. Import Facebook Libraries
2. Copy and paste the following two methods in your AppDelegate.swift. The will handle the redirects after the User is finished logging in.
func application(_ application: UIApplication, open url: URL, sourceApplication: String?, annotation: Any) -> Bool {
return SDKApplicationDelegate.shared.application(application, open: url, sourceApplication: sourceApplication, annotation: annotation)
}
func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool {
return SDKApplicationDelegate.shared.application(app, open: url, options: options)
}
3. Add a quick print statement to the LoginButtonDelegate method that we added earlier to test the login functionality.
Now your ready to test the Login Button! Go ahead and run the app, click the “Login with Facebook” button and log into your Facebook account!
The Login screen looks like the following.
Once the login is successful you should see the “Login Success!” message in the console and the Facebook Login button’s text will change to “Log out”.
Presenting the main screen of an app from the login screen
This login button works perfectly, but typically a User expects to be brought to another screen after logging in, and at the moment, our app just stays in the login screen. To present another screen after login, simply add a segue from the login screen to the main home screen for your app. Make sure to give this segue an identifier.
I added a main screen to my Storyboard and a segue presented modally from the Login Screen to that Main Screen with the identifier “showMainScreen”.
As you can imagine, a Facebook Login might not always be successful. Luckily the LoginButtonDelegate signIn method provides us with an enum to handle different log in cases. You can handle the possibility of a Login being cancelled, unsuccessful, or successful like the following.
I use the LoginResult enum provided by the method in a switch statement to determine how the Facebook Login went. Then if the Login was a success I perform the segue to the main screen!
Article Written By,
Thomas Oropeza
