<p>Welcome back to another fantastic episode in our series. Last time, we went over how to integrate the iOS Facebook SDK and authenticating our user. You can watch that episode at <a href="/playlist/Firebase-Social-Login/video/Facebook-Authentication-and-Cocoapods">Facebook Authentication and Cocoapods</a>.</p><br/> <h4>Today's Episode</h4> For our lesson today, I wanted to show you how to do three things: <ul> <li>Get a user's Facebook email address</li> <li>Create a custom Facebook login button</li> <li>Enable production mode for your application</li> </ul> <br/> <h4>Getting Started</h4> Obviously, if you haven't downloaded the project from the last episode, please go ahead and download it at the bottom of <a href="/playlist/Firebase-Social-Login/video/Facebook-Authentication-and-Cocoapods">this page</a>. </br></br> <h4>Edit ViewController.swift</h4> Go ahead and open ViewController.swift and modify our login:didCompleteWith method like so: <br/><br/> <div class='filename'>ViewController.Swift</div> !codebreak !syntax-highlight func loginButton(_ loginButton: FBSDKLoginButton!, didCompleteWith result: FBSDKLoginManagerLoginResult!, error: Error!) { if error != nil { print(error) return } FBSDKGraphRequest(graphPath: "/me", parameters: ["fields": "id, name, email"]).start { (connection, result, err) in if err != nil { print("Failed to start graph request:", err) return } print(result) } } !codebreak <br/> Running the application now, the console will print out your user's information upon successful Facebook authentication: <br/><br/><img style="border-style: solid; border-width: 1px; border-color: #CCCCCC; max-width: 100%" src="https://letsbuildthatapp-videos.s3-us-west-2.amazonaws.com/d83f7942-6394-4ffe-a43a-1fd12614eb1b"/><br/><br/> If you don't see your email address in the resulting print statement, you'll need to include read permissions on the <b>FBSDKLoginButton</b>: <br/><br/> <div class='filename'>ViewController.Swift</div> !codebreak !syntax-highlight loginButton.readPermissions = ["email", "public_profile"] !codebreak <br/> <h4>Custom Login Button</h4> To implement our own custom Facebook login button, we'll first add a regular old UIButton into our view and attach an action to it: <br/><br/> <div class='filename'>ViewController.Swift</div> !codebreak !syntax-highlight override func viewDidLoad() { super.viewDidLoad() //fb button //add our custom fb login button here let customFBButton = UIButton(type: .system) customFBButton.backgroundColor = .blue customFBButton.frame = CGRect(x: 16, y: 116, width: view.frame.width - 32, height: 50) customFBButton.setTitle("Custom FB Login here", for: .normal) customFBButton.titleLabel?.font = UIFont.boldSystemFont(ofSize: 16) customFBButton.setTitleColor(.white, for: .normal) //view.addSubview(customFBButton) customFBButton.addTarget(self, action: #selector(handleCustomFBLogin), for: .touchUpInside) } func handleCustomFBLogin() { //more on this in just a bit } !codebreak <br/> Run this now and you'll get a good ol' blue button that doesn't do much yet: <br/><br/><img style="border-style: solid; border-width: 1px; border-color: #CCCCCC" src="https://letsbuildthatapp-videos.s3-us-west-2.amazonaws.com/cd63655a-2f46-458e-9bc9-5a3a1739acbe"/><br/><br/> <h4>Initiating Facebook Authentication Manually</h4> Here's where we have some interesting code to execute whenever we tap on the custom button: <br/><br/> !codebreak !syntax-highlight func handleCustomFBLogin() { FBSDKLoginManager().logIn(withReadPermissions: ["email"], from: self) { (result, err) in if err != nil { print("Custom FB Login failed:", err) return } //self.showEmailAddress() } } !codebreak <br/> When you run this application, hitting the custom button will launch the user into the Facebook authentication process: <br/><br/><img style="border-style: solid; border-width: 1px; border-color: #CCCCCC" src="https://letsbuildthatapp-videos.s3-us-west-2.amazonaws.com/b07dd569-7270-44b4-b67a-cb8a40b57dd4"/><br/><br/> To get the email address again, we'll refactor our <b>FBSDKGraphRequest</b> code into its own method: <br/><br/> !codebreak !syntax-highlight func showEmailAddress() { FBSDKGraphRequest(graphPath: "/me", parameters: ["fields": "id, name, email"]).start { (connection, result, err) in if err != nil { print("Failed to start graph request:", err) return } print(result) } } !codebreak Now uncomment out the code in <b>handleCustomFBLogin</b> to fetch the email address. <br/><br/> <h4>Production Mode</h4> Some of you guys might have noticed that when you are logging in with various users, you will eventually run this this error: <br/><br/><img style="border-style: solid; border-width: 1px; border-color: #CCCCCC" src="https://letsbuildthatapp-videos.s3-us-west-2.amazonaws.com/2d4e8ad8-e818-4164-b96a-cc7e870cae4f "/><br/><br/> To fix this, you're going to want to take your application live. To do this, head over to Facebook's developer console and enable it: <br/><br/><img style="border-style: solid; border-width: 1px; border-color: #CCCCCC; max-width: 100%" src="https://letsbuildthatapp-videos.s3-us-west-2.amazonaws.com/1273cc75-f752-40fe-81e4-d89d37e106a7"/><br/><br/>