The built-in Facebook OWIN provider in ASP.NET MVC can open your website to the benefits of logging in via the social networking behemoth. Still, it’s limited when it comes to pulling in profile details such as photo, birthdate, gender, and so forth. I recently implemented retrieval of those profile properties, and will explain how you can do it, too! I feel the obvious benefit is your users don’t need to manually type in their profile details, should you have similar fields in your system.

I’m assuming you’ve created and configured a Facebook app via Facebook’s Dev center, and won’t be going into that process in this article.

Determine Which Profile Fields You Need

Before we write any code, you need to know to which profile details you desire access. Facebook used to be relatively open. Not anymore! Now you need to ask permission for a ton of items, and many are no longer available. Make sure you check permissions at least every 3 months, otherwise you may find your granted permissions are no longer, well, granted, or even accessible.

Here’s a link to everything you can get: https://developers.facebook.com/docs/facebook-login/permissions/

In my case, to access the Profile photo, name information, and some other basic items, I chose:

  • public_profile
  • email
  • user_photos
  • user_about_me

I probably don’t need all these right now, but I may in the future. I figured I’d ask ahead of time.

Once you have your list, continue to the fun coding part…

Enable the Facebook Provider in Startup.Auth.cs

If you haven’t already, you’ll need to enable the Facebook provider via Startup.Auth.cs. Make sure you do this *after* any cookie authentication, so “normal” username/password logins are serviced before Facebook takes over. This should already be the case, as the default ASP.NET MVC template includes the many optional providers afterwards by default.

I suggest keeping the App ID and Secret in your config file – or at least out of code – so you can swap for differing environments as necessary. The code snippet below enables Facebook authentication, and specifies the profile fields for which we’ll be asking read permission:

You don’t have to use what I chose – it’s just what I needed for my particular case. Facebook *does* change allowed permissions and profile item visibility somewhat often. Stay on top of their developer changes – otherwise your site login may unexpectedly break.

// Enable Facebook authentication with permission grant request.
// Otherwise, you just get the user's name.
var options = new FacebookAuthenticationOptions();
options.AppId = ConfigurationManager.AppSettings["Facebook.AppId"];
options.AppSecret = ConfigurationManager.AppSettings["Facebook.AppSecret"];
options.Scope.Add("public_profile");
options.Scope.Add("email");
options.Scope.Add("user_photos");
options.Scope.Add("user_about_me");
app.UseFacebookAuthentication(options);

Install the Facebook NuGet Package

In order to easily get access to the Facebook data, I used the Facebook.NET library. It’s easy enough to install:

Install-Package Facebook

Note: I used version 7.0.6 in this example. You should be able to find the latest version and changelog at https://www.nuget.org/packages/Facebook/7.0.10-beta

Handle the Facebook External Login Callback in AccountController.cs

Once Facebook has been configured, all requests from your website will direct to Facebook, where it will ask permission, and, if granted, will redirect back to the ExternalLoginCallback action in the Account controller. It is here that I suggest you retrieve the data you’ve requested from Facebook. You’ll then modify the associated ExternalLoginConfirmation View with fields to correct or remove any information from Facebook, then continue with the account creation process on your website. That’s the part where you’ll populate the ApplicationUser entity, or whatever you decided to call it.

It’s relatively simple, as shown in the code below. The steps are as follows:

  1. Get the Facebook OAuth token with a simple HttpClient call
  2. Make the request for Profile details using the Facebook.NET library
  3. Optionally, download the Profile photo and save it somewhere

Yes, I could split this out – refactor as you see fit, and feel free to share any optimizations.

Below is the change to ExternalLoginCallback to grab the data from Facebook after the redirect:

ExternalLoginCallback Code

If you’d like to get the profile image, below is an example:

GetProfileImage Code

 

Moving Forward

I hope this article has helped answer your Facebook integration questions. If you would like additional details, please post in the comments, or message me on Twitter: @Auri

Thank you!

I was recently included on a thread with a high school student considering programming as a career. Fellow developers at Eleven Fifty were sharing their insight. I liked my pre-caffeinated contribution. I hope you enjoy as well.

Aaron,
I echo Tiffany’s sentiment. I’d be delighted to be more interactive with you on questions. Funny – I think I went to school with a Rickleff.
Anyway… I *loved* computers growing up. Still, until I was in high school, I didn’t want to be a programmer, which I later learned was really a “software engineer.” I thought they were just unhealthy, unsocial slobs that worked long, grueling hours, with pizza their only food group. Well, that was television and movies, at least. I found programming and problem solving came easily, and I liked making the computer do whatever it was I wanted, if I only spent the time. I didn’t start out with programming as a career – I started with technology, being an analyst and writer at a consumer electronics research firm. It wasn’t until my friend [and employer] challenged me to write a program for the company, and I accomplished it by putting my hobby to good use, that I started thinking programming could be a career. I learned I could make a living with my favorite hobby. That’s fun, and freeing. It’s like not working, even when it feels like work.
So what will your career look like? Software engineering makes you somewhat of a white collar worker – the pay is higher, and you’re always working with intelligent people – not that you’ll always admit that. It’s more of a “white collar t-shirt” job, because you’re required to be both a thinker and a creator at once, which can be messy. Ask yourself if you like to make things better, and if you think about how to actually do it. Even if you don’t have the skill yet – that will grow over time, and you’ll have to fail… a lot – that two-punch thinking combination is what will get things done, and make you enjoy your job. Did I mention failing? It happens all the time. You’re always building things that don’t exist, based on ideas written in a few sentences by people who don’t know how to do what you’ll be able to do. Like the beautiful buildings you see when walking, to paintings at shows, to jokes you hear for the first time – all those are the final result after all the failures to make them reality before. Building designs start with an idea out of thin air, go through a billion revisions, and finally get built. Jokes usually start from trying variations that don’t get a blink, to the final one that makes an audience laugh. But the comic started the line of thought, from thin air, from inspiration, and from thinking about how people think. The same goes with programming.
The lesson: Fail quickly, then move on to the next approach.
That being said, I’ve found the best parts of programming are the community, and what it leads to.
First, Community. Software engineering is like medicine. You’re not going to know all the practices. You’ll be good at one, or a few, but can never be good at all. Yet, you’ll meet brilliant people that can fill in the gaps in your knowledge, and you feel even better when you do the same. As engineers, we inspire other engineers. Look at Steve Wozniak, Steve Jobs, Nicholai Tesla, Sergei Brin, Larry Page – all their bios mention influencers. Nobody did it on their own. They all had help.
Second, What it Leads To. Coming up with ideas all the time has its side effects. The most prevalent? A constant stream of ideas on how to make those cool computers, whether they have a keyboard or not – phones for example – do more stuff. You’ll have ideas. Lots of them. And you have the power to make your ideas real. You’ll fail in bringing them to reality, often. Like medicine, or any career really, you’ll get better over time, tuning your craft. You’ll release your ideas, maybe as apps, maybe as web sites, maybe just making your own projects millions of people use – like Apple, Google, Microsoft, and countless others you think of having the best and brightest. Those companies are full of people who aspired, as you do, to become software engineers at some point in their lives. Those companies were also started by software and hardware engineers. Heck, Apple practically invented the personal computer, and the software engineer that wanted to program it.
Gosh, that’s a lot, and I need another refill of coffee. I hope to discuss further, if you’d like.
Thanks and Best,
-Auri
Appending what a fellow developer and instructor answered to the same student:
What your career looks like in 5 or 10 years is a very personal choice.  If you are a guy looking for a desk job with great benefits in a big company, that’s going to look very different than if you have an entrepreneurial spark that leads you to develop your own products or freelance.  I can tell you that you need to talk to all types of software professionals to get this knowledge and find out what excites you most.  The best way to do so is to attend networking events.  Verge is a fun one for entrepreneurs.  I believe Auri can refer you to a few great .NET networking groups.
After 5 years of MY career, I found myself climbing a technical corporate ladder inside of Motorola and being very content with that.  But after 10 years (still at the same company), I grew restless and started my own freelance firm on the side while also transitioning from test to architecture within the big company.  And after 15 years, I found myself appreciating the big picture of software (sales / pm / business dev) more than I did the nitty gritty code and new technologies.
As far as highs and lows in a coding career… that’s a bit more finite.  There’s a huge high when you can point at something and say, “I did that! And it’s AWESOME!”  And an ever bigger high when your peers and mentors do the same.  And for every coder, there’s a dark dark low when you run into a problem that you just CAN’T figure out.  You feel alone, you feel stupid, and you feel like a failure.  As a coder, you’re going to need to expect those situations, not fear them, just grow and learn from them.
Hope this helps.  Feel free to find me & Auri at Eleven Fifty and chat about this stuff during the time you’re here.
Thanks,
Tiffany Trusty

If you want to see next year’s consumer electronics trends, go the current year’s CEATEC. The largest CE show in Japan, held in Makuhari for at least the past 7 years, plays host to products and their components from all over the Asia Pacific area, where most of the CE industry innovation resides.

In a nutshell, based on what was observed at this show, I can practically put money on the items below being the CE Trends for 18 months. You can see many of these reflected in the winners of the CEATEC Innovation Awards, a panel on which I’m a judge.

  • 4K Television Sets + 8K, 3D is dead again and hey, why not buy a 4K set?
  • AR Headsets, likely trending towards VR – I’m thinking AR leads to head-mounted Android Wear, and, heaven forbid, iGlasses
  • Better device user experiences, totally non-techie

Over the next 3 years, probably the following:

  • “Simple” Robots transforming healthcare and family interaction
  • Family, home, and building monitoring solutions, healthcare
  • 5G wireless

The Under-appreciated Heroes of our Industry

I feel it’s harder to innovate full products these days. Many CE technologies we see in the pipeline are simply better, smaller, faster, higher resolution, more efficient versions of what’s come before. The real shining star of this industry is the component manufacturers and what they’ve been capable of. The second rarely told story is the countless research hours creating amazing solutions most American consumers will never hear of.

I was recently having trouble telling Jira to connect to a named SQL Server instance. Using Jira’s configuration manager, I should be able to use the SERVERNAME\INSTANCENAME syntax like every other modern application. Well, not with Jira. I found the solution and here ya go:

In the database field in the configuration manager, which you can launch from bin\config.bat in the Atlassian Jira Program Files folder, type

SERVERNAME;instance=INSTANCENAME

Oh, did Atlassian forget to tell you to install Java Runtime Edition on your server? Of course they did… Go ahead and install it if you haven’t, but make sure you pay very close attention and don’t click I Agree to install Yahoo and junkware on your machine. Because, well, Oracle.

This information was lovingly sourced from the comments on: https://confluence.atlassian.com/jira/connecting-to-named-instances-in-sql-server-173435.html

Enjoy!

I recently ran into a need to use the LAME MP3 encoder in a customer’s website. Problem was, once I deployed to Azure, I received an error of “Unable to load DLL libmp3lame.32.dll”. Uh oh! “But it’s in the bin folder!” I screamed silently at Starbucks. So, I binged the issue and found a good answer on StackOverflow. I’m sharing here because it helped unstick me, and I imagine others may be running to this issue with libraries other than LAME.

I ended up adding the function to my Global.asax, in addition to importing namespaces System.IO and System.Linq:

/// <summary>
/// Updates PATH variable in hosting instance to allow referring to items in this project's /bin folder.
/// Very helpful with Azure.
/// </summary>
public static void CheckAddBinPath()
{
    // find path to 'bin' folder
    var binPath = Path.Combine(new string[] { AppDomain.CurrentDomain.BaseDirectory, "bin" });
    // get current search path from environment
    var path = Environment.GetEnvironmentVariable("PATH") ?? "";
 
    // add 'bin' folder to search path if not already present
    if (!path.Split(Path.PathSeparator).Contains(binPath, StringComparer.CurrentCultureIgnoreCase))
    {
        path = string.Join(Path.PathSeparator.ToString(), new string[] { path, binPath });
        Environment.SetEnvironmentVariable("PATH", path);
    }
}

Then in Application start I simply added:

// Sometimes files aren't loaded properly from bin. Hint to the app to load from /bin, too.
CheckAddBinPath();

I hope that helps!

I struggled with this for a few days while trying to convert a Silverlight video player to HTML5, and finally found an answer. Posting here in case anyone else is having trouble!

You need to specify the format as MPEG DASH to get it to smoothstream the MP4 file to the HTML5 video player. This is done by adding a format parameter to the manifest URL, as follows:
Note the (format=mpd-time-csf) at the end of the URL. There are a number of other formats you can stream, including the Silverlight SmoothStream, Adobe’s streaming format, Apple’s HTTP Live Streaming for iOS devices, and more. This is all done for you automatically by Azure’s Media Services. Pretty darn cool.
I struggled to find this, too, so quite happy I finally got things working. Here’s the source URL from Microsoft for more details:

I’m relatively new to Azure deployments, but the more I use them, the more I like the service. Unfortunately, it’s not WYSIWYG with deployments. What you see on IIS Express when development is not always what you’ll get after an Azure deployment. One issue I’ve come across is the MIME mappings aren’t the same, or don’t exist at all, and that’s preventing various file types, such as SVG images and WOFF2 fonts from being served. I also noticed that fixing Azure’s MIME mapping busted my AngularJS support in IIS Express – whoops!

Using the magic of web.config transforms, we can fix this for our release deployments. If you expand your web.config file, you’ll see web.Debug.config and web.Release.config. These files enable you to insert, replace, and remove settings based on your build configuration. Obviously, if you had multiple build configs, such as for different hosting environments, you’d insert those config names in addition web.*.config files.

To add SVG support, we need to insert our additional MIME types into the web.config. There’s no reason to do this in the master web.config, because it’s only necessary during release. This same tactic works very well for swapping the SMTP mail mailSettings section based on the hosting environment’s needs. For example, I swap localhost, where I use PaperCut to monitor sent email, to the actual settings upon deployment.

Below, you’ll see the fully modified web.Release.config from a recent deployment. This one worked perfectly for adding SVG and some missing font file extension support. You’ll notice I’m adding a new section under <system.webServer>. Note that I do not mark the webServer tag with an xdt:Transform. I don’t want to replace the entire section. I simply need to add the staticContent section to override some of the settings already configured in Azure. There are other options for xdt:Transform, such as Remove and Replace. This is a very powerful feature and I encourage you to learn more about it from Microsoft.

    <staticContent xdt:Transform="Insert">

I hope this helps!

Snippet

<?xml version="1.0"?>
 
<!-- For more information on using Web.config transformation visit http://go.microsoft.com/fwlink/?LinkId=301874 -->
 
<configuration xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform">
  <system.webServer>
    <!-- Add support for video files and other non-standard file request types. This breaks AngularJS support in IISExpress, hence why it's here instead. -->
    <staticContent xdt:Transform="Insert">
      <!-- if you don't remove certain extensions first, the site won't load, whoops! -->
      <remove fileExtension=".svg" />
      <remove fileExtension=".svgz" />
      <remove fileExtension=".eot" />
      <remove fileExtension=".ttf" />
      <remove fileExtension=".woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
      <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
      <mimeMap fileExtension=".webm" mimeType="video/webm" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml"/>
      <mimeMap fileExtension=".svgz" mimeType="image/svg+xml"/>
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
  </system.webServer>
 
</configuration>