OWIN authentication via Social networks

Here you can find an example of code that demonstrates the Token Based Authentication using external providers such as:

  • Facebook;
  • Google;
  • Microsoft.

Demo

Owin Middleware

The Owin Middleware modules are responsible for handling the authentication with external authentication providers (such as Google) and establishing an application session through a cookie. On all subsequent calls the application cookie middleware extracts the contents of the incoming application cookie and sets the claims identity of the current context.

What is a token?

A token is a string value that represents an encrypted list of System.Security.Claims. You can use any claims you like. My application has its own defined list of claims used across the project. Let's call them Application Claims.

Application Claims is a well-defined list of claims encrypted by OWIN into the issued token. Each time a service receives a token, it tries to decrypt it with its IIS machine key back into the list of claims and populate a User.Identity object.

To determine either it is an External Bearer token or a local one it checks the Issuer field of the claims. For a local one it must be always ClaimsIdentity.DefaultIssuer.
Note, that for the encryption OWIN uses the IIS machine key, that's why you must apply some custom solution for using the same token across several WEB-services.

Here is how I build my Application Claims list:

claims list

So, I can always get all this information from any token issued by my WEB-service.

ClaimsMapper is an abstract strategy that knows how to map different data models to my claims list.

Authentication flows

How does an application get a user information from Facebook, Google e.t.c.?

All the information about a user received from an external provider (Facebook, Google e.t.c.) is encrypted in an external cookie.
Here is the description of the communication flow between an application and an external provider:

Not Registered External

Once a user is authenticated an application has three different flows for issuing tokens (detailed view on step 10):

  1. A new user is authorized through an external provider:
    Not Registered External
    After an External Bearer token is issued, the user can register in the application using this token and then re-authorize again, to get a new token (Local Bearer).
  2. An existing user is authorized through an external provider:
    Not Registered External
  3. An existing user is authorized through a login/password:
    Not Registered External

Facebook Configuration

  1. Navigate to the Facebook Developers Page and log in by entering your Facebook credentials;
  2. If you aren’t already registered as a Facebook developer, click Register as a Developer and follow the directions to register;
  3. Under the My Apps tab, click + Add a New App button:
    Facebook new app
  4. Select a Website as an app platform:
    Facebook app type
  5. Enter an App Name and Category, then click Create App.
    This must be unique across Facebook. The App Namespace is the part of the URL that your App will use to access the Facebook application for authentication (for example, https://apps.facebook.com/{App Namespace}). If you don't specify an App Namespace, the App ID will be used for the URL. The App ID is a long system-generated number that you will see in the next step.
  6. On the Basic settings section of the page:
    • Enter Contact Email;
    • Enter Site URL that will send requests to Facebook.
    Facebook settings
    Note that only you will be able to authenticate using the email alias you have registered. Other users and test accounts will not be able to register.
    You can grant test users access to the application under the Roles menu.
    For all other Facebook accounts your application must be approved by Facebook. For futher instructions please view Status & Review menu.
  7. To disable sandbox mode for you app go to the Status & Review menu on the left and select Yes:
    Facebook settings

Google Configuration

  1. Navigate to the Google Developers Console;
  2. Click the Create Project button and enter a project name and ID (you can use the default values). In a few seconds the new project will be created and your browser will display the new projects page;
  3. In the left tab, click APIs & Auth, and then click Consent screen:
    • Enter email address;
    • Enter product name:
    Google Consent screen
  4. In the left tab, click APIs & Auth, and then click APIs:
    • Enable Google+ API to support user’s avatar access:
    Google+ API enabled
  5. In the left tab, click APIs & Auth and then click Credentials.
  6. Click the Create New Client ID under OAuth:
    • In the Create Client ID dialog, keep the default Web application for the application type;
    • Set the Authorized JavaScript origins to the SSL URL of the service, for example: https://supperslonic.com/;
    • Set the Authorized redirect URI to: https://supperslonic.com/signin-google.
    Google Client Id
  7. Copy and paste the AppId and App Secret into the Credentials.resx file for Google.

Microsoft Configuration

  1. Navigate to the Microsoft Developer Account;
  2. Press Create application reference;
  3. In Basic information enter valid Application name service URLs:
    Microsoft Basic Info
  4. In API Settings select that it is a mobile application and enter a valid redirect URL:
    • Note to add the signin-microsoft to your Redirect URLs.
    Microsoft API Settings
  5. In App Settings copy and paste the AppId and App Secret into the Credentials.resx file for Microsoft.