Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
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:
Initialize the project for secret storage according to the instructions in Safe storage of app secrets in development in ASP.NET Core.
Store the sensitive settings in the local secret store with the secret keys
Authentication:Google:ClientId
(value:{CLIENT ID}
placeholder) andAuthentication: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
- If the sign-in doesn't work without receiving any errors, switch to development mode to make the app and Google registration easier to debug.
- If the site's database hasn't been created by applying the initial migration, the following error occurs: A database operation failed while processing the request. Select Apply Migrations to create the database and refresh the page to continue past the error.
- For information about an HTTP 500 error after successfully authenticating the request by the OAuth 2.0 provider, such as Google, and information on how to implement external authentication with Google for React and other SPA apps, see Middleware not handling 'signin-google' route after successful authentication in Asp.Net Core Web Api External Login Authentication (
dotnet/AspNetCore.Docs
#14169).
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
andAuthentication:Google:ClientSecret
as app settings in the Azure portal. The configuration system is set up to read keys from the environment variables.
ASP.NET Core