Since Microsoft’s instructions for adding Google and Facebook logins to your MVC 5 application are a bit out of date, I’m going to post here a step by step summary of what you need to do to add those logins to your app.

To start you can read Rick Anderson’s tutorial at Code! MVC 5 App with Facebook, Twitter, LinkedIn and Google OAuth2 Sign-on (C#).

This is a great tutorial, but it is out of date on two scores:

1. The Google process has changed
2. He shows how to set individual Controllers and Methods to require logins instead of the whole app.

In this post I’ll match his step by step instructions and then show you where you should reference two of his other tutorials for more info.

This post won’t have details (you can see Rick’s articles for that), but rather just a to-do list that references his tutorials.

So let’s get started!

First you should go to the link above and then complete the following steps:

1. Create your new MVC app as you normally would:
   1. File: New: Project
   2. Select Visual C#: Web: ASP.NET Web application
   3. Be sure the Authentication says Individual User Accounts
   4. Don’t follow his advice to check the Host in the cloud
   5. Make sure that option is unchecked
   6. You should set that up directly in the Azure Portal
   7. Then set up a build and deploy process in Visual Studio Team Services
2. Update your Nuget Packages
   1. To to Visual Studio’s Tools menu and select Nuget Package Manager and then Manage Nuget Packages for Solution…
   2. Click on the Updates tab at the top
   3. Tell it to Update All
   4. Hit all the OKs and Accepts it throws at you…

3. Set up SSL for your project

   1. Select your project in Solution Explorer and hit F4
   2. On the properties menu set the SSL Enabled to “True”
   3. Select the SSL URL and copy it
   4. Go back to Solution Explorer and right click on the project name then select properties
   5. On the Properties tab select the “Web” heading on the left
   6. Paste the URL you copied into the “Project URL” textbox
   7. NOTE: Here’s one of the places you need to deviate from Rick’s first tutorial
   8. You want to set up HTTPS for your entire site, not on a controller or method basis!
   9. As of January of 2017 Google now ranks HTTP sites lower in search results than HTTPS ones!

   10. For this you can hop over to another of Rick’s Tutorials at Create an ASP.NET MVC app with auth and SQL DB and deploy to Azure App Service.

       1. You don’t need to read this entire tutorial. The link takes you to the right section.
       2. The heading is Protect the Application with SSL and the Authorize Attribute
       3. The important part is adding the two new filters:

       4. Go to your App_Start/FilterConfig.cs file and add these filters:

          1 2	filters.Add(new System.Web.Mvc.AuthorizeAttribute()); filters.Add(new RequireHttpsAttribute());

       5. Now you need to set controllers and methods you don’t want to require logins for

       6. On those just add the following attribute:

          1 2 3 4 5

          [AllowAnonymous] public ActionResult Index() { return View(); }

   11. At this point go back to the original tutorial

   12. Skip through his section on starting up the browser and accepting any SSL related messages
   13. Here is the biggest outdated section. Creating a Google app for OAuth 2 and connecting the app to the project
   14. It was fine when he wrote it, but Google has changed their process
   15. For this process you can read an article Rick wrote along with a couple of other authors called Configuring Google authentication.
   16. Remember this tutorial is for the new ASP.NET Core version, so STOP after the Google Developer Console section!
   17. You will:
       1. Login on to the Google Developers Console
       2. Look for the word “Project” with a down arrow next to it in the upper left of the title bar
       3. Click the word Project
       4. Select Create Project
       5. Enter a project name (can be whatever you like)
       6. On the Library page look for the Google+ Social APIs section
       7. Select the “Goole+ API” link
       8. Click “Enable” up at the top of the page
       9. Click the Create Credentials button
       10. In the drop box labeled Where will you be calling the API from select “Web Server (e.g. node.js, Tomcat)”
       11. Now you will click the “What Credentials do I need?” button
       12. Go back to get the HTTPS URL you saved in Visual Studio (select project name then click F4)
       13. Paste this into the two text boxes
       14. In the Authorized JavaScript Origins box, remove the trailing slash
       15. In the Authorized redirect URIs, add “/signin-google”
       16. Click the Create client ID button
       17. Enter your email address and product name (you may not want to use your personal email address, so you can create a second one)
       18. Click Continue
       19. I don’t download the JSON file as Rick suggests, but instead click “I’ll do this later”
       20. On the list you see click the little pencil icon
       21. Copy the Client ID and Secret and store them in a text file somewhere on your computer
       22. IMPORTANT If you are using MVC 5 (not Core), STOP HERE
       23. The rest of these instructions are for Core only
       24. They won’t work in MVC 5
   18. Back in Rick’s original article in the “Creating a Google app for OAuth 2 and connecting the app to the project”
   19. Skip down to the section that starts “Copy and paste the AppId and App Secret” (currently it is step 7)
   20. Go to the App_Start folder and the Startup.Auth.cs file
   21. Scroll to the bottom of the file
   22. Uncomment the section that has the Google authentication bits
   23. Paste in your Google client id and secret you put into a text file

Done!

Now you should be able to fire up the project and log in with your Google account!

Important Point!

Rick’s example and the default Startup.Auth.cs file lead you to do something a bit dangerous…

You don’t want to store your secrets in your code!

What you want to do is put those values in your AppSettings and then store them in a file outside your project.

The reason is so you don’t put your secrets into source control.

I’ll write up another post to cover how to do that.

Of course VS Code isn’t the first text editor to include an integrated terminal, but it is extraordinarily handy!

The one complaint I’ve had has been that although I can have multiple terminal instances open and I could configure Code to use either PowerShell or Bash, I couldn’t mix or match them.

In other words I could start PowerShell terminals or Bash terminals, but not one of each for instance.

Well, guess what?

I found a workaround!

You specify which you want in the User Preferences, which is really just a settings.json file.

For instance to configure PowerShell I add this to the file:

1

"terminal.integrated.shell.windows": "C:\\Windows\\sysnative\\WindowsPowerShell\\v1.0\\powershell.exe"

If I want Bash, I add this instead:

1

"terminal.integrated.shell.windows2": "C:\\Windows\\sysnative\\bash.exe"

So how do I get them to co-exist?

It’s a hacky workaround for now, but when I click the plus sign to create a new terminal instance, it reads the settings.json file to see which terminal to launch.

Since that’s the case all I have to do is add this to my file:

1
2

"terminal.integrated.shell.windows": "C:\\Windows\\sysnative\\WindowsPowerShell\\v1.0\\powershell.exe",
"terminal.integrated.shell.windows2": "C:\\Windows\\sysnative\\bash.exe"

See what I did there? Since Code is looking for terminal.integrated.shell.windows and not windows2 it ignores the second one.

I launch my first terminal and get PowerShell.

Next I change the settings file so that PowerShell is “windows2” and Bash is “windows” then launch the second terminal.

Voila!

Now I have one of each and can happily swap between them!

Hopefully Code will gain the ability to let me specify which I want. It should be pretty easy to have a collection of shells and then let the user pick in the way ConEMU does.

I’m sure I’m not the first to figure this out, but man oh man is it useful!

I’ll blog more about this when I have time, but in a nutshell Angular Components are a great way to spice up a static site with completely dynamic elements.

In the talk I did a demo of adding an Angular 2 component that pulls the latest list of upcoming Meetups for a group and displays them in a Hexo Widget.

If you want a full, step-by-step course on getting your blog set up with a
static website generator, you can check out
my course on Pluralsight:
Build a Better Blog with a Static Site Generator

This is my talk on using Visual Studio Team Services and Azure App Services to run a web development project without managing any VMs.