Pages

Thursday, August 10, 2017

Don't use "data" prefix in AngularJS

I lost a couple of hours over this. When creating a directive or attribute name in AngularJS that will be "kebab-cased," do not prefix it with data, such dataFn or dataFromApi. It becomes data-fn or data-from-api and won't work because data- is reserved by javascript for values.

Note: I'm taking a hard line, here. Such a name might work in some cases--but definitely doesn't when trying to invoke an expression passed to an isolate-scope directive.

This will work.

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
</head>
<body ng-app="app">
  <div ng-controller="MyController as vm">
    <button ng-click="vm.alert()">From Body</button>
    <my-directive fn="vm.alert()"></my-directive>
  </div>
</body>
</html>

<script>
  angular.module('app',['MyModule']);

  angular.module('MyModule', [])
    .controller('MyController', MyController)
    .directive('myDirective', myDirective);

  function MyController(){
    var vm = this;
    vm.alert = function(){alert('alert');}
  }

  function myDirective() {
    var directive = {      
      scope: {
        fn: '&'
      },
      template: "<button ng-click='fn()'>From Directive</button>"
    }
    return directive;
  }
</script>

This won't work, because data- is reserved by javascript.

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
</head>
<body ng-app="app">
  <div ng-controller="MyController as vm">
    <button ng-click="vm.alert()">From Body</button>
    <!-- data-fn WILL NOT WORK -->
    <my-directive data-fn="vm.alert()"></my-directive>
  </div>
</body>
</html>

<script>
  angular.module('app',['MyModule']);

  angular.module('MyModule', [])
    .controller('MyController', MyController)
    .directive('myDirective', myDirective);

  function MyController(){
    var vm = this;
    vm.alert = function(){alert('alert');}
  }

  function myDirective() {
    var directive = {      
      scope: {
        dataFn: '&'
      },
      template: "<button ng-click='dataFn()'>From Directive</button>"
    }
    return directive;
  }
</script>

This works, using the non-reserved my- prefix.

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
</head>
<body ng-app="app">
  <div ng-controller="MyController as vm">
    <button ng-click="vm.alert()">From Body</button>
    <!-- my-fn WORKS -->
    <my-directive my-fn="vm.alert()"></my-directive>
  </div>
</body>
</html>

<script>
  angular.module('app',['MyModule']);

  angular.module('MyModule', [])
    .controller('MyController', MyController)
    .directive('myDirective', myDirective);

  function MyController(){
    var vm = this;
    vm.alert = function(){alert('alert');}
  }

  function myDirective() {
    var directive = {      
      scope: {
        myFn: '&'
      },
      template: "<button ng-click='myFn()'>From Directive</button>"
    }
    return directive;
  }
</script>

Wednesday, July 12, 2017

AngularJS service with var declarations instead of this. assignments

So I spent a couple of hours trying to figure out why a generally very good Angular sample I thought I'd implemented correctly wouldn't work. Specifically, the service had this code:

sulhome.kanbanBoardApp.service('boardService', function ($http, $q, $rootScope) {

    var getColumns = function () {
        return $http.get("/api/BoardWebApi").then(function (response) {
            return response.data;
        }, function (error) {
            return $q.reject(error.data.Message);
        });
    };

which was called this way in the controller.

sulhome.kanbanBoardApp.controller('boardCtrl', function ($scope, boardService) {
    boardService.getColumns();

The problem is, this doesn't work. The proper way to set a function in a service should look like this:

sulhome.kanbanBoardApp.service('boardService', function ($http, $q, $rootScope) {

    this.getColumns = function () {
        return $http.get("/api/BoardWebApi").then(function (response) {
            return response.data;
        }, function (error) {
            return $q.reject(error.data.Message);
        });
    };

See the difference? this.getColumns, not var getColumns.

So, how was this other guy's code working? It was--I downloaded and ran his sample.

A service is a function with nested functions. He returned the functions in the parent function, like so:

sulhome.kanbanBoardApp.service('boardService', function ($http, $q, $rootScope) {

    var getColumns = function () {
        return $http.get("/api/BoardWebApi").then(function (response) {
            return response.data;
        }, function (error) {
            return $q.reject(error.data.Message);
        });
    };

    return {
            getColumns: getColumns
        };

So far, I haven't seen any other samples do it this way. It works, but...why the extra code step?

Sunday, June 25, 2017

Factory Resetting Android Without Losing Your Life (Metaphorically)

6505777355_dd6d1128fc_z

(photo: Antony Hell)

Sometimes you have to call it quits and admit your phone just isn't working right, and no number of help group suggestions is going to fix it. But, maybe, a factory reset will. Maybe you should just start over.

And yet, you don't really want to start over. You want your email, and your pictures. You want your apps, even if you have to reinstall them. You definitely do not want to wipe your phone only to discover you deleted something super-critical.

This guide can't guarantee you won't lose something important. There are too many different apps, settings, and places to hide. But it should give you a better chance, maybe make you think of something you hadn't before.

These instructions are for a Windows user. Sorry, Mac people. Also, my phone is a Nexus 5 running Android 7 (Nougat). Your settings and dialogs may have different labels.

Basically

  1. Get your account passwords ready
  2. Clean up your installed app lists
  3. Backup all your data
  4. Factory Reset
  5. Setup
  6. Test

Preparation

Set aside plenty of time for this. Make it easy on yourself by having:

  • Your phone's power adapter and cable.
  • A USB cable to attach to your computer.
  • WiFi access, otherwise the data usage will eat you up.
  • Fully charged your phone.

WiFi and Cell Service

You shouldn't have to do anything to restore your cell service after the factory reset, That information is tied to your SIM card, or otherwise stored in a non-volatile way. But, I can't guarantee you won't need to enter some kind of information required by your carrier.

If you have WiFi, you'll need your WiFi password, and you'll need to know your wireless network name.

Apps

Cleanup

By default, Google remembers every application you ever installed from the Play store, even if you uninstall it. After factory resetting, and entering your Google account, there's an option to restore all your installed apps. You may want to do that, or you may want to reinstall from scratch. I like doing the latter, because

  1. I only install what I really need, and
  2. I don't know if a previously installed app is causing my problems.

So, I want my application history to only show what's actually on my phone. Thankfully, the latest versions of the Play store make this easier that before. To clean up your apps:

  1. Open the Play Store app.
    Screenshot_20170625-134256
  2. Switch to the Library tab. This is all the applications you've installed in the past, but are not currently installed.

    Screenshot_20170625-134305
  3. Tap the X to delete applications that you don't plan on installing again. Be ruthless here. If you can delete them all, do it, because after the factory reset this tab should suddenly contain the applications you currently have installed. The goal is not to get confused when you manually reinstall apps.

Important

You cannot do this cleanup from the Google Play web site. You can only do it from your phone. So do it before you reset your phone.

Review

Now open the Installed tab.

Screenshot_20170625-134923

This is a good time to review your applications and ask a few questions:

  1. Do I know this app's user/password?
  2. Does this app store data that I want to keep on my phone?
  3. Does the app have settings that I don't want to forget about, that were a pain to get working?

Other Apps

Did you install any apps from sources other than the Play Store? One likely culprit: Amazon, specifically their Amazon Underground and Music apps.

Passwords

Do you have applications that require a password, but you never have to enter one? Make sure you create a document with those passwords and usernames. Double check what's in your document by logging off from the app and reentering the app's username and password from the document. If you have a password manager, make sure you know and test the master password. Here are some apps might be auto-logging you in.

  • Your Google account. You probably never enter your Google password on your phone.
  • Other accounts. Look in Settings > Accounts
  • Microsoft Office apps (Word, Excel, etc)
  • Facebook, Twitter, Snapchat...all social media
  • Amazon Kindle and shopping
  • Netflix, Hulu, etc.
  • Your banking app

The good news is, you can almost always recover your password by going to the application's web site.

Phone Backup

There are backup programs you can use to backup your entire phone, and then restore it later. Unfortunately, I can't recommend anything because never use those. Sorry. But here's a recent web article about backup apps.

10 best Android backup apps and other ways to backup Android!

The advantage to a full backup app is, if something goes wrong, you should be able to put your phone back the way it was. But don't rely on that. Take other steps, below, to protect your data.

App Data

Your phone's apps aren't your life. Your primary goal is to be able to recreate your data.

Your data is your life.

First, here's a quick tutorial on connecting your phone to your computer and seeing its files. Most of you know how to do this, but it's worth documenting here.

  1. Plug your phone into your computer using a USB cable.
  2. Your phone should be recognized. You might be prompted how to use the files. Choose "Transfer files" Don't choose to just transfer photos (PTP or MTP). We want access to as many files as possible.
  3. You may need to enable data transfer from your phone. Swipe down and open "USB charging - Tap for more options", then choose Transfer Files
    Screenshot_20170625-141309        Screenshot_20170625-141325
  4. On your PC, open the File Explorer, expand This PC, and find your phone's name.
    2017-06-25_141403
  5. Select that folder, open Internal shared storage, and all you'll have access to your phone's files (most of them).
    2017-06-25_141839

You can recreate your data in these ways:

  1. Keeping it stored in the cloud. That's the way it works for Google, Facebook and Twitter. In general, if you can access your account and data from both the web and your phone, the data's in the cloud. These are easy.
  2. Exporting it in a file from the phone to your computer, and Importing that file later. Also called Backup and Restore.
  3. Copying it from the phone's application or document folders to your computer, then copying it back later.
  4. Recreating it by hand. You're trying to avoid this.

Cloud

Many applications store your data in places that are hard to get to. Often they store the data in the cloud, which is great because all you have to do is log in and it'll be there.

Backup/Restore or Export/Import

Others store the data on your phone. For example, I have a nice time tracking application, Timesheet - Time Tracker, that stores backups on the phone. It has a paid cloud sync feature, but I don't use it. Checking the settings, I see that I can also backup and restore files from my Google Drive, so I do that, verify the backup file is there, and test restoring the backup.

Backups are nice. But it's the restore that counts. Test your backups and exports.

If you're prompted where to export to, I recommend two places: your Google Drive in a folder named Phone, and/or your phone's Documents folder. In either case, remember to name the file so you'll know what it's for later, or put it in a well-named folder.

If you export to your phone, you'll see later how to copy those files to your computer.

Copying

A thankfully-very-few applications store their data but don't provide a way to export it. That's a hard problem. If you're not very phone/tech savvy, you're probably stuck recreating it by hand. If you do know your way around your phone's file system innards, then try a couple of things:

  1. Try to find the data in the Android folder, either in the data or media folder. Unfortunately, the data files are sometimes. Windows Search sometimes works, if you look for known file names.
  2. Advanced users can install and use an Android file explorer to try to access hidden files, then copy those files to a standard phone folder such as Documents.

Personal Data

A lot of your application data is personal data, but there's a big chunk of stuff that might be on your phone and nowhere else. That chunk is likely to be:

  • Pictures
  • Downloads, such as PDFs or videos
  • Anything you copied or moved to your phone from your computer

Copying this data is pretty easy.

  1. Connect your phone to your computer and open its files (see above).
  2. Create a folder on your Desktop or Documents called Phone and open it.
  3. Copy everything from your phone to that folder.

DO THIS!

This may take a while. In my case, it was only about two minutes. But if it takes longer, that's OK. You'll have captured everything that you possibly can. Do this after you've exported app data as shown above.

Looking at the folders, you might wonder where your camera pictures are. They're in the DCIM folder.

Breathe and Continue

At this point, you should have captured any data that will be lost from your phone. Now, stop. Walk away for five minutes. Come back. And review. Really, do this, because you'll probably think of something you missed. That five minute break may save you hours later.

Factory Reset

This is pretty easy.

  1. On your phone, open Settings > Backup & reset > Factory data reset
  2. You'll get a nice warning about losing data, and which accounts you're signed in to. Do you have usernames and passwords to these?
    Screenshot_20170625-144559    Screenshot_20170625-144605
  3. When you're ready, choose Reset Phone.

Android will wipe your phone and reinstall the current factory version of the operating system.

Factory reset does not mean "like it was when I bought the phone." You'll get the latest version of the Android operating system and updates that you had installed.

Setup

After the reset, you'll go through the initial setup. This will include:

  1. Reconnecting to your cell carrier, which should happen automatically.
  2. Connecting to your WiFi, if you're using it.
  3. Entering your Google account information. Be careful here. You'll be prompted to reinstall all your apps. Think carefully whether you want to do this or install them manually.

After your account is set up, you'll go through the tedious process of reinstalling your applications from the Play Store. But I think you'll find that you can prioritize to just the apps you need to survive and be productive (especially if you use your phone for work).

The biggest hassle is, frankly, all the little settings you didn't know you had, getting your phone working just the way you like it.

Don't Rush

Are you doing a factory reset because of phone trouble? If so, don't rush to reinstall your apps. After the initial setup, before reinstalling anything, check if the problem has gone away? If so, great!

Now install the apps one at a time, and check for that problem after each installation. This might take hours, or days, but you might find an offending application and save yourself lots of headaches later.

You might just save your mind.

Monday, May 8, 2017

IdentityServer3 with PKCE Part 4 - Persisting User Data

This series simulates a native application accessing a protected Web API resource, using OAuth2 via IdentityServer3. It demonstrates using Proof Key for Code Exchange (PKCE), and is in four parts:

  1. Build a simple authorization server, consumed by native application.
  2. Build a protected resource.
  3. Persist server configuration to database.
  4. Persist user data to database using Microsoft.Identity and SQL Server.

Important
This series does not create an OpenID Connect (OIDC) server. It is OAuth-only, since the PKCE specification doesn't require OIDC.

Where We're At

We're persisting IdentityServer configuration data, but still using in-memory users. IdentityServer can be extended to validate against an identity store, and supports Microsoft's AspNet.Identity via Entity Framework on SQL Server.

Important IdentityServer is not intended or used to add, edit or delete users. They make that clear. The server's job is only to verify identity. In this sample, there's a klunky method for populating the user database, and there are no API methods for registering a user. The API could be added using controller code similar to what's in the default ASP.NET Web API templates.

AspNetIdentity

References
IdentityServer3.AspNetIdentity Sample
Identity Server 3 using ASP.NET Identity
OAuth2 Walkthrough using Identity Server and ASP.NET

Install these packages.

Install-Package IdentityServer3.AspNetIdentity -Project AuthAndApi
Install-Package Microsoft.AspNet.Identity.EntityFramework -Version 2.2.1 -Project AuthAndApi

Add a new connection string to web.config, for the AspNet Identity database.

    <add name="IdUsersDb" connectionString="Server=(localDb)\MSSQLLocalDb;AttachDbFilename=|DataDirectory|IdUsers.mdb;Database=IdUsers-ncacpkce;Integrated Security=true;" providerName="System.Data.SqlClient" />

Update Factory.cs

//Add these usings
using Microsoft.AspNet.Identity.EntityFramework;
using Microsoft.AspNet.Identity;
using IdentityServer3.AspNetIdentity;
using IdentityServer3.Core.Services;
using IdentityServer3.Core.Services.InMemory;

Change the Configure method, adding code to persist the users, and a new method to populate the database.

        public static IdentityServerServiceFactory Configure(string optionsConnectionString, string usersConnectionString)
        {
            //Configure persisting IdentityServer operational services
            //The database will be created if needed. The default schema is being used.
            var efConfig = new EntityFrameworkServiceOptions
            {
                ConnectionString = optionsConnectionString
            };

            // these two calls just pre-populate the test DB from the in-memory config.
            // clf note: there's probably a better way to do this for a production app.
            ConfigureClients(Clients.Get(), efConfig);
            ConfigureScopes(Scopes.Get(), efConfig);

            var factory = new IdentityServerServiceFactory();
            factory.RegisterConfigurationServices(efConfig);
            factory.RegisterOperationalServices(efConfig);
            factory.ConfigureClientStoreCache();
            factory.ConfigureScopeStoreCache();
            //persist users
            //populate the database. This creates the database, if needed.
            ConfigureUsers(Users.Get(), usersConnectionString);
            //configure IdentityServer to use the database
            factory.UserService = new Registration<IUserService>(UserServiceFactory.Create(usersConnectionString));

            //configure cleanup for expired data
            var cleanup = new TokenCleanup(efConfig); //by default every 60 seconds

            return factory;
        }

        public static void ConfigureUsers(IEnumerable<InMemoryUser> users, string connectionString)
        {
            //create the Identity UserManager
            var context = new IdentityDbContext(connectionString);
            var userStore = new UserStore<IdentityUser>(context);
            var userManager = new UserManager<IdentityUser>(userStore);
            foreach (var user in users)
            {
                //no error checking!
                //only add if doesn't exist
                var test = userManager.FindByName(user.Username);
                if (test != null) { continue; }
                userManager.Create(new IdentityUser(user.Username), user.Password);
                test = userManager.FindByName(user.Username);
                foreach (var claim in user.Claims)
                {
                    if (claim.Type.ToLower() == "email") { test.Email = claim.Value; }
                    userManager.AddClaim(test.Id, claim);
                }
                userManager.Update(test);
            }
        }

And finally, add a new factory class, which is used in the line factory.UserServce =.

   public static class UserServiceFactory
    {
        public static AspNetIdentityUserService<IdentityUser, string> Create(string connectionString)
        {
            var context = new IdentityDbContext(connectionString);
            var userStore = new UserStore<IdentityUser>(context);
            var userManager = new UserManager<IdentityUser>(userStore);
            return new AspNetIdentityUserService<IdentityUser, string>(userManager);
        }
    }

That's it! The Startup class doesn't change. Running the solution creates the new database, and the authentication works as before.

2017-05-06_165055

Wrap Up

In this series, I demonstrated authorizing a mobile application in a secure way. This was necessarily a simple sample. Some natural next steps and questions to answer would be:

  1. How to customize the IdentityServer login and authorization screens
  2. Configure for OpenID Connect3
  3. Show using Google authentication

IdentityServer3 with PKCE Part 3 - Persist IdentityServer Configuration

This series simulates a native application accessing a protected Web API resource, using OAuth2 via IdentityServer3. It demonstrates using Proof Key for Code Exchange (PKCE), and is in four parts:

  1. Build a simple authorization server, consumed by native application.
  2. Build a protected resource.
  3. Persist server configuration to database.
  4. Persist user data to database using Microsoft.Identity and SQL Server.

Important
This series does not create an OpenID Connect (OIDC) server. It is OAuth-only, since the PKCE specification doesn't require OIDC.

Where We're At

Until now, we've been using in-memory configuration data (clients and scopes). But we'd like a way to persist the configuration to a database.

IdentityServer and Entity Framework

References

Entity Framework support for Clients, Scopes, and Operational Data
Operational Data
Clients and Scopes
Caching results for client, scope, and user stores

Add these packages.

Install-Package IdentityServer3.EntityFramework -Project AuthAndApi

Add the App_Data folder. This is required if you want to use the connection string below.

Add a connection string for the configuration database. The sample uses SQL localDb 2016.

<connectionStrings>
    <add name="IdConfigDb" 
         connectionString="Server=(localDb)\MSSQLLocalDb;AttachDbFilename=|DataDirectory|IdConfig.mdb;Database=IdConfig;Integrated Security=true;" 
         providerName="System.Data.SqlClient" />
  </connectionStrings>

Add an IdentityServerConfiguration folder, and a Factory.cs class. The factory class takes care of setting the configuration database source, and also initially populating the database using our in-memory client and scope collections.

Note
This sample doesn't provide a way to edit configuration data. There is a NuGet package that adds web-based configuration administration to a project. I haven't tried it, but here's the link. IdentityServer3.Admin

Factory.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
//Added
using IdentityServer3.Core.Configuration;
using IdentityServer3.EntityFramework;
using IdentityServer3.Core.Models;
using AuthAndApi.IdOptions;
using AuthAndApi.IdUsers;

namespace AuthAndApi.IdentityServerConfiguration
{
    public class Factory
    {
        public static IdentityServerServiceFactory Configure(string optionsConnectionString)
        {
            //Configure persisting IdentityServer operational services
            //The database will be created if needed. The default schema is being used.
            var efConfig = new EntityFrameworkServiceOptions
            {
                ConnectionString = optionsConnectionString
            };

            // these two calls just pre-populate the test DB from the in-memory config.
            // clf note: there's probably a better way to do this for a production app.
            ConfigureClients(Clients.Get(), efConfig);
            ConfigureScopes(Scopes.Get(), efConfig);

            var factory = new IdentityServerServiceFactory();
            factory.RegisterConfigurationServices(efConfig);
            factory.RegisterOperationalServices(efConfig);
            factory.ConfigureClientStoreCache();
            factory.ConfigureScopeStoreCache();
            //Still using in-memory users for now
            factory.UseInMemoryUsers(Users.Get());

            return factory;
        }

        public static void ConfigureClients(IEnumerable<Client> clients, EntityFrameworkServiceOptions options)
        {
            using (var db = new ClientConfigurationDbContext(options.ConnectionString, options.Schema))
            {
                if (!db.Clients.Any())
                {
                    foreach (var c in clients)
                    {
                        var e = c.ToEntity();
                        db.Clients.Add(e);
                    }
                    db.SaveChanges();
                }
            }
        }

        public static void ConfigureScopes(IEnumerable<Scope> scopes, EntityFrameworkServiceOptions options)
        {
            using (var db = new ScopeConfigurationDbContext(options.ConnectionString, options.Schema))
            {
                if (!db.Scopes.Any())
                {
                    foreach (var s in scopes)
                    {
                        var e = s.ToEntity();
                        db.Scopes.Add(e);
                    }
                    db.SaveChanges();
                }
            }
        }
    }
}

Update Startup.cs, replacing the previous IdentityServer configuration that explicitly configured the Factory with in-memory data, with the new call to Factory.Configure.

            //Configure IdentityServer for issuing authentication tokens
            var options = new IdentityServerOptions
            {
                Factory = Factory.Configure("IdConfigDb"),
                //SSL MUST be used in production
#if DEBUG
                RequireSsl = false
#endif
            };
            app.UseIdentityServer(options);

ASIDE!

Running the app at this point, I got an error in Startup.cs that I was missing a dependency.

 

2017-05-06_134432

When I installed the package IdentityServer3.EntityFramework, Newtonsoft.Json version 8 was uninstalled, because the package requires version 9 or greater. The package installer output confirms this.

Successfully uninstalled 'Newtonsoft.Json.8.0.3' from AuthAndApi
Successfully installed 'Newtonsoft.Json 9.0.1' to AuthAndApi

No package requires version 8 or lower, so what gives? For some reason, the solution's web.config assembly binding section wasn't updated properly. It still had this:

     <dependentAssembly>
       <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" culture="neutral" />
       <bindingRedirect oldVersion="0.0.0.0-8.0.0.0" newVersion="8.0.0.0" />
     </dependentAssembly>

You could manually change the max version number to 9.0.0.0, reinstall the Newtonsoft package which will do it for you.

Update-Package -Reinstall Newtonsoft.Json -Project AuthAndApi

When I run the application, it behaves exactly as before. Checking in the App_Data folder, I see my database was created.

2017-05-06_140602

One difference, though. After the first time running the app, I no longer was prompted to authorize the scope. This might be related to these factory settings:

factory.ConfigureClientStoreCache();
factory.ConfigureScopeStoreCache();

Wrap Up

Our server's configuration is now being persisted to a database. The only thing (for this sample!) left is to persist the user's credentials and claims.

IdentityServer3 with PKCE Part 2 - Protected Resource Server

This series simulates a native application accessing a protected Web API resource, using OAuth2 via IdentityServer3. It demonstrates using Proof Key for Code Exchange (PKCE), and is in four parts:

  1. Build a simple authorization server, consumed by native application.
  2. Build a protected resource.
  3. Persist server configuration to database.
  4. Persist user data to database using Microsoft.Identity and SQL Server.

Important
This series does not create an OpenID Connect (OIDC) server. It is OAuth-only, since the PKCE specification doesn't require OIDC.

Where We're At

We can get a token, but there's nothing to use it on. We've configured IdentityServer with information about our client application (PretendMobile), and we used that information (Client ID, etc) to get a token.

Now we'll add a Web API with a protected method that just returns some claim data. It will be configured to:

  1. Accept the access token our pretend mobile app gets from the authorization server.
  2. Validate that token against the authorization server.

We'll use the same project as the authorization server, but it's important to know that the Web API could be in a completely separate project.

Web API

References
Simplest OAuth Server
Simplest OAuth2 Walkthrough Code

Install the packages for Web API, and being able to accept the IdentityServer tokens. Note IdentityModel version, which is latest for .Net 4.6 (2.x is for .Net Core).

Install-Package Microsoft.AspNet.WebApi.Client -Version 5.2.3 -Project AuthAndApi
Install-Package Microsoft.AspNet.WebApi.Owin -Version 5.2.3 -Project AuthAndApi
Install-Package IdentityModel -Version 1.9.2 -Project AuthAndApi
Install-Package IdentityServer3.AccessTokenValidation -Version 2.15.0 -Project AuthAndApi

Add two things to the OWIN pipeline: accepting access tokens, and using WebApi.

Updated Startup.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
//Added
using IdentityServer3.Core.Configuration;
using Owin;
using AuthAndApi.IdOptions;
using AuthAndApi.IdUsers;
using System.Web.Http;
using IdentityServer3.AccessTokenValidation;

namespace AuthAndApi
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            //Configure IdentityServer for issuing authentication tokens
            var options = new IdentityServerOptions
            {
                Factory = new IdentityServerServiceFactory()
                .UseInMemoryClients(Clients.Get())
                .UseInMemoryScopes(Scopes.Get())
                .UseInMemoryUsers(Users.Get()),
                //SSL MUST be used in production
#if DEBUG
                RequireSsl = false
#endif
            };
            app.UseIdentityServer(options);

            // Configure Web API to accept access tokens from IdentityServer, and require a scope of 'email'
            app.UseIdentityServerBearerTokenAuthentication(new IdentityServerBearerTokenAuthenticationOptions
            {
                //In this case, the authorization server is also the Web API server
                Authority = "http://localhost:27230",
                ValidationMode = ValidationMode.ValidationEndpoint,
                RequiredScopes = new[] { "email" }
            });

            //Configure Web API
            var config = new HttpConfiguration();
            config.MapHttpAttributeRoutes();
            app.UseWebApi(config);
        }
    }
}

Add a Controllers folder, and a controller named Test.

2017-05-06_1140242017-05-06_1141442017-05-06_114210

Create an API method that requires authorization. The method checks for evidence a user authorized (and not just the application).

Note
Code shamelessly stolen from the IdentityServer samples

TestController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
//Added
using System.Security.Claims;

namespace AuthAndApi.Controllers
{
    [Route("test")]
    [Authorize]
    public class TestController : ApiController
    {
        public IHttpActionResult Get()
        {
            var user = User as ClaimsPrincipal;

            var subjectClaim = user.FindFirst("sub");
            if (subjectClaim != null)
            {
                return Json(new
                {
                    message = "OK user",
                    client = user.FindFirst("client_id").Value,
                    subject = subjectClaim.Value,
                    email = user.FindFirst("email").Value
                });
            }
            else
            {
                return Json(new
                {
                    message = "User claim not found for this client_id",
                    client = user.FindFirst("client_id").Value
                });
            }
        }
    }
}

The API server now has a protected resource. Let's prove it requires authorization. Run the application. The console will still get an access token, but we're not doing anything with it, yet. Leave the project running and manually enter this URL into a browser to try to access the protected resource.

http://localhost:27230/test

The server will return something like this:

<Error>
  <Message>Authorization has been denied for this request.</Message>
</Error>

Pretend Mobile App - Access Protected Resource

In the PretendMobile project, add and call a method that access the protected Web API resource. The token is added to the request in the Authorization header.

        static void Main(string[] args)
        {
            //get token
            var response = GetAccessToken();
            Console.WriteLine("Access Token: " + response.AccessToken);
            //use token
            CallProtectedApiResource(response.AccessToken);
            Console.ReadLine();
        }

        static void CallProtectedApiResource(string access_token)
        {
            var client = new HttpClient();
            client.SetBearerToken(access_token);
            Console.WriteLine(client.GetStringAsync("http://localhost:27230/test").Result);
        }

Run the solution. After authorizing, the application successfully gets the protected resource's data.

2017-05-06_121035

Wrap Up

We now have a fully functioning mobile application! Next up, persisting the IdentityServer configuration.

IdentityServer3 with PKCE Part 1 - Simple OAuth2 Server

This series simulates a native application accessing a protected Web API resource, using OAuth2 via IdentityServer3. It demonstrates using Proof Key for Code Exchange (PKCE), and is in four parts:

  1. Build a simple authorization server, consumed by native application.
  2. Build a protected resource.
  3. Persist server configuration to database.
  4. Persist user data to database using Microsoft.Identity and SQL Server.

Important
This series does not create an OpenID Connect (OIDC) server. It is OAuth-only, since the PKCE specification doesn't require OIDC.

Overview - Why PKCE?

References
A Guide to OAuth 2.0 Grants Proof Key for Code Exchange

Mobile (i.e. "native") applications are difficult when it comes to authorizing users. The reasons are: they are long-lived, and can't keep a secret.

In the descriptions below, "two-step" means calling the authorization endpoint then the token endpoint, "one-step" means calling just the token endpoint, "trusted" means the client can keep a secret key, "short-lived" means only an access token, and "long-lived" means an access+refresh token.

The standard OAuth 2 grants are:

  • Authorization code grant (two-step, trusted, long-lived)
  • Implicit grant (one-step, short-lived, meant for javascript-only browser apps)
  • Resource owner credentials grant (one-step, trusted, long-lived, for passing user/password)
  • Client credentials grant (one-step, trusted, short-lived, meant for app access, not users)
  • Refresh token grant (one-step, requires access token)

None of these fits well for a mobile app, which is untrusted but long-lived. The solution is Proof Key for Code Exchange (PKCE). PKCE generates a temporary secret string and a way to verify that string. It sends the secret to the authorization endpoint, which stores it, then sends the validator to the token endpoint, which verifies the stored secret. This mitigates the threat of another application capturing the authorization code; without the secret/validator, the auth code is useless.

Authorization Server - Simplistic

References
Simplest OAuth Server
Simplest OAuth2 Walkthrough Code

We'll create a simple OAuth2 server using IdentityServer3. We won't even create a Web API, so we can see just the server in operation. In other words, we'll be able to get tokens, but have nothing to use them with.

Create a new Empty web application project named AuthAndApi

2017-05-03_135031

Install packages for the authentication server. This assumes using IIS for the web host.

Install-Package IdentityServer3 -Project AuthAndApi
Install-Package Microsoft.Owin.Host.Systemweb -Version 3.1.0 -Project AuthAndApi

All the IdentityServer documents say RAMFAR should be enabled in web.config.

  <system.webServer>
    <modules runAllManagedModulesForAllRequests="true" />
  </system.webServer>

Add Folders for IdOptions and IdUsers. These represent the database storage we'll configure later.

In IdOptions folder, add these classes.

Scopes.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
//Added
using IdentityServer3.Core.Models;

namespace AuthAndApi.IdOptions
{
    public class Scopes
    {
        public static List<Scope> Get()
        {            
            return new List<Scope>
            {
                //Create the email scope for OAuth. Later, when using OpenID Connect, return StandardScopes.Email instead
                new Scope() { Name = "email", DisplayName = "Email", Claims = new List<ScopeClaim>() { new ScopeClaim("email", true) } }
            };
        }
    }
}

Clients.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
//Added
using IdentityServer3.Core.Models;

namespace AuthAndApi.IdOptions
{
    public class Clients
    {
        public static List<Client> Get()
        {
            return new List<Client>()
            {
                //A client is an application configured to request tokens.
                //The resource, such as Web API, is configured to accept these tokens.
                new Client()
                {
                    ClientName = "Pretend Android Mobile App",
                    ClientId = "a065ae9f-0d02-45fa-85b6-4dc93e2ad5ef",
                    Enabled = true,
                    //About Reference vs JWT tokens
                    //https://leastprivilege.com/2015/11/25/reference-tokens-and-introspection/
                    AccessTokenType = AccessTokenType.Reference,
                    Flow = Flows.AuthorizationCodeWithProofKey,
                    AllowedScopes = new List<string>
                    {
                        "email"
                    },
                    //URIs the authorization code is allowed to be redirected to
                    RedirectUris = new List<string>()
                    {
                        "http://localhost:19191/"
                    },
                    //Shouldn't be required for this flow, but is
                    ClientSecrets = new List<Secret>()
                    {
                        new Secret("e9711973-edd7-496f-b415-b10ad0667305".Sha256())
                    }
                }
            };
        }
    }
}

In IdUsers folder:

Users.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
//Added
using IdentityServer3.Core.Services.InMemory;
using System.Security.Claims;
namespace AuthAndApi.IdUsers
{
    public class Users
    {
        public static List<InMemoryUser> Get()
        {
            return new List<InMemoryUser>
            {
                new InMemoryUser
                {
                    //Subject is identifier? Could be external identity,
                    //so it's not our own database primary key
                    Subject = "1",
                    Username = "alice",
                    Password = "secret",
                    Claims = new List<Claim>()
                    {
                        new Claim("email", "alice@example.com")
                    }
                }
            };
        }
    }
}

Add Startup.cs. This is the class that builds the OWIN pipeline, so the order in which features are added is important.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
//Added
using IdentityServer3.Core.Configuration;
using Owin;
using AuthAndApi.IdOptions;
using AuthAndApi.IdUsers;


namespace AuthAndApi
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            //Configure IdentityServer for issuing authentication tokens
            var options = new IdentityServerOptions
            {
                Factory = new IdentityServerServiceFactory()
                .UseInMemoryClients(Clients.Get())
                .UseInMemoryScopes(Scopes.Get())
                .UseInMemoryUsers(Users.Get()),
                //SSL MUST be used in production
#if DEBUG
                RequireSsl = false
#endif
            };
            //add to the pipeline
            app.UseIdentityServer(options);
        }
    }
}

The basic IdentityServer is configured for OAuth. For now, we don't need a web page to open, since this is a server, so turn off displaying the page in project Properties.

2017-05-06_074519

Note about Reference vs JWT tokens
There are two general types of access tokens IdentityServer can return: Reference, or JSON Web Token (JWT). JWTs are self-contained; they can be validated without contacting the server. But they're slightly more complicated to configure. One advantage of using Reference tokens is that they can be quickly revoked, since the resource must call the authorizing server on each use. The disadvantage is this increases network traffic.

Pretend Mobile App - Get Token

References
Simplest OAuth Server
Simplest OAuth2 Walkthrough Code

Now we're going to get an authorization code and token from the server, using a native application that simulates a mobile app. In the Authorization Code Grant, the authorization code is retrieved by using an agent--normally a web browser. Mobile apps can open browsers on behalf of applications, providing a seamless experience. They can also register special URIs to receive requests. The basic flow is:

Front Channel

  1. App requests code from the server's authorization endpoint, and includes what URI to post the results to.
  2. Browser opens, server presents authentication/authorization screens, then posts code to supplied URI.

Back Channel

  1. App reads the code and sends request to the server's token endpoint.
  2. Server validates, then responds with the access token.

Add a standard console application to the solution, named PretendMobile.

2017-05-06_083908

Add packages. These aren't required (and wouldn't be available for a mobile application). They just include helper classes and methods for the HTTP communication. Anything they do could be done with HttpClient or some other appropriate network library.

Note
Version number is important! Later versions are for .Net Core.

Install-Package IdentityModel -Version 1.9.2 -Project PretendMobile

Program.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
//Added
using System.Diagnostics;
using System.IO;
using System.Net;
using System.Net.Http;
using IdentityModel;
using IdentityModel.Client;

namespace PretendMobile
{
    class Program
    {
        static void Main(string[] args)
        {
            var response = GetAccessToken();
            Console.WriteLine("Access Token: " + response.AccessToken);
            Console.ReadLine();
        }

        static TokenResponse GetAccessToken()
        {
            string clientId = "a065ae9f-0d02-45fa-85b6-4dc93e2ad5ef";
            string clientSecret = "e9711973-edd7-496f-b415-b10ad0667305";
            string scope = "email";
            string redirectUri = "http://localhost:19191/";
            string verifier = CryptoRandom.CreateUniqueId(64);
            string codeChallenge = verifier.ToCodeChallenge();
            string authorizationEndpoint = "http://localhost:27230/connect/authorize";
            string tokenEndpoint = "http://localhost:27230/connect/token";

            //Front channel to get the authorization code
            //This simulates the mobile app starting a browser session on the authorization server,
            //allowing the user to authenticate,
            //while the app waits for the redirect from the auth server that contains the code.
            OpenBrowserToAuthenticate(authorizationEndpoint, clientId, scope, redirectUri, codeChallenge);
            string code = ReceiveAuthCodeFromServer(redirectUri);
            Console.WriteLine("Authorization Code: " + code);

            //Back channel to get the access token
            //The client secret is still required by IdentityServer, even though it's not
            //really secret. The code challenge and verifier are the real secret.
            //The redirectUri is part of the verification process. There's no actual redirection.
            var client = new TokenClient(
                tokenEndpoint,
                clientId,
                clientSecret);
            return client.RequestAuthorizationCodeAsync(code, redirectUri, verifier).Result;
        }

        static void OpenBrowserToAuthenticate(string authorizationEndpoint, string clientId, string scope, string redirectUri, string codeChallenge)
        {
            string nonce = CryptoRandom.CreateUniqueId(64);

            AuthorizeRequest request = new AuthorizeRequest(authorizationEndpoint);
            string url = request.CreateAuthorizeUrl(
                clientId: clientId,
                responseType: "code",
                scope: scope,
                redirectUri: redirectUri,
                nonce: nonce,
                responseMode: OidcConstants.ResponseModes.FormPost,
                codeChallenge: codeChallenge,
                codeChallengeMethod: OidcConstants.CodeChallengeMethods.Sha256);

            Debug.WriteLine(url);
            Process.Start(url);
        }

        static string ReceiveAuthCodeFromServer(string redirectUri)
        {
            var web = new HttpListener();
            web.Prefixes.Add(redirectUri);
            Console.WriteLine("Listening for request from auth server...");
            web.Start();
            var req = web.GetContext().Request;
            Stream body = req.InputStream;
            var encoding = req.ContentEncoding;
            var reader = new StreamReader(body, encoding);
            string code = reader.ReadToEnd().Replace("code=", "");
            Console.WriteLine("Got it, closing.");

            //Not sure how, but the mobile app should end the browser session, maybe when the app
            //gets the response.
            body.Close();
            reader.Close();
            web.Close();
            return code;
        }

    }
}

Let's configure the solution to run both projects. Right-click Solution and choose Properties. Change the Startup Project to "Multiple startup projects," the Actions to "Start," and be sure the identity server project starts first.

2017-05-06_091226

Run the solution.

  1. The server will start.
  2. The console application will open a browser to the /authorize endpoint, requesting an authorization code.
  3. Authenticate using credentials "alice" and "secret".
  4. Authorize the requested scope(s).
  5. The authorization code is sent back to the listening application.
  6. The app sends a direct request to the /token endpoint, requesting an access token.
  7. The server returns the token.

2017-05-06_1044142017-05-06_1045022017-05-06_1046512017-05-06_104726

Wrap Up

We've built a basic OAuth2 server that uses the Authorization Code Grant plus PKCE for dynamically generated client secrets, and can get an access token. In the next part, we'll build a protected resource that requires a token.