Setup

  • Google Sign-In simplifies integration with Google APIs by managing the OAuth 2.0 flow and token lifecycle.

  • Users can revoke access to an application at any time.

  • Integrating the Google 3P Authorization library requires creating a client ID in the Google Cloud console.

  • When configuring the project, select the Web browser client type and specify your app's origin URI, including http://localhost for testing.

  • You will need the generated client ID to proceed with integration.

To authorize access to Google APIs in your web app using the Google Identity Services JavaScript library (google.accounts.oauth2), you first need to:

  1. Get an OAuth 2.0 client ID.
  2. Configure your OAuth consent screen and scopes.
  3. Load the client library.
  4. Optionally set up a Content Security Policy (CSP) and Cross-Origin Opener Policy (COOP).

Get your Google API client ID

To enable Google Account Authorization on your website, you first need to set up a Google API client ID. Complete the following steps:

  1. Open the Clients page of the Google Cloud Console.
  2. Create or select a Cloud Console project. When creating production applications, multiple projects may be necessary; repeat the remaining steps of this section for each project you manage.
  3. Click Create client and for Application type select Web application to create a new client ID. To use an existing client ID, select one of type Web application.

  4. Add the URI of your website to Authorized JavaScript origins. The URI includes the scheme and fully qualified hostname only. For example, https://www.example.com.

  5. If you use the authorization code model with ux_mode: 'redirect' (or exchange authorization codes at a backend endpoint), add your redirect URIs to Authorized redirect URIs. Redirect URIs include the scheme, fully qualified hostname, and path, and must comply with Redirect URI validation rules. For example, https://www.example.com/oauth2callback.

After configuration is complete, take note of the client ID that was created. You will pass this value in the client_id property when initializing initCodeClient() or initTokenClient(). (A client secret is also created, which you must keep confidential and use only for server-side token exchange operations.)

When your web app requests access to user data using OAuth 2.0 scopes, Google displays a consent screen that tells users which application is requesting access, what data scopes are requested, and the terms that apply.

  1. Open the Branding page of the Google Auth Platform section of the Cloud Console.
  2. If prompted, select the project you configured.
  3. Fill out the branding form (Application name, Application logo, Support email, Authorized domains, Application Homepage link, and Privacy Policy link) and click Save.
  4. Navigate to the Data Access page to configure the Google API scopes your application requires. It is a best practice to request scopes incrementally, at the time access is required, rather than upfront.
  5. Check your Verification Status. If your application requests sensitive or restricted scopes, submit your application for verification. Refer to OAuth verification requirements for details.

Content Security Policy and COOP

If your web application enforces a Content Security Policy (CSP), allow the following Google Identity Services origins:

  • script-src: https://accounts.google.com/gsi/client
  • frame-src: https://accounts.google.com/gsi/
  • connect-src: https://accounts.google.com/gsi/

For pop-up authorization flows (initTokenClient or initCodeClient with ux_mode: 'popup'), configure your Cross-Origin-Opener-Policy (COOP) HTTP response header to same-origin-allow-popups so the dialog window can communicate the authorization response back to your page.

Next steps

Next, load the client library on your web page to start initializing your authorization client.