Xamarin.Forms Social Authentication with Azure Mobile Services – Part 2

In the previous article we prepared the project. If you haven’t done that, do! It’s necessary. You can find it here.

Authenticate the user using social networks

Alright, the fun part starts now!

Let’s create our project, as I’ve mentioned here previously my preference is for the Shared project. That’s the one I created. After the project is created we are going to add some buttons to our app, they will trigger the user login.

At my App.cs’ constructor I added this code:

[code lang=”csharp”]var welcomeLabel = new Label
{
HorizontalOptions = LayoutOptions.CenterAndExpand
};
var fbButton = new Button
{
Text = "Facebook",
HorizontalOptions = LayoutOptions.CenterAndExpand,
BackgroundColor = Color.FromHex("#3b5998")
};
var googleButton = new Button
{
Text = "Google+",
HorizontalOptions = LayoutOptions.CenterAndExpand,
BackgroundColor = Color.FromHex("#d50f25")
};
var twitterButton = new Button
{
Text = "Twitter",
HorizontalOptions = LayoutOptions.CenterAndExpand,
BackgroundColor = Color.FromHex("#55acee")
};

MainPage = new ContentPage
{
Content = new StackLayout
{
VerticalOptions = LayoutOptions.Center,
Children = {
fbButton,
googleButton,
twitterButton,
welcomeLabel
}
}
};[/code]

This is the current result:

Now we will create a class called SocialLogin to handle the authentication process. Here’s how it will look:

[code lang=”csharp”]public static class SocialLogin
{
private static readonly MobileServiceClient Client =
new MobileServiceClient("YOUR_APP_URL", "YOUR_APP_KEY");

private static async Task<MobileServiceUser> Authenticate(
MobileServiceAuthenticationProvider provider)
{
try
{
#if __IOS__
return await Client.LoginAsync(
UIKit.UIApplication.SharedApplication
.KeyWindow.RootViewController,
provider);
#elif WINDOWS_PHONE
return await Client.LoginAsync(provider);
#else
return await Client.LoginAsync(
Xamarin.Forms.Forms.Context,
provider);
#endif
}
catch (Exception ex)
{
return null;
}
}

public static async Task<MobileServiceUser> AuthenticateGoogle()
{
return await
Authenticate(MobileServiceAuthenticationProvider.Google);
}

public static async Task<MobileServiceUser> AuthenticateTwitter()
{
return await
Authenticate(MobileServiceAuthenticationProvider.Twitter);
}

public static async Task<MobileServiceUser> AuthenticateFacebook()
{
return await
Authenticate(MobileServiceAuthenticationProvider.Facebook);
}
}[/code]

Ok, let’s understand what’s happening there. First we create our Azure Mobile Services Client passing our Mobile Services URL and Key:

[code lang=”csharp”]private static readonly MobileServiceClient Client =
new MobileServiceClient("YOUR_APP_URL", "YOUR_APP_KEY");[/code]

Then we create a method called Authenticate that will check the current platform and request Azure’s login accordingly and some extra three methods that will create a request for authentication at every provider.

Now we go back to our App.cs class to make some changes. After the declaration of our buttons we need to add this code:

[code lang=”csharp”]fbButton.Clicked += async (sender, args) =>
{
var user = await SocialLogin.AuthenticateFacebook();
welcomeLabel.Text = string.Format("Welcome {0}!", user.UserId);
};

googleButton.Clicked += async (sender, args) =>
{
var user = await SocialLogin.AuthenticateGoogle();
welcomeLabel.Text = string.Format("Welcome {0}!", user.UserId);
};

twitterButton.Clicked += async (sender, args) =>
{
var user = await SocialLogin.AuthenticateTwitter();
welcomeLabel.Text = string.Format("Welcome {0}!", user.UserId);
};[/code]

So now when the user clicks on each button he/she will be directed to login at the chosen social provider and after the login is successful a message will be show at the screen:

Awesome, so our app does work, that’s great but… You probably would like to get more information from the user, right? Like his name, birthday, email, etc.

We’ll discuss that in the next article. Check it here!

Final project on GitHub




No Comments


You can leave the first : )



Leave a Reply

Your email address will not be published. Required fields are marked *