ウェブサイトで Google Identity Services を有効にするには、まず Google API クライアント ID を設定する必要があります。そのための手順は次のとおりです。
の を開きます。
プロジェクトを作成または選択します。「Google でログイン」ボタンまたは Google One Tap のプロジェクトがすでにある場合は、既存のプロジェクトとウェブ クライアント ID を使用します。本番環境アプリケーションを作成する場合は、複数のプロジェクトが必要になることがあります。管理するプロジェクトごとに、このセクションの残りの手順を繰り返します。
[クライアントを作成] をクリックし、[アプリケーションの種類] で [ウェブ アプリケーション] を選択して、新しいクライアント ID を作成します。既存のクライアント ID を使用するには、[ウェブ アプリケーション] タイプのいずれかを選択します。
ウェブサイトの URI を [承認済みの JavaScript 生成元] に追加します。URI には、スキームと完全修飾ホスト名のみが含まれます。例: https://www.example.com
必要に応じて、認証情報は JavaScript コールバックではなく、ホストするエンドポイントへのリダイレクトを使用して返されることがあります。この場合は、リダイレクト URI を [承認済みのリダイレクト URI] に追加します。リダイレクト URI には、スキーム、完全修飾ホスト名、パスが含まれ、リダイレクト URI の検証ルールに準拠している必要があります。例: https://www.example.com/auth-receiver
Google API のスコープ: スコープを使用すると、アプリケーションがユーザーのプライベート データにアクセスできます。認証にはデフォルトのスコープ（email、profile、openid）で十分です。機密性の高いスコープを追加する必要はありません。一般的に、アクセスが必要になったときにスコープを段階的にリクエストすることがベスト プラクティスです。
[Verification Status]（検証ステータス）を確認します。アプリケーションの検証が必要な場合は、[Submit For Verification]（検証のために送信）ボタンをクリックして、検証のためにアプリケーションを送信します。詳しくは、OAuth の確認要件をご覧ください。
ログイン時の OAuth 設定の表示
FedCM を使用したワンタップ
トップレベルの承認済みドメインは、Chrome でユーザーの同意時に表示されます。クロスオリジンだが同じサイトの iframe でのみ One Tap を使用することは、サポートされている方法です。
[null,null,["最終更新日 2025-08-26 UTC。"],[[["\u003cp\u003eBefore integrating Google Sign-In, One Tap, or Automatic sign-in, you need to set up your Google API client ID and OAuth consent screen in the Google API Console.\u003c/p\u003e\n"],["\u003cp\u003eFor security, configure your website's Content Security Policy by adding specific Google Identity Services URLs to directives like \u003ccode\u003econnect-src\u003c/code\u003e, \u003ccode\u003eframe-src\u003c/code\u003e, \u003ccode\u003escript-src\u003c/code\u003e, and \u003ccode\u003estyle-src\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eWhen FedCM is disabled, adjust your \u003ccode\u003eCross-Origin-Opener-Policy\u003c/code\u003e header to \u003ccode\u003esame-origin\u003c/code\u003e and include \u003ccode\u003esame-origin-allow-popups\u003c/code\u003e to ensure proper functionality of Google Sign-In and One Tap pop-ups.\u003c/p\u003e\n"],["\u003cp\u003eEnsure your website's URI is added to the 'Authorized JavaScript origins' in the Google API Console and that it includes the scheme and fully qualified hostname.\u003c/p\u003e\n"]]],[],null,["To add a Sign In With Google button or One Tap and Automatic sign-in\nprompts to your website you first need to:\n\n1. get an OAuth 2.0 client ID,\n2. configure OAuth branding and settings,\n3. load the Google Identity Services client library, and\n4. optionally setup Content Security Policy and\n5. update Cross-Origin Opener Policy\n\n| **Note:** You must have a client ID to configure Sign In With Google and to [verify ID tokens](/identity/gsi/web/guides/verify-google-id-token) on your backend. A client ID looks like the following example: `1234567890-abc123def456.apps.googleusercontent.com`\n\nGet your Google API client ID\n\nTo enable Google Identity Services on your website, you first need to set up a\nGoogle API client ID. To do so, complete the following steps:\n\n1. Open the [Clients page](https://console.developers.google.com/auth/clients) of the Google Cloud Console.\n2. Create or select a Cloud Console project. If you already have a project for the Sign In With Google button or Google One Tap, use the existing project and the web client ID. When creating production applications, [multiple projects](/identity/protocols/oauth2/policies#separate-projects) may be necessary, repeat the remaining steps of this section for each project you manage.\n3. 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**.\n4. Add the URI of your website to **Authorized JavaScript origins** . The URI\n includes the scheme and fully qualified hostname only. For example,\n `https://www.example.com`.\n\n | **Key Point:** For local tests or development add both `http://localhost` and `http://localhost:\u003cport_number\u003e`\n | **Key Point:** Google One Tap can only be displayed in HTTPS domains.\n5. Optionally, credentials may be returned using a redirect to an endpoint you\n host rather than through a JavaScript callback. If this is the case, add\n your redirect URIs to **Authorized redirect URIs** . Redirect URIs include\n the scheme, fully qualified hostname, and path and must comply with\n [Redirect URI validation rules](/identity/protocols/oauth2/web-server#uri-validation). For example,\n `https://www.example.com/auth-receiver`.\n\nInclude the client ID in your web app using the [data-client_id](/identity/gsi/web/reference/html-reference#data-client_id)\nor [client_id](/identity/gsi/web/reference/js-reference#client_id) fields.\n| **Key Point:** When testing using http and localhost set the [Referrer-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy) header in your web app to `Referrer-Policy: no-referrer-when-downgrade`.\n\nConfigure your OAuth Consent Screen\n\nBoth Sign In With Google and One Tap authentication include a consent screen\nwhich tells users the application requesting access to their data, what kind of\ndata they are asked for and the terms that apply.\n\n1. Open the [Branding page](https://console.developers.google.com/auth/branding) of the Google Auth Platform section of the Cloud Console.\n2. If prompted, select the project you just created.\n3. On the [Branding page](https://console.developers.google.com/auth/branding), fill out\n the form and click the \"Save\" button.\n\n 1. **Application name:** The name of the application asking for consent.\n The name should accurately reflect your application and be consistent\n with the application name users see elsewhere.\n\n 2. **Application logo:** This image is shown on the consent screen to help\n users to recognize your app. The logo is shown on Sign In With Google\n consent screen and on [account settings](https://myaccount.google.com/permissions), but is not shown on One Tap dialog.\n\n 3. **Support email:** Shown on the consent screen for user support and to\n Google Workspace administrators evaluating access to your application\n for their users. This email address is shown to users on the\n Sign In With Google consent screen when the user clicks the\n application name.\n\n 4. **Authorized domains:** To protect you and your users, Google only\n allows applications that authenticate using OAuth to use Authorized\n Domains. Your applications' links must be hosted on Authorized Domains.\n [Learn more](https://support.google.com/cloud/answer/6158849#authorized-domains).\n\n 5. **Application Homepage link:** Shown on Sign In With Google consent\n screen and One-Tap GDPR compliant disclaimer information under the\n \"Continue as\" button. Must be hosted on an Authorized Domain.\n\n 6. **Application Privacy Policy link:** Shown on Sign In With Google\n consent screen and One-Tap GDPR compliant disclaimer information under\n the \"Continue as\" button. Must be hosted on an Authorized Domain.\n\n 7. **Application Terms of Service link (Optional):** Shown on Sign In With\n Google consent screen and One-Tap GDPR compliant disclaimer information\n under the \"Continue as\" button. Must be hosted on an Authorized Domain.\n\n4. Navigate to the\n [Data Access page](https://console.developers.google.com/auth/scopes) to configure\n scopes for your app.\n\n 1. **Scopes for Google APIs** : Scopes allow your application to access your user's private data. For the authentication, default scope (email, profile, openid) is sufficient, you don't need to add any sensitive scopes. It is generally 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.\n5. Check \"Verification Status\", if your application needs verification then\n click the \"Submit For Verification\" button to submit your application for\n verification. Refer to\n [OAuth verification requirements](https://support.google.com/cloud/answer/9110914)\n for details.\n\nDisplay of OAuth settings during sign-in \n\nOne Tap using FedCM\n\nThe top-level **Authorized domain** is displayed during user consent in\nChrome. Only using One Tap in cross-origin but [same-site](https://web.dev/articles/same-site-same-origin) iframes\nis a [**supported**](/identity/gsi/web/amp/intermediate-iframe#cross-origin-iframe) method.\n\nOne Tap without FedCM\n\nThe **Application name** is displayed during user consent.\n\n**Figure 1.** OAuth consent settings displayed by One Tap in Chrome.\n\nLoad the client library\n\nBe sure to load the Google Identity Services client library on any page that\na user might sign in on. Use the following code snippet: \n\n \u003cscript src=\"https://accounts.google.com/gsi/client\" async\u003e\u003c/script\u003e\n\nYou can optimize your pages loading speed if you load the script with the\n`async` attribute.\n\nRefer to the [HTML](/identity/gsi/web/reference/html-reference) and [JavaScript](/identity/gsi/web/reference/js-reference) API references for the list of\nmethods and properties the library supports.\n\nContent Security Policy\n\nWhile optional, a [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy)\nis recommended to secure your app and prevent cross-site scripting (XSS)\nattacks. To learn more, see an\n[Introduction to CSP](https://csp.withgoogle.com/docs/index.html)\nand [CSP and XSS](https://web.dev/csp/).\n\nYour Content Security Policy might include one or more directives, such as\n`connect-src`, `frame-src`, `script-src`, `style-src`, or `default-src`.\n\nIf your CSP includes the:\n\n- `connect-src` directive, add `https://accounts.google.com/gsi/` to allow a page to load the parent URL for Google Identity Services server-side endpoints.\n- `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.\n- `script-src` directive, add `https://accounts.google.com/gsi/client` to allow the URL of the Google Identity Services JavaScript library.\n- `style-src` directive, add `https://accounts.google.com/gsi/style` to allow the URL of the Google Identity Services Stylesheets.\n- `default-src` directive, if used, ist a fallback if any of the preceding directives (`connect-src`, `frame-src`, `script-src`, or `style-src`) is not specified, add `https://accounts.google.com/gsi/` to allow a page to load the parent URL for Google Identity Services server-side endpoints.\n\nAvoid listing individual GIS URLs when using `connect-src`. This helps minimize\nfailures when GIS is updated. For example, instead of adding\n`https://accounts.google.com/gsi/status` use the GIS parent URL\n`https://accounts.google.com/gsi/`.\n\nThis example response header allows Google Identity Services to load and execute\nsuccessfully: \n\n Content-Security-Policy-Report-Only: script-src\n https://accounts.google.com/gsi/client; frame-src\n https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;\n\nCross Origin Opener Policy\n\nThe Sign In With Google button and Google One Tap may require changes to your\n[`Cross-Origin-Opener-Policy`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy) (COOP) in order\nto successfully create popups.\n\nWhen [FedCM is enabled](/identity/gsi/web/guides/supported-browsers#compatibility) the browser directly renders popups and no changes\nare necessary.\n\nHowever, when FedCM is disabled, set the COOP header:\n\n- to `same-origin` and\n- include `same-origin-allow-popups`.\n\nFailing to set the proper header breaks communication between windows, leading\nto [a blank pop-up window](https://github.com/google/google-api-javascript-client/issues/796)\nor similar bugs."]]
