MonkeyBlog – Page 2 – MonkeyBox Technologies L.L.C.

EF5 Code First with Multiple Databases

This turned out to be fairly simple, but it took me a while to figure out what was going on. I have two databases configured for one application. One is an authentication, authorization, and loggging datbase – it makes use of the default security framework with ASP.NET MVC 5 projects. In addition it utilizes NLog for logging. The second database is for application data.

So essentially I have two connection strings:

I have the default IdentityDbContext (included by default as part of the IdentityModels.cs file ) from an “out-of-the-box” MVC 5 application (with individual user accounts). To this, I added a new class “Log”, and included it in the context by simply adding a new DBSet to the properties of the context object.

public class IdentityDbContext : DbContext
    {
        public IdentityDbContext()
            : base("SecurityConnection")
        {
        }

        // cut out a bunch of stuff here for the sake of brevity.

        public DbSet Users { get; set; }
        public DbSet Secrets { get; set; }
        public DbSet UserLogins { get; set; }
        public DbSet Roles { get; set; }
        public DbSet UserRoles { get; set; }
        public DbSet Logs { get; set; }   //New Log Table / Object
    }

public class IdentityDbContext : DbContext

{

public IdentityDbContext()

: base("SecurityConnection")

{

}

// cut out a bunch of stuff here for the sake of brevity.

public DbSet Users { get; set; }

public DbSet Secrets { get; set; }

public DbSet UserLogins { get; set; }

public DbSet Roles { get; set; }

public DbSet UserRoles { get; set; }

public DbSet Logs { get; set; } //New Log Table / Object

}

In addition I added a new DbContext subclass, AppDataContext, with my two initial objects (very early in this project).

    public class AppDataContext : DbContext  
    {
        public AppDataContext() : base("AppDataConnection")
        {
        }

        public DbSet Groups { get; set; }

        public DbSet GroupMemberships { get; set; }

    }

public class AppDataContext : DbContext

{

public AppDataContext() : base("AppDataConnection")

{

}

public DbSet Groups { get; set; }

public DbSet GroupMemberships { get; set; }

}

So my goal here was to simply be able to keep both contexts alive, and use package manager to add-migration(s) and update-database(s) for each connection string. However, out of the box this immediately runs into issues. Once you enable migrations for one, you must rename it before you can enable migrations for the other, because it wants to create the file with the default template, and you already have a configuration.cs file. To the credit of the product, they don’t let you do this without warning. However, that is not the desired result for me. I need to have both alive and well.

So I simply renamed Configuration.cs to IdentityConfiguration.cs, then enabled migrations again specifying the AppData context. And I got my second file. For the sake of consistency I renamed it as well, to AppDataConfiguration.cs. However, this is not sufficient. Because now, when trying to add migrations, the first one adds fine. The second, however, insists that you apply the first before you can continue.

Of course this made sense, since with EF Code First you have to apply a migration before you can add another. So I simply popped into the package manager and ran update-database providing the -configurationTypeName pointing to my IdentityConfiguration.cs file. This worked swimmingly, so I went back to add my migration for the AppDataConfiguration, when I was told that it was necessary to apply a pending migration. Since I’d just applied my only pending migration, this didn’t sit well with me. So I turned to the internet and found a thread on Stack Overflow (a site I highly recommend), which helped me resolve the root issue.

Even though I’d changed the names of both files, and classes, I had kept them both in the same namespace. Apparently, for EF CF Migrations, this is not cool. So I changed the namespaces and class names (to make it easier) from

namespace myapplication.namespace {
     public class IdentityConfiguration{ ... }
}

namespace myapplication.namespace {

public class IdentityConfiguration{ ... }

}

AND

namespace myapplication.namespace {
     public class AppDataConfiguration{ ... }
}

namespace myapplication.namespace {

public class AppDataConfiguration{ ... }

}

To:

namespace myapplication.namespace.Identity {
     public class Configuration{ ... }
}

namespace myapplication.namespace.Identity {

public class Configuration{ ... }

}

AND

namespace myapplication.namespace.AppData {
     public class Configuration{ ... }
}

namespace myapplication.namespace.AppData {

public class Configuration{ ... }

}

Respectively.

This was the trick, it all works fine, and as I’d expected, once you put everything into the distinct namespaces. While it is an annoying issue, at least it’s a very simple work around. By applying this fix you can have many database connections managed by EFCF.

Converting Image Hotlinks to Azure Storage Images

While working on a current project, I found myself with a need to cache media that I was collecting from various websites to my Azure Storage account. Then utilize the storage as somewhat of a Content Delivery Network (CDN) for my images and media.

I found a good article online about how to configure the storage account as a CDN. Which told me very quickly how to set it all up and configure it for my purposes. So the only challenge was to implement the logic to pull the images in there.

The following function pretty much does it all. First there is a field that is included in my model called “MediaUri”. This field is populated on the view with a URL for an image out on the web, say from Wikipedia for example. However this function, will convert that hotlink URL into a cdn.monkeyboxtech.com URL after downloading and caching the image to the CDN storage area.

Note this example relies on the Azure SDK tools being installed.

private void CacheImagesToCloud(ref Game idMatch)
{
  // Initiate cloud connection
  CloudStorageAccount storageAccount = CloudStorageAccount.Parse(
      ConfigurationManager.AppSettings.Get("CdnConnectionString")
  );

  // Get the client ready.
  CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();

  // Retrieve a reference to a container. The container I created is 
  // called imgs for the purposes of this example.
  CloudBlobContainer container = blobClient.GetContainerReference("imgs");
  container.CreateIfNotExists();
  container.SetPermissions(
      new BlobContainerPermissions
      {
          PublicAccess = BlobContainerPublicAccessType.Blob
      });

  foreach(Question q in idMatch.Questions)
  {
      if(!string.IsNullOrEmpty(q.MediaUri) &amp;&amp; 
            (q.MediaSource == MediaSource.DirectFileUrl))
      {
          //Download the image to a stream
          System.Net.WebClient webClient = new System.Net.WebClient();
          byte[] mediaData = webClient.DownloadData(q.MediaUri);

          // get the extension
          string[] urlComponents = q.MediaUri.Split('.');
          string ext = urlComponents[urlComponents.Length - 1];

          // really, just the extensions (and the period)
          if (!ext.StartsWith(".")) { ext = "." + ext; }

          Stream media = new MemoryStream(mediaData);

          //Connect to the cloud and upload
          CloudBlockBlob block = container.GetBlockBlobReference(q.QuestionId + ext);
          block.UploadFromStream(new MemoryStream(mediaData));

          // Finally, update the url to reflect the new path.
          q.MediaUri = ConfigurationManager.AppSettings.Get("CdnRootUrl") 
                       + q.QuestionId + ext;
       }
       // Else I'm not caching it.
   }
}

private void CacheImagesToCloud(ref Game idMatch)

{

// Initiate cloud connection

CloudStorageAccount storageAccount = CloudStorageAccount.Parse(

ConfigurationManager.AppSettings.Get("CdnConnectionString")

);

// Get the client ready.

CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();

// Retrieve a reference to a container. The container I created is

// called imgs for the purposes of this example.

CloudBlobContainer container = blobClient.GetContainerReference("imgs");

container.CreateIfNotExists();

container.SetPermissions(

new BlobContainerPermissions

{

PublicAccess = BlobContainerPublicAccessType.Blob

});

foreach(Question q in idMatch.Questions)

{

if(!string.IsNullOrEmpty(q.MediaUri) &&

(q.MediaSource == MediaSource.DirectFileUrl))

{

//Download the image to a stream

System.Net.WebClient webClient = new System.Net.WebClient();

byte[] mediaData = webClient.DownloadData(q.MediaUri);

// get the extension

string[] urlComponents = q.MediaUri.Split('.');

string ext = urlComponents[urlComponents.Length - 1];

// really, just the extensions (and the period)

if (!ext.StartsWith(".")) { ext = "." + ext; }

Stream media = new MemoryStream(mediaData);

//Connect to the cloud and upload

CloudBlockBlob block = container.GetBlockBlobReference(q.QuestionId + ext);

block.UploadFromStream(new MemoryStream(mediaData));

// Finally, update the url to reflect the new path.

q.MediaUri = ConfigurationManager.AppSettings.Get("CdnRootUrl")

+ q.QuestionId + ext;

}

// Else I'm not caching it.

}

Then, in my web.config file for this application I have an app settings key that helps connect the cloud storage account. Of course you’d replace the <omit> with the actual values.

;AccountKey="/&gt;

1	;AccountKey="/>

That is pretty much all there is to it. By using the Azure SDK tools for .NET, caching an image for later hosting from your storage account couldn’t be much easier.

Standard MVC 5 Web Application Using the Facebook JS SDK

While working on a current project — which is very much Facebook integrated, but not so much Facebook centric — the decision was made to not use the Facebook template, but instead use the standard MVC template, with the Facebook JS SDK. Here are a few things about the application you should understand before we continue:

It is a Facebook game, so if you come in from Facebook, it’s hosted in the Canvas
It is also a stand-alone app, and can be accessed by a standard URL. If you come in this way, It still needs to support login via Facebook, but is not canvased.
I wanted to to use the standard OWIN security for login, but automatically login when coming into the application from the Facebook Canvas.
By clicking a link from a wall post, a friend can play the same game you just played.
I wanted to test with both sandbox and non-sanbox modes.

Setting up the Environment

There are many and more articles on the web about how to setup a Facebook application. I will not bother rehashing it, but suggest you read an article about it, like this one, or search Google for it.

I also, in order to get out of the sandbox for some extra testing, had to get SSL working on my dev box. I use IIS Express and was able to follow this handy guide provided by Scott Hanselman and it was painless and quick.

Now that the application is ready, and my environment is setup, then it’s just a matter of writing the code.

Creating the Landing Page

For the landing page, I started out by simply adding an action to an existing controller.

 public ActionResult Facebook()
 {
    ViewBag.ReturnUrl = "";

    // Did the user request a specific game?
    string redirectId = Request.QueryString["game"];

    // Make sure they go there when they're done.
    if (!string.IsNullOrEmpty(redirectId))
    {
         ViewBag.ReturnUrl = "/Game/Play?game=" + redirectId;
    }

    return View();
  }

public ActionResult Facebook()

{

ViewBag.ReturnUrl = "";

// Did the user request a specific game?

string redirectId = Request.QueryString["game"];

// Make sure they go there when they're done.

if (!string.IsNullOrEmpty(redirectId))

{

ViewBag.ReturnUrl = "/Game/Play?game=" + redirectId;

}

return View();

}

There really is not much going on there, it just preps everything before rendering the view. The view then does all of the work. This landing page is configured as the Canvas Url in the Properties on the Facebook Application Dashboard. Note the “game” being pulled from the QueryString. This is to support the scenario where a user has accepted a challenge and is being brought in to play the exact same game as their friend. Facebook has some outstanding documentation on how to post a challenge to the user’s wall using the Feed Dialog. I just augment the link that I’m sending into the dialog to include the ?game=xxx GET parameters.

The view for this landing page is some very basic HTML wrapping the more important JavaScript so that it can handle everything that Facebook may throw at it.

First, I had to set it up to handle executing an external login using the existing /Account/ExternalLogin action (part of the default Account Controller). So to accomplish this, I simply set up a form with all hidden components. When the time is right it will be submitted via JavaScript.

&lt;div id="fb-root"&gt;&lt;/div&gt;
@using(Html.BeginForm("ExternalLogin", "Account", FormMethod.Post,
       new { id = "MVCLogin" })) 
{ 
   @Html.AntiForgeryToken() 
   @Html.Hidden("Provider", "Facebook") 
   @Html.Hidden("ReturnUrl", (string)ViewBag.ReturnUrl) 
}

@using(Html.BeginForm("ExternalLogin", "Account", FormMethod.Post,

new { id = "MVCLogin" }))

{

@Html.AntiForgeryToken()

@Html.Hidden("Provider", "Facebook")

@Html.Hidden("ReturnUrl", (string)ViewBag.ReturnUrl)

}

Note that I’m passing the ReturnUrl from my controller so once the user is logged in, they proceed to the appropriate action. Also notice the <div id=”fb-root”></div>. This is important for Facebook, but they made their script smart enough to write it in if you leave it out.

Next I added the magic Facebook Script. This too is well documented in the Facebook developer portal. It breaks up into 3 parts. The code offered on the documentation (linked above) covers parts 1 and 3, it’s up to you as the developer to create the middle part.

Part 1 is the call to initialize the Facebook SDK

// Additional JS functions here
window.fbAsyncInit = function () {
    FB.init({
        appId: '@System.Configuration.ConfigurationManager
                 .AppSettings.Get("FacebookAppId")', 
        channelUrl: '@System.Configuration.ConfigurationManager
                 .AppSettings.Get("ChannelUrl")',
        status: true, // check login status
        cookie: true, // enable cookies to allow the server to access the session
        xfbml: true  // parse XFBML
    });

// Additional JS functions here

window.fbAsyncInit = function () {

FB.init({

appId: '@System.Configuration.ConfigurationManager

.AppSettings.Get("FacebookAppId")',

channelUrl: '@System.Configuration.ConfigurationManager

.AppSettings.Get("ChannelUrl")',

status: true, // check login status

cookie: true, // enable cookies to allow the server to access the session

xfbml: true // parse XFBML

});

Part 3 is the bit that actually loads up the SDK itself

// Load the SDK asynchronously
(function (d) {
    var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) { return; }
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    ref.parentNode.insertBefore(js, ref);
}(document));

// Load the SDK asynchronously

(function (d) {

var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];

if (d.getElementById(id)) { return; }

js = d.createElement('script'); js.id = id; js.async = true;

js.src = "//connect.facebook.net/en_US/all.js";

ref.parentNode.insertBefore(js, ref);

}(document));

The middle part however, is where it gets fun. This is where the meat of the Facebook integration comes into play. Part two also, in my case, included an additional method in my controller that takes an HTTP Post and persists the user’s Facebook information to session state. While this article will not make use of it, you will see a call to it in the code below.

// Here we subscribe to the auth.authResponseChange JavaScript event. This event 
// is fired for any authentication related change, such as login, logout or 
// session refresh. This means that whenever someone who was previously logged out
// tries to log in again, the correct case below will be handled. 
FB.Event.subscribe('auth.authResponseChange', function (response) {

     // Here we specify what we do with the response anytime this event occurs. 
     if (response.status === 'connected') {
         // The response object is returned with a status field that lets the 
         // app know the current login status of the person. In this case, we're 
         // handling the situation where they have logged in to the app.
         var uid = response.authResponse.userID;
         var accessToken = response.authResponse.accessToken;

         // Use a bootstrap modal and tell the user we are talking to facebook. 
         $("#dialog").modal({keyboard: false, show: true});

         // Call the authorize page with the user id and access token we got from
         // the authentication flow
         var params = { "uid": uid, "accessToken": accessToken };
         $.ajax({
             url: "/Game/FacebookAuthorize",
             dataType: 'json',
             data: JSON.stringify(params),
             type: 'POST',
             contentType: 'application/json; charset=utf-8',
             traditional: true
          })

// Here we subscribe to the auth.authResponseChange JavaScript event. This event

// is fired for any authentication related change, such as login, logout or

// session refresh. This means that whenever someone who was previously logged out

// tries to log in again, the correct case below will be handled.

FB.Event.subscribe('auth.authResponseChange', function (response) {

// Here we specify what we do with the response anytime this event occurs.

if (response.status === 'connected') {

// The response object is returned with a status field that lets the

// app know the current login status of the person. In this case, we're

// handling the situation where they have logged in to the app.

var uid = response.authResponse.userID;

var accessToken = response.authResponse.accessToken;

// Use a bootstrap modal and tell the user we are talking to facebook.

$("#dialog").modal({keyboard: false, show: true});

// Call the authorize page with the user id and access token we got from

// the authentication flow

var params = { "uid": uid, "accessToken": accessToken };

$.ajax({

url: "/Game/FacebookAuthorize",

dataType: 'json',

data: JSON.stringify(params),

type: 'POST',

contentType: 'application/json; charset=utf-8',

traditional: true

})

First I set up the subscription for the auth.authResponseChange event. When this connects successfully, I get the user’s uid and access token fed back to me. Then I pop up a friendly little bootstrap modal to tell the user I’m connecting them to Facebook, just before authorizing their information back to my server.

At this point, if everything is OK then we simply handle the complete promise for the ajax call in the snippet above. Notice that I am using the ReturnUrl that we stuffed into the ViewBag earlier in this code as well.

// Handle the complete promise
.complete(function () {
     var isServerAuthenticated = @User.Identity.IsAuthenticated.ToString().ToLower();
     if(!isServerAuthenticated){
          // Authenticate
          $("#MVCLogin").submit();
     }
     else
     {
          // Send them on to the return URL, everythin is good here.
          var returnUrl = '@ViewBag.ReturnUrl'

          if(returnUrl != "")
          {
              console.log("Redirecting to " + returnUrl);
              window.location.href = returnUrl;
          }
          else{
              // If there is no return url, then just hide the dialog.
              $("#dialog").modal("hide");
          }
     }

})

// Handle the complete promise

.complete(function () {

var isServerAuthenticated = @User.Identity.IsAuthenticated.ToString().ToLower();

if(!isServerAuthenticated){

// Authenticate

$("#MVCLogin").submit();

}

else

{

// Send them on to the return URL, everythin is good here.

var returnUrl = '@ViewBag.ReturnUrl'

if(returnUrl != "")

{

console.log("Redirecting to " + returnUrl);

window.location.href = returnUrl;

}

else{

// If there is no return url, then just hide the dialog.

$("#dialog").modal("hide");

}

})

Also notice that I’m handling the scenario where the user may have already been signed into my game, but not authorized via Facebook before. I did this by nestling the value of User.Identity.IsAuthenticated as a lower case string into a JavaScript variable. Next I simply check that value, and if they are not authenticated, I submit my form – The one I mentioned in the beginning of the article.

If they are authenticated, then we should be golden. Redirect them if they asked to be, and if not, then simply hide the “Connecting to Facebook” popup.

This code only shows the handling of the “complete” promise, but of course we handle the failure and error promises too. For these I simply hide the dialog (if it’s not already hidden) and post an alert for the user. I do not show this in the code samples, but it’s as simple as it sounds.

Posting the Challenge

I’ve also included my code for posting the challenge to a user’s Facebook wall. Note your application has to be configured to support the correct permissions for this activity. The page that is posting the message also has parts 1 and 2 of the Facebook JS SDK setup. The only other code it requires is a single method call.

 $("#facebookPost").click(function () {
     // This function exists in the layout page.
     facebookPostChallenge();
 });

 function faceBookCallback(response) {
    console.log(response);
 }

 function facebookPostChallenge() {
      var score = "@Model.GameScore";
      var id = "@Model.GameId";
      var title = "@Model.GameTitle";
      var name = "I";

      FB.api('/me', function (response) {
      name = response.first_name;
 });

 // call the API
 var obj = {
         method: 'feed',
         link: 'https:@System.Configuration.ConfigurationManager
                   .AppSettings.Get("FacebookLandingUrl")' + '?game=' + id,
         picture: 'https:@System.Configuration.ConfigurationManager
                   .AppSettings.Get("LargeIconUrl")',
         name: '',
         caption: '',
         actions: [
             { 'name': 'Beat My Score', 
               'link': 'https:@System.Configuration.ConfigurationManager
                        .AppSettings.Get("FacebookLandingUrl")' + 
                        '?game=' + id 
             }
         ],
         description: 'I just scored ' + score + ' on ' + title + ' 
             while playing .  Do you think you can beat me?'
     };

     FB.ui(obj, faceBookCallback);
}

$("#facebookPost").click(function () {

// This function exists in the layout page.

facebookPostChallenge();

});

function faceBookCallback(response) {

console.log(response);

}

function facebookPostChallenge() {

var score = "@Model.GameScore";

var id = "@Model.GameId";

var title = "@Model.GameTitle";

var name = "I";

FB.api('/me', function (response) {

name = response.first_name;

});

// call the API

var obj = {

method: 'feed',

link: 'https:@System.Configuration.ConfigurationManager

.AppSettings.Get("FacebookLandingUrl")' + '?game=' + id,

picture: 'https:@System.Configuration.ConfigurationManager

.AppSettings.Get("LargeIconUrl")',

name: '',

caption: '',

actions: [

{ 'name': 'Beat My Score',

'link': 'https:@System.Configuration.ConfigurationManager

.AppSettings.Get("FacebookLandingUrl")' +

'?game=' + id

}

description: 'I just scored ' + score + ' on ' + title + '

while playing . Do you think you can beat me?'

};

FB.ui(obj, faceBookCallback);

}

Summary

It took a little time and some trial and error to get it all figured out, but integrating a web app with the JavaScript SDK is pretty easy. Facebook already provides you with big chunks of code. Using those — along with some creative utilization of the tools afforded to you by MVC — you should find that working through a non-facebook-template site can still be tacked in pretty effectively.