<p>If you've found your way to this page, you're probably well aware of the excitement surrounding Google's latest update to their <b>Firebase</b> PaaS offerring, pushing it to version 3. Along with this change, the Firebase team has introduced many changes to how a developer's code will interface with the basic APIs of their SDK. In this series, we'll go over how to use the new <b>Login APIs</b> to authenticate users from the 3 big social platforms out there: <b>Facebook</b>, <b>Google</b>, and <b>Twitter</b>.</p> <h4>Today's Episode</h4> To start off the series, we'll look at how to create a new application and authentication a Facebook user using their iOS SDK. Below are the steps in which we'll be following: <ul> <li>Follow the <a href="https://developers.facebook.com/docs/ios/getting-started">Getting Started</a> guide from Facebook's iOS SDK Documentation</li> <li>Create a new project and install the Facebook SDK using <a href="https://cocoapods.org/">Cocoapods</a></li> <li>Configure your project's .plist file and update <b>AppDelegate.swift</b> to properly handle Facebook's authentication mechanisms.</li> <li>Integrate the <b>FBSDKLoginButton</b> and delegate methods to verify authentication</li> </ul> <h4>Getting Started</h4> Go ahead and visit the <a href="https://developers.facebook.com/docs/ios/getting-started">Getting Started</a> guide. Start with step one by registering a new application, adding an iOS Platform, and enabling Single Sign On. <h4>Create new application</h4> Finally, we're ready to step into Xcode to do some work. Let's start by creating a new <b>Single View Application</b>: <br/> <img style="border-style: solid; border-width: 1px; border-color: #CCCCCC" src="https://letsbuildthatapp-videos.s3-us-west-2.amazonaws.com/14812802-00ab-44e0-b512-e066b39e2d1e"/><br/> I'm going to go ahead and call my application <b>Firebase Social Login</b>: <br/><img style="border-style: solid; border-width: 1px; border-color: #CCCCCC" src="https://letsbuildthatapp-videos.s3-us-west-2.amazonaws.com/44fa9852-48d6-44c5-ac13-cf0a8e5d934d"/><br/><br/> You can now hit next and save the project onto your hard drive. <h4>Installing Facebook's iOS SDK using Cocoapods</h4> For this section, I'm going to assume you're somewhat familiar with Cocoapods and have it properly installed on your system. If not, visit <a href="https://www.cocoapods.org">Cocoapods</a> for installation steps and read up on this excellent tool all iOS developers should be aware of. </br> Now launch <b>Terminal</b> and change directory to your xcode project folder. Next execute the pod init command: <br/><img style="border-style: solid; border-width: 1px; border-color: #CCCCCC" src="https://letsbuildthatapp-videos.s3-us-west-2.amazonaws.com/27cd18b7-23cb-4280-a847-0c3b5c408207"/><br/><br/> This will generate a file in your folder called Podfile. Go ahead and run <b>open Podfile</b> and this will launch your text editor using this file. For my computer, it loads up <b>TextEdit</b> automatically which is most likely the case for you as well. Now paste in the Facebook pods that we'll be needing later on: <br/> <br/> <div class='filename'>Podfile</div> !codebreak !syntax-highlight # Uncomment the next line to define a global platform for your project # platform :ios, '9.0' target 'FirebaseSocialLogin' do # Comment the next line if you're not using Swift and don't want to use dynamic frameworks use_frameworks! # Pods for FirebaseSocialLogin pod 'FBSDKCoreKit' pod 'FBSDKShareKit' pod 'FBSDKLoginKit' end !codebreak Save the file and exit out of TextEdit. Now run <b>pod install</b> from Terminal: <br/><img style="border-style: solid; border-width: 1px; border-color: #CCCCCC" src="https://letsbuildthatapp-videos.s3-us-west-2.amazonaws.com/7f051962-b7ee-49d8-b1cf-b0835660233b "/><br/> <h4>Important</h4> Close the previously opened project in Xcode and open the FirebaseSocialLogin.xcworkspace project instead. This will contain the necessary pods to authenticate our Facebook user later on: <br/><br/><img style="border-style: solid; border-width: 1px; border-color: #CCCCCC" src="https://letsbuildthatapp-videos.s3-us-west-2.amazonaws.com/a497c4ae-6b8c-460d-bc46-32f6d0d88f32"/><br/> <h4>Configuring Facebook with Bundle ID</h4> Now that our Xcode project is up and running, let's finish off the Facebook configuration by doing two things. First, enter your Bundle Identifier information into the Facebook Dashboard console: <br/><br/><img style="border-style: solid; border-width: 1px; border-color: #CCCCCC" src="https://letsbuildthatapp-videos.s3-us-west-2.amazonaws.com/27c3decd-62ff-4bd6-bac2-8e9e14eff4f2 "/><br/><br/> <h4>Enabling Facebook's Authentication Mechanism</h4> In order for your app to behave nicely with Facebook's authentication mechanism, you'll need to edit your .plist file according to <a href="https://developers.facebook.com/docs/ios/getting-started#xcode">Step 4</a> of the Getting Started guide. Go ahead and replace the placeholder strings with your Facebook App Id and Application name: <br/><br/><img style="border-style: solid; border-width: 1px; border-color: #CCCCCC" src="https://letsbuildthatapp-videos.s3-us-west-2.amazonaws.com/8d14fa0a-9df6-4f50-8c28-1b5e525cbb33"/> <h4>Swift 3 AppDelegate Configurations</h4> Finally, we're going to start writing some Swift 3 code to configure our <b>AppDelegate.swift</b> file. <ul> <li>First, you'll want to import FBSDKCoreKit</li> <li>Next, we'll hook up the FBSDKApplicationDelegate with the proper launchOptions</li> <li>Lastly, let's configure the <b>open url</b> method to handle what happens when Facebook needs to use Safari to perform authentication</li> </ul> Your <b>AppDelegate</b> should look like this afterwards: <br/> <br/> <div class='filename'>AppDelegate.swift</div> !codebreak !syntax-highlight import UIKit import FBSDKCoreKit @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate { var window: UIWindow? func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool { FBSDKApplicationDelegate.sharedInstance().application(application, didFinishLaunchingWithOptions: launchOptions) return true } func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool { let handled = FBSDKApplicationDelegate.sharedInstance().application(app, open: url, sourceApplication: options[UIApplicationOpenURLOptionsKey.sourceApplication] as! String!, annotation: options[UIApplicationOpenURLOptionsKey.annotation]) return handled } //... } !codebreak <h4>FBSDKLoginButton Integration</h4> Let's now write the code that displays a generic Facebook login button that will perform authentication upon tapping it. Open up ViewController.swift and make the following edits: <br/> <br/> <div class='filename'>ViewController.swift</div> !codebreak !syntax-highlight import UIKit import FBSDKLoginKit class ViewController: UIViewController, FBSDKLoginButtonDelegate { override func viewDidLoad() { super.viewDidLoad() let loginButton = FBSDKLoginButton() view.addSubview(loginButton) //frame's are obselete, please use constraints instead because its 2016 after all loginButton.frame = CGRect(x: 16, y: 50, width: view.frame.width - 32, height: 50) loginButton.delegate = self } } !codebreak Run your application and you should see this: <br/><br/><img style="border-style: solid; border-width: 1px; border-color: #CCCCCC" src="https://letsbuildthatapp-videos.s3-us-west-2.amazonaws.com/ed735b76-04ca-4b16-9841-640994b20a64"/><br/><br/> When you try to login, you'll be presented with a page for you to punch in your Facebook credentials. Afterwards, you'll be able to grant permission for your iOS application to know about this user: <br/><br/><img style="border-style: solid; border-width: 1px; border-color: #CCCCCC" src="https://letsbuildthatapp-videos.s3-us-west-2.amazonaws.com/ae50ff82-b589-4c60-b5c4-a0f36e552688"/><br/> <h4>Keychain Sharing</h4> In order to verify that the authentication is successful, you should implement the follow delegate methods and then set your button delegate: <br/> <br/> <div class='filename'>ViewController.swift</div> !codebreak !syntax-highlight class ViewController: UIViewController, FBSDKLoginButtonDelegate { override func viewDidLoad() { //... loginButton.delegate = self } func loginButtonDidLogOut(_ loginButton: FBSDKLoginButton!) { print("Did log out of facebook") } func loginButton(_ loginButton: FBSDKLoginButton!, didCompleteWith result: FBSDKLoginManagerLoginResult!, error: Error!) { if error != nil { print(error) return } print("Successfully logged in with facebook...") } } !codebreak If your Facebook doesn't show a "Log out" label, the authentication was mostly unsuccessful. To fix this, enable <b>Keychain Sharing</b> in your application settings in Xcode: <br/><br/><img style="border-style: solid; border-width: 1px; border-color: #CCCCCC" src="https://letsbuildthatapp-videos.s3-us-west-2.amazonaws.com/d82a2bb1-86b1-4daf-bd57-5f753fc51f64"/><br/><br/> Run your application and perform the Log in authentication again. Now your button should display the correct "Log out" label: <br/><br/><img style="border-style: solid; border-width: 1px; border-color: #CCCCCC" src="https://letsbuildthatapp-videos.s3-us-west-2.amazonaws.com/d1135004-a67a-4a4f-b4d5-61e579e64c84"/><br/><br/> In addition, your console should display the proper message of "Successfully logged in with facebook..."