Adding Google OAuth2 Login to ASP.NET MVC Web App (Local Development)

While working through the AZ-204 lab, I practiced integrating third-party authentication using Google OAuth2 into an ASP.NET MVC (.NET Framework) application. It gave me hands-on experience with secure external login flows. Below is the full step-by-step process I followed.

1. Project Setup in Visual Studio

1. Open Visual Studio 2022 and install:

   • "ASP.NET and web development"
   • ".NET Framework project and item templates"
   • ".NET Framework 4.8 targeting pack"

2. Create a new project using the ASP.NET Web Application (.NET Framework) template.

3. Select the MVC template and set Authentication to Individual User Accounts.

4. This will scaffold Identity and all required auth logic automatically.

2. Test Local Authentication Flow

1. Press F5 to run the app.

2. Click Register, fill out a test email and password, then register.

3. Confirm the user is logged in and appears authenticated.

4. Log out and log back in to verify credentials are saved.

Note: User data is stored in a .mdf file using SQL Server LocalDB under your AppData directory.

3. Enable SSL for OAuth2 Compatibility

1. In Solution Explorer, select your project and press F4.

2. Set SSL Enabled to True and copy the SSL URL (e.g., https://localhost:44356).

3. Go to Project Properties → Web tab → paste SSL URL into Project Url.

4. Save and close.

4. Register OAuth2 Client in Google Developer Console

1. Go to the Google API Console.

2. Create a new project.

3. Under OAuth consent screen, fill out required info (select “External” if prompted).

4. Go to Credentials → click Create OAuth client ID:

   • Type: Web application
   • Name: OAuthGoogleAppClient
   • Redirect URI: https://localhost:<port>/signin-google

5. Copy the Client ID and Client Secret.

5. Configure ASP.NET for Google Login

1. Open App_Start/Startup.Auth.cs.

2. Find the Google block (commented out by default):

   //app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
   //{
   //    ClientId = "",
   //    ClientSecret = ""
   //});
   

3. Uncomment it and insert your credentials:

   app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
   {
       ClientId = "<your-client-id>",
       ClientSecret = "<your-client-secret>"
   });
   

4. Save the file.

6. Test Google Login Integration

1. Press F5 to run the app.

2. Click Login → choose Google.

3. Sign in with your Google account and approve access.

4. You’ll be redirected to /signin-google → then to Register (if it’s your first login).

5. Confirm registration and verify login success.

Notes

• Your redirect URI must match exactly in both your app and Google Console.
• OAuth2 flows are handled via browser redirects (not server-side).
• New Google-linked users will be stored using ASP.NET Identity in LocalDB.

OAuth2 Flow Recap

1. User visits your site
2. Clicks "Login with Google"
3. Redirected to Google auth server
4. User signs in and consents
5. Google redirects back to /signin-google
6. ASP.NET logs them in using received token