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:
    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.