How To Get Google Client Id

Before y'all add Sign In With Google, One Tap, or Automatic sign-in to your website setup your OAuth configuration and optionally configure your site Content Security Policy.

Get your Google API client ID

To enable Sign In With Google on your website, you beginning need to set up your Google API client ID. To do so, complete the following steps:

Open the Credentials page of the Google APIs console.
Create or select a Google APIs projection. If you already have a project for the Sign In With Google button or Google One Tap, apply the existing project and the web customer ID.

If your projection doesn't have a Web application-type customer ID, click Create credentials > OAuth customer ID to create one. Be sure to include your site'southward domain in the Authorized JavaScript origins box. Delight note that Google One Tap can only exist displayed in HTTPS domains. When y'all perform local tests or evolution, you must add both http://localhost and http://localhost:<port_number> to the Authorized JavaScript origins box.

Configure your OAuth Consent Screen

Both Sign In With Google and One Tap authentication include a consent screen which tells users the application requesting access to their data, what kind of data they are asked for and the terms that apply.

Open up the OAuth consent screen page of the Google APIs panel.
If prompted, select the project you just created.
On the "OAuth consent screen" page, fill out the form and click the "Save" button.
1. Application proper noun: The proper noun of the awarding request for consent. The name should accurately reflect your awarding and be consistent with the application proper name users come across elsewhere. The application name volition be shown on the One-tap dialog window.
2. Application logo: An image on the consent screen that will help users recognize your app. The logo is shown on Sign In With Google consent screen and on business relationship settings, whereas it'southward non shown on One Tap dialog.
3. Support email: Shown on the consent screen for user support and to Grand Suite administrators evaluating access to your application for their users. This e-mail accost will be shown to users on the Sign In With Google consent screen when the user clicks the application name.
4. Scopes for Google APIs: Scopes let your application to access your user's individual Google information. For the authentication, default telescopic (email, profile, openid) is sufficient, you don't need to add together whatsoever sensitive scopes. It is by and large a best practice to asking scopes incrementally, at the fourth dimension admission is required, rather than up front. Learn more.
5. Authorized domains: To protect yous and your users, Google only allows applications that authenticate using OAuth to use Authorized Domains. Your applications' links must be hosted on Authorized Domains. Larn more than.
6. Application Homepage link: Shown on Sign In With Google consent screen and One-Tap GDPR compliant disclaimer data nether the "Continue as" push button. Must be hosted on an Authorized Domain.
7. Application Privacy Policy link: Shown on Sign In With Google consent screen and One-Tap GDPR compliant disclaimer information under the "Continue as" button. Must be hosted on an Authorized Domain.
8. Application Terms of Service link (Optional): Shown on Sign In With Google consent screen and One-Tap GDPR compliant disclaimer information nether the "Keep every bit" push. Must be hosted on an Authorized Domain.
Figure 1. OAuth Consent Screen fields shown on I Tap UI
Check "Verification Status", if your application needs verification then click the "Submit For Verification" button to submit your application for verification. Refer to OAuth verification requirements for details.

Content Security Policy

While optional, a Content Security Policy is recommended to secure your app and preclude cross-site scripting (XSS) attacks. To learn more, see an Introduction to CSP and CSP and XSS.

Your Content Security Policy might include ane or more directives, such every bit connect-src, frame-src, script-src, or style-src.

If your CSP includes the:

connect-src directive, add https://accounts.google.com/gsi/ to let a page to load the parent URL for Google Identity Services server-side endpoints.
frame-src directive, add https://accounts.google.com/gsi/ to allow the parent URL of the One Tap and Sign In With Google button iframes.
script-src directive, add https://accounts.google.com/gsi/client to allow the URL of the Google Identity Services JavaScript library.
way-src directive, add https://accounts.google.com/gsi/style to allow the URL of the Google Identity Services Stylesheets.

Avoid listing individual GIS URLs when using connect-src. This helps minimize failures when GIS is updated. For example, instead of adding https://accounts.google.com/gsi/condition use the GIS parent URL https://accounts.google.com/gsi/.

This case response header allows Google Identity Services to load and execute successfully:

          Content-Security-Policy-Report-Simply: script-src https://accounts.google.com/gsi/client; frame-src https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;

Cross Origin Opener Policy

To allow Sign In With Google button and/or Google One Tap to part well with popup windows, you must non set the HTTP Cross-Origin-Opener-Policy response header to aforementioned-origin, which will break the communication betwixt the windows and pb to a blank popup window or like bugs.

The same-origin-allow-popups value is recommended for the Cross-Origin-Opener-Policy header on pages where Sign In With Google button and/or Google 1 Tap are displayed.