Google OAuth 2 - The Hard Way

So... Google has deprecated their old single signon code. Unfortunately I'd added that code to 3 different applications. So, we need to move forward!


I tried using the Microsoft WebPages OAuth Library, but the Google provider wouldn't work properly. Tried following the directions here

http://www.beabigrockstar.com/blog/google-signin-for-asp-net-mvc/

... but I was too stupid to "get it" and make it work. Getting weird errors on Google's end. I was already on 2 urgent projects, and now I have to make our Google login work again. It's just web requests, right? I can do some requests, no biggie. Found this site...

https://developers.google.com/oauthplayground/

which is everything the Google OAuth documentation isn't. Gave me everything I needed! Used a lot of code from Jerrie Peelser's blog (http://www.beabigrockstar.com/) which was a huge help. I'm thinking maybe the permissions from the Google dev site just hadn't propagated. Regardless, I created a helper class that just "does it".

You can modify it to suit your needs.

The "GetLoginRedirectUrl" code can be modified to specify which API's you want to access. The "GetAuthenticatedUserEmail" method is just a stupid simple method I use to get the email address. You can request any API that you put in the "GetAuthenticatedUserEmail" method no problem.

I hope you find this useful!

Cheesie simple modal dialog

From time to time I have to work on projects where I have old versions of libraries, like jQuery, and I can't upgrade them. Yet, I need some features of libraries I like to use, like Bootstrap. This time, I needed a simple wait dialog that would show up, then go away when I needed it to. I'm working with jQuery 1.4.4 and jQueryUI is just too much for what I'm doing.

So, I found a great article on the web for a simple CSS positioned modal dialog.

http://blog.raventools.com/create-a-modal-dialog-using-css-and-javascript/

And my version is below. All I really changed is some styling, added a variable for content, which I'm setting statically, and have the styles inline instead of in a separate style sheet. This is a quick and dirty fix for a dying project. I've done a better version with bootstrap/angular but that's a different post :)

MVC - Saving Files AND Json Model

When posting files in MVC using AJAX, Microsoft gives us a great tool, the Request.Files collection. However, when passing files via ajax, MVC ignores your json model that you pass as well. You can see the way around this in the code snippets below.



And in our javascript, using jQuery's ajax() method...




I add the json model to the FormData collection. Once that's done, I can pull it from the Request.Form[] Name Value collection when it posts to the server.

WebApi and OData - Without Entity Framework

OData is pretty nice, all said. Makes displaying data in a grid way easier. Microsoft has done some pretty cool things with WebAPI, gotten rid of the last bits of weirdness that remain in MVC (imo). However, their odata implementation adds more typical MS weirdness...

While most oData parameters just "work" and apply directly to your IQueryable, unfortunately $inlinecount isn't one of them.
Fortunately there's a pretty easy workaround.

 Add WebApi and oData using NuGet.
Do this to your method.


The key to this is returning the OData PageResult. It's pretty neat that MS' oData implementation will just work on your IQueryable, without modification. It's just that WebAPI won't return a PageResult when it sees the $inlinecount parameter, like it will when you use an oData controller. My issue with the oData controller is that it forces you into exposing your entire model for each object in your graph. I'm not trying to expose all of my data, I'm just trying to get an easy oData endpoint to feed my sites. Rarely do I need to expose my entire object graph to the user, and those queries are way too heavy. I also don't want a lot of JS baggage by filtering and selecting only the properties I need. This solution works much better for me.

File and JSON Post in MVC

It seems strange to me that MVC doesn't handle posting a file and a model at the same time from AJAX by default. It'd be great if you could just send your data and "poof" it's all there for you. It doesn't seem to be, so I'll put down what I've found that works for me.

You create a javascript FormData object. Add your model (with property "model") and your file('s). Post as normal.

In your action method, remove any model parameter you had. You won't need it. Just look at the Request.Form["model"] and deserialize your json. Get your files in the Request.Form collection.

MVC 4 Project File Structure

I've been trying to think of a clean way to structure web app folders that keeps things simple and removes clutter.Typically in most web apps, all scripts are thrown willy-nilly into the "Scripts" folder. You end up with tons of js files with no real structure to them. And, think about it... How often do you modify the jQuery source? How about Bootstrap? Modernizr?

Right... Why have them in the most visible place in the folder? The files you modify regularly should be easy to get to. The files that are never modified should be tucked away, only changed when upgrading or removing. We want the most often modified files visible and easily navigated. I came up with the following.

Generic Folder Structure

• common
• js
• jQuery
• knockout
• bootstrap
• css
• jQuery
• knockout
• bootstrap
• images
• Any file structure that makes sense. Most image resources for js libraries are contained in their respective folders inside of the css folder
• fx (or framework)
• app.js (global settings specific to this application)
• fx.js (common functions that are a part of the company framework code)
• Any other files that are specific to the company and are used across the site.
• views
• account
• login.html
• login.js
• hearing
• hearingSummary.html
• hearingSummary.js
• hearingResult.html
• hearingResult.js
• hearings.html
• hearings.js
• common
• any control templates that are used elsewhere in the application.
• index.html
• index.js

Which works well for a typical non-MS website... However, with MVC, it's not standard practice to have the js for a view/partial in the folder where it resides. Also, you can install and upgrade client libraries using NuGet. Unfortunately you don't get a choice as to where these files are installed. So, you're stuck with a "Content" and "Scripts" folder, and unless you modify your routing, you can't put script files in view folders.

To try and keep upgrade functionality but remove clutter, I came up with this compromise...

• [] Content
• [] App
• [] img
• any images specific to the application
• site.css
• [] kendo
• [] font
• [] Controllers
• [] Models
• [] Scripts
• [] App
• fx.js
• util.js
• etc...
• [] kendo
• bootstrap.js
• jquery.js
• knockout.js
• etc...
• [] Views
• [] ViewScripts
• [] Blog
• index.js
• editBlog.js
• newBlog.js
• [] Shared
• layout.js
• somePartial.js
• anotherPartial.js
• etc...
• [] Security
• login.js
• users.js
• etc...

The key features here are the Content/App folder, the Scripts/App folder, and the ViewScripts folder. By having special subfolders in Content and Scripts, I get away from having files that I modify from being lost in the files I install through NuGet. Typically these files are modified infrequently anyway, but at least this way they're easy to find. How many times have you found derelict css files lost in the Content folder mess? This helps with that.

The biggest benefit comes from moving view specific files to the ViewScripts folder. This folder follows the directory structure of our Views folder. For views/partials that need a specific javascript folder, you merely create one in the ViewScripts folder. Easy to find, easy to navigate. I'm sure there are a million ways to lay out the directory structure of an MVC app. This one works for me. I'm mainly posting this as a personal reference :)

Javascript Phone Number Knockout Binding

Hey, all...

Over the years, I must have written a dozen phone number textboxes. Unfortunately I never save the code. I get to play with Knockoutjs at my new job so I figured I'd give the number textbox another shot.

    ko.bindingHandlers.phoneNumber = {
        formatNumber: function (box) {
            var box = $(box);
            var value = box.data("value");
            if (value.length <= 10) {
                value = value.replace(/(\d\d\d)(\d\d\d)(\d\d\d\d)/, '($1) $2-$3');
            } else {
                value = box.data("value").replace(/(\d\d\d)(\d\d\d)(\d\d\d\d)(\d+)/, '($1) $2-$3 x$4');
            }
            $(box).val(value);
        },
        init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var _this = ko.bindingHandlers.phoneNumber;
            var textbox = $(element);
            //function formatNumber(box) {
            //}
            textbox.keydown(function (e) {
                // allow cut/copy/paste
                if (e.ctrlKey && (e.which === 67 || e.which === 86|| e.which === 88)) {
                    return;
                }
                // allow delete and backspace
                if (e.which === 8 || e.which === 46) {
                    return;
                }
                // Ensure that a number was pushed
                if (e.shiftKey || !((e.which >= 48 && e.which <= 57) || (e.which >= 96 && e.which <= 105))) {
                    e.preventDefault();
                }
            });
            textbox.focusin(function (e) {
                var value = textbox.data("value") || "";
                textbox.val(value);
            });
            textbox.focusout(function (e) {
                var value = textbox.val().replace(/[^0-9]+/g, '');
                textbox.data("value", value);
                _this.formatNumber(this);
                valueAccessor()(value);
            });
        },
        update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
            var _this = ko.bindingHandlers.phoneNumber;
            var textbox = $(element);
            var value = valueAccessor()().replace(/[^0-9]+/g, '');
            textbox.data("value", value);
            _this.formatNumber(textbox);

        }
    }