Adding Facebook Authentication using ServiceStack

I am building a Classifieds site and will be sharing income reports and stats once launched  (click here to sign up to my mailing list)

In this post, I will be sharing how I added Facebook authentication to my website using ServiceStack. One users are logged in, they are able to post classified ads.

loginFaceBook

How to add Facebook authentication using ServiceStack

Facebook offers OAuth integration for developers to allow users to log in to external applications using their Facebook account. ServiceStack has a done the hard work for us already for Facebook auth integration (others include Twitter, Google) & all we have to do is plug it into our app. These are the steps:

Steps:

Registering with Facebook

  1. You will need to register with Facebook as a developer
    – go to https://developers.facebook.com & click on register
  2. Click on Add a new App & in my case I will add a new WebsitefaceBookAddANewApp.png
  3. Since my Site is not launched yet, I elect the [create new AppId] & choose a unique name for it.
  4. Take note of the AppId and AppSecret,which we will need for our configuration Files
    & (importantly) you will also need to add your Website URL by clicking on [Add Platform]. (Otherwise you receive an ugly error)
    faceBookAppIds.png

Configuring Facebook Authentication in our ServiceStack app

  1. We will need to add the AuthFeature plugin. This allows multiple auth providers (Twitters). We will add FacebookAuthProvider to this list.
  2. You can provide the AppId, AppSecret (as provided by Facebook) in code (as per below) or via Web.Config
  3. Redirect, Callback Urls need to be set. These are used by ServiceStack’s OAuth & include a callback URL as a query string to the Facebook.
  4. Set permissions. By default you will have access to the user’s public profile, list of friends & email. You can set additional permissions (note these have to be approved first by Facebook) using Permissions. [For a full list of Facebook permissions go to https://developers.facebook.com/docs/facebook-login/permissions]

In our website, we will create a login button, which is shown when the user is not authenticated. If authenticated, we will show the user’s default profile.

Login Button shown if not authenticated

Screen Shot 2016-01-14 at 6.57.55 AM

Profile Image & Logout shown if authenticated

Screen Shot 2016-01-14 at 6.57.18 AM

 

 

Finally, lets require [Authenticate]ion for specific user actions

In my Classifieds website, I only want to allow authenticated users to post Classified ads. This is easily done with ServiceStack. I can just decorate the necessary method or Dto with [Authenticate].

Digging into some data: behind the scenes of AuthFeature,

AuthFeature uses IUserAuthRepository to store user authentication details. We can use the standard OrmLiteAuthUserRepository class (as in the above code). This will create the tables as per below [I am using PostreSQL as the backend. Again this works seamlessly with ServiceStack’s ORMLite].

OrmAuthTables

ormAuthTables.png