Facebook Login Using Xamarin.Auth In Xamarin iOS

Delpin Susai Raj

Xamarin iOS Xamarin StudioFacebook LoginXamarin.Auth

10 Comments

Join the conversation! Your thoughts help the community grow.

Marius Crisan7y ago
Thank you for the article. Very pragmatic. Very good resource for starting with these.
Richard Rittenhouse7y ago
Delpin Susai Raj I checked your profile for the visual studio version of the Facebook login with xamarin forms but could not find it. would you mind sending the link to it
Richard Rittenhouse7y ago
Is there a tutorial for cross platform Xamarin forms in vs 2017
- Delpin Susai Raj7y ago
  Yes please check my profile.
Richard Rittenhouse7y ago
Can you post the link for the visual studio tutorial
- Delpin Susai Raj7y ago
  Richard Rittenhouse i did't understand your questions. what tutorial .
Zeeshan Ali7y ago
Realy helpful article
- Delpin Susai Raj7y ago
  Shani Malik Thanks for your feedback :)
Arvind Chourasiya9y ago
Really nice article. Thank you Susai.
- Delpin Susai Raj9y ago
  Thanks for your comments Arvind Chourasiya

Introduction

Xamarin is a platform to develop cross-platform and multi-platform apps (for example, Windows phone, Android, iOS). In Xamarin platform, the code sharing concept is used. In Xamarin Studio, Visual Studio is also available.

Browse Code Here

Prerequisites

Xamarin Studio(or)Visual Studio For Mac.
Xcode.
Facebook Account.

The steps given below are required to be followed in order to Facebook Login using Xamarin.Auth in Xamarin iOS.

Step 1

Go to https://developers.facebook.com.

Step 2

After Loggin in to Developer.Facebook.com, Click Add a New App.

Step 3

In this step, ceate your app Id.

Display Name - Ex: MyApp
Contact Email - [email protected]

Afterwards, click on "Create App ID".

Step 4

Now, your app id is ready. Go to Dashboard. App details are available here.You can copy your app id and paste your code.

Step 5

In this step, set valid OAuth redirect URI.

Step 6

Now Create Your App.

Go To Xamarin Studio.

Click New Solution—> select iOS—>select App--> Choose single View App. Afterwards, click Next.

Step 7

In this step, configure your app. Give the app name (Ex:sample), Organization Identifier. Afterwards, click Next.

Step 8

In this step, give your project name (Ex: Sample) and solution name (Ex: Sample). Give the path of your project. Afterwards, click Create.

Step 9

Subsequently, go to the solution. In the solution, get all the files and sources in your project. Now, select Main.storyboard and double click to open Main.storyboard page.

Step 10

After opening the Main.storyboard, you can design this page, as per your desire.

Step 11

In this step, You need to add Xamarin.Auth Package.

Go to Solution Explorer—> Packages—>Right Click—>Add Packages—>Select Xamarin.Auth.

Step 12

Now, check your package.

Go to Solution Explorer—> Packages—> Xamarin.Auth.

Step 13

In this step, design your app using Storyboard, Toolbox, and Properties.

ImageView (imgCover)
ImageView (imgProfile)
Label(lblName)
Button(btnLogin)

Step 14

In this step, go to the ViewController.cs page. Write the code given below.

ViewController.cs

using System;
using UIKit;
using Xamarin.Auth;
using System.Json;
using Foundation;
namespace XamariniOSFacebookLogin {
public partial class ViewController: UIViewController {
protected ViewController(IntPtr handle): base(handle) {
// Note: this .ctor should not contain any initialization logic.
}
public override void ViewDidLoad() {
base.ViewDidLoad();
// Perform any additional setup after loading the view, typically from a nib.
}
partial void UIButton8_TouchUpInside(UIButton sender) {
var auth = new OAuth2Authenticator(clientId: “Your App Id“, scope: "", authorizeUrl: new Uri("https://m.facebook.com/dialog/oauth/"), redirectUrl: new Uri("http://www.facebook.com/connect/login_success.html"));
auth.Completed += Auth_Completed;
var ui = auth.GetUI();
PresentViewController(ui, true, null);
}
private async void Auth_Completed(object sender, AuthenticatorCompletedEventArgs e) {
if (e.IsAuthenticated) {
var request = new OAuth2Request("GET", new Uri("https://graph.facebook.com/me?fields=name,picture,cover,birthday"), null, e.Account);
var response = await request.GetResponseAsync();
var user = JsonValue.Parse(response.GetResponseText());
var fbName = user["name"];
var fbCover = user["cover"]["source"];
var fbProfile = user["picture"]["data"]["url"];
lblName.Text = fbName.ToString();
imgCover.Image = UIImage.LoadFromData(NSData.FromUrl(new NSUrl(fbCover)));
imgProfile.Image = UIImage.LoadFromData(NSData.FromUrl(new NSUrl(fbProfile)));
}
DismissViewController(true, null);
}
public override void DidReceiveMemoryWarning() {
base.DidReceiveMemoryWarning();
// Release any cached data, images, etc that aren't in use.
}
}
}

Step 15

Now, go to Run option, choose Debug with the desired simulator from the list of iPhone and iPad simulators. You can choose any one simulator and run it.

Output

After a few seconds, the app will start running on your iPhone simulator.You will see your app working successfully.

You can login using your Facebook login credentials. It will work successfully.

Summary

This was the process of how to implement Facebook Login using Xamarin.Auth in Xamarin iOS.