Edit

Share via


Google external login setup in ASP.NET Core

By Valeriy Novytskyy, Rick Anderson, and Sharaf Abacery

This tutorial shows how to enable user sign in with Google accounts using a sample ASP.NET Core project created in Using external login providers with Identity in ASP.NET Core. Follow Google's official guidance in Sign in with Google for Web: Setup to create a Google API client ID.

Create the app in Google

  • Navigate to the Google API & Services page of the Google Cloud platform.
  • If no project exists, create a new project by selecting the Create Project button. To select a different project than an existing project that loads, select the loaded project's button in the top-left corner of the UI, followed by the project. To add a new project, select the loaded project's button in the top-left corner of the UI, followed by the New project button.
  • When creating a new project:
    • Enter a Project name.
    • Optionally, select an Organization for the project.
    • Select the Create button.

After creating the project, the Dashboard page of the project loads, where it's possible to configure the project.

Open the Credentials tab to create the OAuth client.

The prerequisite to creating the credentials is to configure the OAuth consent screen. If the consent isn't configured, there's a prompt to configure the consent screen.

  • Select Configure consent screen or select OAuth consent screen in the sidebar.
  • In the OAuth consent screen, select Get started.
  • Set the App name and User support email.
  • Set the audience type to External.
  • Add Contact information by entering a contact email address.
  • Agree to the terms.
  • Select Create.

Create the client credentials for the app by opening the Clients sidebar menu item:

  • Select the Create client button.
  • Select Web application as the Application type.
  • Enter a Name for the client.
  • Add an Authorized redirect URI. For local testing, use the default address https://localhost:{PORT}/signin-google, where the {PORT} placeholder is the app's port.
  • Select the Create button to create the client.
  • Save the Client ID and Client secret, which are used later in the ASP.NET app configuration.

Note

The URI segment /signin-google is set as the default callback of the Google authentication provider. It's possible to change the default callback URI while configuring the Google authentication middleware via the inherited RemoteAuthenticationOptions.CallbackPath property of the GoogleOptions class.

When deploying the app, either:

  • Update the app's redirect URI in the Google Console to the app's deployed redirect URI.
  • Create a new Google API registration in the Google Console for the production app with its production redirect URI.

Store the Google client ID and secret

Store sensitive settings, such as the Google client ID and secret values, with Secret Manager. For this sample, follow these steps:

  1. Initialize the project for secret storage according to the instructions in Safe storage of app secrets in development in ASP.NET Core.

  2. Store the sensitive settings in the local secret store with the secret keys Authentication:Google:ClientId (value: {CLIENT ID} placeholder) and Authentication:Google:ClientSecret (value: {CLIENT SECRET} placeholder):

    dotnet user-secrets set "Authentication:Google:ClientId" "{CLIENT ID}"
    dotnet user-secrets set "Authentication:Google:ClientSecret" "{CLIENT SECRET}"
    

The : separator doesn't work with environment variable hierarchical keys on all platforms. For example, the : separator is not supported by Bash. The double underscore, __, is:

  • Supported by all platforms.
  • Automatically replaced by a colon, :.

Manage API credentials and usage in the API Console.

Configure Google authentication

Add the authentication service to the Program file:

services.AddAuthentication().AddGoogle(googleOptions =>
{
    googleOptions.ClientId = configuration["Authentication:Google:ClientId"];
    googleOptions.ClientSecret = configuration["Authentication:Google:ClientSecret"];
});

Add the authentication service to Startup.ConfigureServices:

services.AddAuthentication().AddGoogle(googleOptions =>
{
    googleOptions.ClientId = configuration["Authentication:Google:ClientId"];
    googleOptions.ClientSecret = configuration["Authentication:Google:ClientSecret"];
});

The AddAuthentication(IServiceCollection, String) overload sets the DefaultScheme property. The AddAuthentication(IServiceCollection, Action<AuthenticationOptions>) overload allows configuring authentication options, which can be used to set up default authentication schemes for different purposes. Subsequent calls to AddAuthentication override previously configured AuthenticationOptions properties.

AuthenticationBuilder extension methods that register an authentication handler may only be called once per authentication scheme. Overloads exist that allow configuring the scheme properties, scheme name, and display name.

Sign in with Google

  • Run the app and select Log in.
  • Under Use another service to log in., select Google.
  • The browser is redirected to Google for authentication.
  • Select the Google account to log in or enter Google credentials.
  • If this is the first time signing in, there's a prompt to allow the app to access the Google account information.
  • The browser is redirected back to the app, where it's possible to set the email.

The user is now logged in using Google credentials.

Troubleshooting

Next steps

  • This article demonstrates authentication with Google. For information on authenticating with other external providers, see Using external login providers with Identity in ASP.NET Core.
  • After the app is deployed to Azure, reset the ClientSecret in the Google API console.
  • Set the Authentication:Google:ClientId and Authentication:Google:ClientSecret as app settings in the Azure portal. The configuration system is set up to read keys from the environment variables.