close
login with facebook

The simplest tutorial of login with facebook using swift 3. You’ll be creating login with facebook button and get user information like username, email and profile picture.

About the App:

We will be building a very simple app. It’ll have a login with facebook button and when user allows it’ll display name, email and profile picture of the person.

Setting up Facebook Developers:

Open developers.facebook.com. Login to the panel and add a new app by selecting my apps from top right of the page.

add a new app facebook developer

Give you app a name. This name will display when user will be allowing you the access to their data.

create a new app ID facebook developers

After you create and App ID the page will take you to +Add Product. Ignore that and select settings from the menu on the left.

settings of app facebook developers

You need to add a platform here. As we are building an iOS app so click on +Add Platform and select iOS

select platform facebook developers

Leave it here and create a new project in xCode.

xCode Project:

Copy the bundle ID

bundle ID xcode

Paste the Bundle ID to the +Add Platform on developers.facebook.com app settings. Also Turn Single Sign On on.

paste bundle ID facebook ios tutorial

Save the changes on facebook developers portal and that’s it for this portal. Now we will only do the coding in xCode.

xCode Settings:

Open info.plist as source code and paste the following in it:

VERY IMPORTANT: YOU NEED TO REPLACE THE APP ID AND DISPLAY NAME AS YOURS. Careful while copying the code above you need to replace the CFBundleURLSchemes and FacebookAppID and FacebookDisplayName.

  • CFBundleURLSchemes: It goes like fb<your_app_id>
  • FacebookAppID: You can see it in settings on facebook developers portal.
  • FacebookDisplayName: It is also present in the facebook developers portal under settings. It is the display name show there.
facebook login settings in plist xcode ios

Cocoapods:

Close xCode and make a podfile for your project. Need help? You can learn how to install cocoapods for the first time.

Paste the following facebook SDK pods in the pod file:

creating pod file

Open terminal and write the following commands:

successfult installation of cocoapods

Now open .xcworkspace file created by the xcode.

Setting up the User Interface:

Open storyboard and add three UILabel and two UIView in the ViewController.swift

viewController

Now we need to change the custom class of both of the UIView. One view will server as a login with facebook button and other will display profile picture of the user. So select the square looking UIView and add it’s custom class to FBSDKProfilePictureView

setting facebook profile picture custom class

Do the same for UIVIew that you have placed at the bottom of the screen. Change it’s custom class to FBSDKLoginButton

adding a custom class facebook login button

Coding:

Let’s start with AppDelegate.swift. Open it and import FBSDKCoreKit.

In didFinishLaunchingWithOptions add

before the return statement.

We need to add a new method here. Copy/paste this method in AppDelegate.swift

Open ViewController.swift and import FBSDKLoginKit

Make and attach IBOutlets of the UI elements we added earlier.

connecting outlets

Extend this ViewController.swift by adding FBSDKLoginButtonDelegate next to UIViewController in it.  Next Add the following code in viewDidLoad method.

Now as we have extended it we have to implement some mandatory functions. So add these following two methods:

The last thing left to implement is the updateUserProfile method that we have written.

Finally run the program and it’ll run successfully.

login with facebook

 

Chaudhary Talha

The author Chaudhary Talha

I'm an iOS developer by profession and UI/UX designer by passion. All my tutorials are based on my personal experiences and whenever I learn something new I share it with the world.