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

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();
  }

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