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](https://developers.google.com/identity/oauth2/web/guides/load-3p-authorization-library).
4. Optionally set up a Content Security Policy (CSP) and Cross-Origin Opener Policy (COOP).

> [!NOTE]
> **Note:** A client ID looks like the following example: `1234567890-abc123def456.apps.googleusercontent.com`.

## 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](https://console.developers.google.com/auth/clients) of the Google Cloud Console.
2. Create or select a Cloud Console project. When creating production applications, [multiple projects](https://developers.google.com/identity/protocols/oauth2/policies#separate-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`.

   > [!IMPORTANT]
   > **Key Point:** For local tests or development, add both `http://localhost` and `http://localhost:<port_number>` to the **Authorized JavaScript origins** field.

5. If you use the [authorization code model](https://developers.google.com/identity/oauth2/web/guides/use-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](https://developers.google.com/identity/protocols/oauth2/web-server#uri-validation). 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()`](https://developers.google.com/identity/oauth2/web/reference/js-reference#CodeClientConfig) or [`initTokenClient()`](https://developers.google.com/identity/oauth2/web/reference/js-reference#TokenClientConfig). (A client secret is also
created, which you must keep confidential and use only for server-side token
exchange operations.)

## Configure your OAuth consent screen

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](https://console.developers.google.com/auth/branding) 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](https://console.developers.google.com/auth/scopes) to configure the Google API scopes your application requires. It is a best practice to [request scopes
   incrementally](https://developers.google.com/identity/protocols/oauth2/web-server#incrementalAuth), 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](https://support.google.com/cloud/answer/9110914) for details.

## Content Security Policy and COOP

If your web application enforces a [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy),
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](https://developers.google.com/identity/oauth2/web/guides/load-3p-authorization-library) on your web page to start initializing your
authorization client.