웹사이트에 Google 계정으로 로그인 버튼 또는 원탭 및 자동 로그인 메시지를 추가하려면 먼저 다음 단계를 따라야 합니다.
OAuth 2.0 클라이언트 ID를 가져오고,
OAuth 브랜딩 및 설정을 구성합니다.
Google ID 서비스 클라이언트 라이브러리를 로드합니다.
선택적으로 콘텐츠 보안 정책을 설정하고
교차 출처 오프너 정책 업데이트
Google API 클라이언트 ID 가져오기
웹사이트에서 Google Identity Services를 사용 설정하려면 먼저 Google API 클라이언트 ID를 설정해야 합니다. 그러려면 다음 단계를 완료하세요.
의 을 엽니다.
프로젝트를 만들거나 선택합니다. Google 계정으로 로그인 버튼 또는 Google 원탭용 프로젝트가 이미 있는 경우 기존 프로젝트와 웹 클라이언트 ID를 사용하세요. 프로덕션 애플리케이션을 만들 때는 여러 프로젝트가 필요할 수 있습니다. 관리하는 각 프로젝트에 대해 이 섹션의 나머지 단계를 반복하세요.
클라이언트 만들기를 클릭하고 애플리케이션 유형에서 웹 애플리케이션을 선택하여 새 클라이언트 ID를 만듭니다. 기존 클라이언트 ID를 사용하려면 웹 애플리케이션 유형 중 하나를 선택합니다.
웹사이트의 URI를 승인된 JavaScript 원본에 추가합니다. URI에는 스키마와 정규화된 호스트 이름만 포함됩니다. 예를 들면 https://www.example.com입니다.
선택적으로 사용자 인증 정보는 JavaScript 콜백을 통하지 않고 호스팅하는 엔드포인트로 리디렉션을 사용하여 반환될 수 있습니다. 이 경우 리디렉션 URI를 승인된 리디렉션 URI에 추가합니다. 리디렉션 URI에는 스키마, 정규화된 호스트 이름, 경로가 포함되며 리디렉션 URI 유효성 검사 규칙을 준수해야 합니다. 예를 들면 https://www.example.com/auth-receiver입니다.
Google로 로그인과 원탭 인증에는 사용자에게 데이터 액세스를 요청하는 애플리케이션, 요청되는 데이터의 종류, 적용되는 약관을 알려주는 동의 화면이 포함되어 있습니다.
의 Google 인증 플랫폼 섹션에서 을 엽니다.
메시지가 표시되면 방금 만든 프로젝트를 선택합니다.
에서 양식을 작성하고 '저장' 버튼을 클릭합니다.
애플리케이션 이름: 동의를 요청하는 애플리케이션의 이름입니다.
이름은 애플리케이션을 정확하게 반영해야 하며 사용자가 다른 곳에서 보는 애플리케이션 이름과 일치해야 합니다.
애플리케이션 로고: 이 이미지는 사용자가 앱을 인식할 수 있도록 동의 화면에 표시됩니다. 로고는 Google로 로그인 동의 화면과 계정 설정에 표시되지만 원탭 대화상자에는 표시되지 않습니다.
지원 이메일: 사용자 지원을 위한 동의 화면과 사용자의 애플리케이션 액세스를 평가하는 Google Workspace 관리자에게 표시됩니다. 이 이메일 주소는 사용자가 애플리케이션 이름을 클릭할 때 Google로 로그인 동의 화면에 사용자에게 표시됩니다.
승인된 도메인: 나와 내 사용자를 보호하기 위해 Google에서는 OAuth를 사용하여 인증하는 애플리케이션만 승인된 도메인을 사용할 수 있도록 허용합니다. 애플리케이션의 링크는 승인된 도메인에서 호스팅되어야 합니다.
자세히 알아보기
애플리케이션 홈페이지 링크: 'Google 계정으로 로그인' 동의 화면과 '계속' 버튼 아래에 있는 원탭 GDPR 준수 면책 조항 정보에 표시됩니다. 승인된 도메인에서 호스팅해야 합니다.
애플리케이션 개인정보처리방침 링크: '다음 계정으로 계속' 버튼 아래에 있는 Google로 로그인 동의 화면 및 원탭 GDPR 준수 면책 조항 정보에 표시됩니다. 승인된 도메인에서 호스팅해야 합니다.
애플리케이션 서비스 약관 링크 (선택사항): 'Google로 로그인' 동의 화면과 '계속' 버튼 아래의 원탭 GDPR 규정 준수 면책 조항 정보에 표시됩니다. 승인된 도메인에서 호스팅해야 합니다.
로 이동하여 앱의 범위를 구성합니다.
Google API 범위: 범위를 사용하면 애플리케이션이 사용자의 비공개 데이터에 액세스할 수 있습니다. 인증에는 기본 범위 (이메일, 프로필, openid)가 충분하므로 민감한 범위를 추가하지 않아도 됩니다. 일반적으로 액세스가 필요한 시점에 미리 요청하는 대신 점진적으로 범위를 요청하는 것이 좋습니다.
'인증 상태'를 확인합니다. 애플리케이션에 인증이 필요한 경우 '인증을 위해 제출' 버튼을 클릭하여 인증을 위해 애플리케이션을 제출합니다. 자세한 내용은 OAuth 인증 요구사항을 참고하세요.
로그인 시 OAuth 설정 표시
FedCM을 사용하는 원탭
최상위 승인된 도메인은 Chrome에서 사용자 동의 중에 표시됩니다. 교차 출처이지만 동일한 사이트 iframe에서만 원탭을 사용하는 것은 지원되는 방법입니다.
FedCM이 없는 원탭
애플리케이션 이름은 사용자 동의 중에 표시됩니다.
그림 1. Chrome에서 원탭으로 표시되는 OAuth 동의 설정
클라이언트 라이브러리 로드
사용자가 로그인할 수 있는 페이지에 Google ID 서비스 클라이언트 라이브러리를 로드해야 합니다. 다음 코드 스니펫을 사용합니다.
라이브러리에서 지원하는 메서드 및 속성 목록은 HTML 및 JavaScript API 참조를 참고하세요.
콘텐츠 보안 정책
선택사항이지만 콘텐츠 보안 정책을 사용하여 앱을 보호하고 교차 사이트 스크립팅 (XSS) 공격을 방지하는 것이 좋습니다. 자세한 내용은 CSP 소개 및 CSP 및 XSS를 참고하세요.
콘텐츠 보안 정책에는 connect-src, frame-src, script-src, style-src, default-src와 같은 하나 이상의 지시어가 포함될 수 있습니다.
CSP에 다음이 포함된 경우:
connect-src 지시문에 https://accounts.google.com/gsi/를 추가하여 페이지가 Google ID 서비스 서버 측 엔드포인트의 상위 URL을 로드하도록 허용합니다.
frame-src 지시문에 https://accounts.google.com/gsi/를 추가하여 One Tap 및 Google 계정으로 로그인 버튼 iframe의 상위 URL을 허용합니다.
script-src 지시어를 사용하고 Google ID 서비스 JavaScript 라이브러리의 URL을 허용하려면 https://accounts.google.com/gsi/client를 추가합니다.
style-src 지시문에 https://accounts.google.com/gsi/style를 추가하여 Google ID 서비스 스타일시트의 URL을 허용합니다.
default-src 지시어는 사용되는 경우 앞의 지시어 (connect-src, frame-src, script-src 또는 style-src)가 지정되지 않은 경우 대체로 사용되며, https://accounts.google.com/gsi/를 추가하여 페이지가 Google ID 서비스 서버 측 엔드포인트의 상위 URL을 로드하도록 허용합니다.
connect-src를 사용하는 경우 개별 GIS URL을 나열하지 마세요. 이렇게 하면 GIS가 업데이트될 때 오류를 최소화할 수 있습니다. 예를 들어 https://accounts.google.com/gsi/status를 추가하는 대신 GIS 상위 URL https://accounts.google.com/gsi/를 사용합니다.
이 예시 응답 헤더를 사용하면 Google Identity Services가 성공적으로 로드되고 실행될 수 있습니다.
[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."]]
