How to Add a Facebook Login to Your App (and Collect User Info)

Logging into apps with your Facebook credentials instead of an e-mail is commonplace these days. So, how do you add this functionality to your app? It’s actually fairly simple.

Before you start, register your app with Facebook. To do this, you need to log in to Facebook, go to the developer’s section, and add your app. Follow all the setup instructions here before continuing: https://developers.facebook.com/docs/ios/getting-started

1] Next, you’re going to need to install a couple Facebook SDKs. I recommend using cocoapods. Accomplish this by adding the following to your Podfile:

pod “FBSDKCoreKit”

pod “FBSDKLoginKit”

pod “FBSDKShareKit”

2] Now you’re ready to add your Login Button. Import the following at the top of your view controller:

#import <FBSDKCoreKit/FBSDKCoreKit.h>
#import <FBSDKLoginKit/FBSDKLoginKit.h>

Then, add the button to your view controller:

FBSDKLoginButton *loginButton = [[FBSDKLoginButton alloc] init];

// Optional: Place the button in the center of your view.

loginButton.center = self.view.center;

[self.view addSubview:loginButton];

This will give you:

Nice! Give it a shot and see if it works. When you return, you’ll see that the button automatically changed to its new state:

If you want to customize its size and position using Interface builder, here’s how to get it done:

1] Add a plain ol’ view to your view controller on the storyboard.

2] Set your newly placed view’s custom class to: FBSDKLoginButton

3] Position and size accordingly. This view will now act and look like the Facebook button above. I also recommend setting the view mode to “Aspect Fit”

Now let’s get to the fun stuff — how to get the user’s profile information.

1] Set the delegate on your view controller:

<FBSDKLoginButtonDelegate>

2] Prepare to listen for login status updates. This can be put in your viewDidLoad:

[[NSNotificationCenter defaultCenter] addObserver:self selector:

@selector(userLoginStatusChanged) name:FBSDKProfileDidChangeNotification object:nil];

3] Now we need to set the button’s delegate and set the permissions. The permissions are what we will ask the user logging in to give us access to.

facebookLoginButton.delegate = self;

facebookLoginButton.readPermissions = @[@”email”, @”public_profile”, @”user_birthday”];

[FBSDKProfile enableUpdatesOnAccessTokenChange:YES];

Check here for all the permissions you can ask for: https://developers.facebook.com/docs/facebook-login/permissions/v2.4

4] To see all the info you’ve collected, set up the following method (which is connected to the NSNotification that we set up in Step 2)

-(void)userLoginStatusChanged{

NSLog(@”Current Profile %@”, self.currentFacebookProfile);

if (self.currentFacebookProfile){

[[[FBSDKGraphRequest alloc] initWithGraphPath:@”me” parameters:@{@”fields”:

@”first_name, last_name, picture.width(540).height(540),

email, name, id, gender, birthday”}]

startWithCompletionHandler:^(FBSDKGraphRequestConnection *connection,

id result, NSError *error) {

if (error) {

NSLog(@”Login error: %@”, [error localizedDescription]);

return;

}

NSLog(@”Gathered the following info from your logged in user:

%@ email: %@ birthday: %@,

profilePhotoURL: %@”, result, result[@”email”], result[@”birthday”],

result[@”picture”][@”data”][@”url”]);

}];

}

The most important part from above is making the Graph request:

[[[FBSDKGraphRequest alloc] initWithGraphPath:@”me” parameters:@{@”fields”:

@”first_name, last_name, picture.width(540).height(540), email, name, id, gender, birthday”}]

startWithCompletionHandler:^(FBSDKGraphRequestConnection *connection, id result, NSError *error)

Because we asked for the proper permissions, we’re now able to collect this information. But we need to specify which bits of information we want via FBSDKGraphRequest. It returns the info via NSDictionary. All that you have to do is dive into the dictionary and get what you need.

That’s a basic intro to logging in with Facebook and gathering data!

This post originally appeared on Alan Scarpa’s blog. You can tweet him with questions, comments, or suggestions @alanscarpa, or read more of his posts on Medium here.