Adding Google and Facebook Authentication to an MVC 5 App: Updated Instructions

Monday, 27 February 2017
  • By
  • Jeff Ammons
  • Tags:
  • Programming

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:
  2. File: New: Project
  3. Select Visual C#: Web: ASP.NET Web application
  4. Be sure the Authentication says Individual User Accounts
  5. Don't follow his advice to check the Host in the cloud
  6. Make sure that option is unchecked
  7. You should set that up directly in the Azure Portal
  8. Then set up a build and deploy process in Visual Studio Team Services
  9. Update your Nuget Packages
  10. To to Visual Studio's Tools menu and select Nuget Package Manager and then Manage Nuget Packages for Solution…
  11. Click on the Updates tab at the top
  12. Tell it to Update All
  13. Hit all the OKs and Accepts it throws at you…
  14. Set up SSL for your project
  15. Select your project in Solution Explorer and hit F4
  16. On the properties menu set the SSL Enabled to “True”
  17. Select the SSL URL and copy it
  18. Go back to Solution Explorer and right click on the project name then select properties
  19. On the Properties tab select the “Web” heading on the left
  20. Paste the URL you copied into the “Project URL” textbox
  21. NOTE: Here's one of the places you need to deviate from Rick's first tutorial
  22. You want to set up HTTPS for your entire site, not on a controller or method basis!
  23. As of January of 2017 Google now ranks HTTP sites lower in search results than HTTPS ones!
  24. 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.
  25. You don't need to read this entire tutorial. The link takes you to the right section.
  26. The heading is Protect the Application with SSL and the Authorize Attribute
  27. The important part is adding the two new filters:
  28. Go to your App_Start/FilterConfig.cs file and add these filters:
  filters.Add(new System.Web.Mvc.AuthorizeAttribute());
  filters.Add(new RequireHttpsAttribute());
    2.  Now you need to set controllers and methods you *don't* want to require logins for
    3.  On those just add the following attribute:
  [AllowAnonymous]
  public ActionResult Index()
  {
    return View();
  }
  1. At this point go back to the original tutorial
  2. Skip through his section on starting up the browser and accepting any SSL related messages
  3. Here is the biggest outdated section. Creating a Google app for OAuth 2 and connecting the app to the project
  4. It was fine when he wrote it, but Google has changed their process
  5. For this process you can read an article Rick wrote along with a couple of other authors called Configuring Google authentication.
  6. Remember this tutorial is for the new ASP.NET Core version, so STOP after the Google Developer Console section!
  7. You will:
  8. Login on to the Google Developers Console
  9. Look for the word “Project” with a down arrow next to it in the upper left of the title bar
  10. Click the word Project
  11. Select Create Project
  12. Enter a project name (can be whatever you like)
  13. On the Library page look for the Google+ Social APIs section
  14. Select the “Goole+ API” link
  15. Click “Enable” up at the top of the page
  16. Click the Create Credentials button
  17. In the drop box labeled Where will you be calling the API from select “Web Server (e.g. node.js, Tomcat)”
  18. Now you will click the “What Credentials do I need?” button
  19. Go back to get the HTTPS URL you saved in Visual Studio (select project name then click F4)
  20. Paste this into the two text boxes
  21. In the Authorized JavaScript Origins box, remove the trailing slash
  22. In the Authorized redirect URIs, add “/signin-google”
  23. Click the Create client ID button
  24. Enter your email address and product name (you may not want to use your personal email address, so you can create a second one)
  25. Click Continue
  26. I don't download the JSON file as Rick suggests, but instead click “I'll do this later”
  27. On the list you see click the little pencil icon
  28. Copy the Client ID and Secret and store them in a text file somewhere on your computer
  29. IMPORTANT If you are using MVC 5 (not Core), STOP HERE
  30. The rest of these instructions are for Core only
  31. They won't work in MVC 5
  32. Back in Rick's original article in the “Creating a Google app for OAuth 2 and connecting the app to the project”
  33. Skip down to the section that starts “Copy and paste the AppId and App Secret” (currently it is step 7)
  34. Go to the App_Start folder and the Startup.Auth.cs file
  35. Scroll to the bottom of the file
  36. Uncomment the section that has the Google authentication bits
  37. 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.