이 페이지에서는 사용자가 Google One Tap으로 로그인하거나 로그아웃하는 방법과 관련된 기능을 구현하는 방법을 설명합니다.
사용자 자동 로그인
Google One Tap은 자동 로그인을 지원합니다. 자동 로그인은 사용자가 사이트로 돌아올 때 취해야 하는 수동 단계를 없애 원활한 사용자 환경 (UX)을 제공합니다. 사용자는 마지막 방문 시 선택한 Google 계정을 기억할 필요가 없으므로 플랫폼에서 불필요한 중복 계정이 생성될 가능성이 줄어듭니다.
자동 로그인은 Google 계정으로 로그인 버튼과 원탭 대화상자를 보완하기 위한 것입니다. 이 API는 사용자가 사이트에서 처음 로그아웃한 후에만 수동으로 가입하거나 계정을 전환할 수 있도록 사이트 전체에서 사용할 수 있도록 설계되었습니다.
자동 로그인이 이루어지려면 다음 조건이 필요합니다.
사용자는 먼저 Google 계정에 로그인해야 합니다.
이전에 앱과 계정 프로필을 공유하는 데 동의한 적이 있으며,
FedCM을 사용하는 경우 지난 10분 동안 로그인 시도를 한 번만 시도했습니다.
이 기간 동안 로그인 시도가 반복되면 원탭이 표시됩니다.
FedCM을 사용하면 사용자가 FedCM 출시 전에 웹사이트를 승인했더라도 각 Chrome 인스턴스에서 Google 계정으로 웹사이트에 로그인할 것인지 다시 확인해야 합니다. 이 변경사항은 원탭을 사용하는 기존 사이트의 전환율에 영향을 줄 수 있습니다. Chrome M121 업데이트에서 자동 로그인 개선으로 전환율 하락 문제가 완화되었습니다.
자동 로그인이 사용 설정된 페이지에서 이러한 조건이 충족되면 사용자 상호작용 없이 사용자의 ID 토큰 사용자 인증 정보가 자동으로 반환됩니다. 이러한 조건이 충족되지 않고 페이지에서 자동 로그인이 사용 설정되어 있더라도 사용자는 기본적으로 로그인 또는 동의에 대해 원탭 흐름을 사용합니다. 사용자에게 Google 계정이 여러 개 있고 사이트를 방문하는 경우 먼저 하나의 Google 계정에 로그인하고 해당 계정에 동의해야 합니다.
반환된 사용자 인증 정보 객체의 select_by 필드에 있는 auto 값을 사용하여 자동 로그인 성공률을 측정할 수 있습니다.
자동 로그인을 사용 설정하려면 다음 스니펫과 같이 코드에 data-auto_select="true"를 추가합니다.
데드 루프 UX를 방지하기 위해 사용자 로그아웃 상태는 Google ID 서비스 라이브러리에서 설정하는 g_state라는 쿠키에 저장됩니다. 기본적으로 쿠키 도메인은 현재 페이지의 도메인으로 설정됩니다. 상위 도메인 및 하위 도메인에 원탭이 표시되는 경우 상태 쿠키가 모든 도메인에 표시되어야 합니다. data-state_cookie_domain 속성을 사용하여 g_state 쿠키 도메인을 상위 도메인으로 설정합니다. 예를 들어 example.com의 상위 도메인과 webapp.example.com라는 하위 도메인의 g_id_onload 요소에 data-state_cookie_domain="example.com"를 추가합니다.
도메인에서 사용되는 모든 쿠키를 모니터링하는 서비스가 있는 경우 g_state 쿠키를 알려야 합니다.
로그인 후 페이지에 클라이언트 라이브러리를 로드하지 않으려면 다음 솔루션을 사용하여 로그아웃 후 데드 루프 UX를 방지하세요.
로그아웃 시 사용자를 원탭이 표시되지 않거나 자동 로그인이 항상 사용 중지된 페이지 (예: https://example.com/logged_out)로 리디렉션합니다.
로그아웃 시 URL에 매개변수를 추가합니다. 예를 들면 logged_out=1입니다.
JavaScript API로 원탭을 렌더링할 때 URL 매개변수를 확인하고 자동 로그인이 있는 경우 사용 중지합니다.
주요 사용자 경험
자동 로그인 페이지
FedCM 사용
사용자는 X 버튼을 클릭하여 원탭 메시지를 닫을 수 있습니다. 접근성 고려를 위해 사용자가 X 버튼을 클릭하더라도 ID 토큰은 웹사이트와 공유됩니다.
사용자 환경을 개선하기 위해 자동 로그인 시도 간에 10분의 비활성 시간이 있습니다. 이 기간에는 원탭 메시지가 대신 표시됩니다. 사용자는 원탭을 명시적으로 클릭하여 로그인해야 합니다.
FedCM 미사용
사용자가 5초 이내에 취소 버튼을 클릭하지 않으면 ID 토큰이 웹사이트와 공유됩니다.
로그인이 취소되면 활성 Google 세션 수에 따라 계정 선택기 페이지 또는 재방문자 페이지가 표시됩니다.
[null,null,["최종 업데이트: 2025-05-23(UTC)"],[[["\u003cp\u003eGoogle One Tap enables automatic sign-in, providing a frictionless user experience by eliminating manual login steps for returning users.\u003c/p\u003e\n"],["\u003cp\u003eAutomatic sign-in works when users are signed in to their Google Account, have previously granted consent, and (for FedCM) haven't attempted sign-in within the last 10 minutes.\u003c/p\u003e\n"],["\u003cp\u003eTo enable automatic sign-in, add \u003ccode\u003edata-auto_select="true"\u003c/code\u003e to your One Tap implementation code.\u003c/p\u003e\n"],["\u003cp\u003eWhen implementing sign-out functionality, ensure auto-selection is disabled to prevent a login loop, which can be achieved by using the \u003ccode\u003eg_id_signout\u003c/code\u003e class or \u003ccode\u003egoogle.accounts.id.disableAutoSelect()\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eOne Tap sign-out (disabling automatic sign-in) is temporary and does not sign users out of your website or Google services.\u003c/p\u003e\n"]]],[],null,["# Automatic sign-in and sign-out\n\nThis page describes how to implement features related to how users sign in or\nsign out with Google One Tap.\n\nSign in users automatically\n---------------------------\n\nGoogle One Tap supports automatic sign-in, which provides a frictionless user\nexperience (UX) by removing the manual steps users must take when returning\nto your site. Users don't need to remember which Google Account they selected\nduring their last visit, decreasing the chances of unnecessary duplicate\naccounts being created on your platform.\n\nAutomatic sign-in is intended to complement our Sign in with Google button\nand One Tap dialogs. It is designed to be used across your entire site, with\nmanual sign-up or switching accounts occurring only after the user has first\nsigned-out of your site.\n\nFor Automatic sign-in to occur the following conditions are required:\n\n- users must first be signed-in to their Google Account, and\n- previously granted consent to share their account profile with your app, and\n- when using FedCM, made only a single sign-in attempt in the last 10 minutes. One Tap is displayed when repeated sign-in attempts occur during this window.\n- when using FedCM, Chrome requires users to reconfirm that they want to sign in to the website with Google Account in each Chrome instance even if the user approved the website prior to the FedCM rollout. This change may affect conversion rate on your existing site using One Tap. In Chrome M121 update, [Auto Sign-in improvement](/identity/gsi/web/reference/release-notes#2023-12-21) mitigates conversion rate drop issue.\n\nFor pages where Automatic sign-in is enabled and if these conditions are met\nthe user's ID token credential is automatically returned without any user\ninteraction. If these conditions are not met, and even if Automatic sign-in is\nenabled on the page, the user defaults to the One Tap flow for sign-in or\nconsent. If a user has multiple Google Accounts and visits your site they are\nrequired to first sign-in to a single Google Account and to have provided\nconsent for that account.\n\nYou may measure Automatic sign-in success rate using the `auto` value in the\n[select_by](/identity/gsi/web/reference/js-reference#select_by) field of the returned credential object.\n\nTo enable automatic sign-in, add `data-auto_select=\"true\"` to your code, as\nshown in the following snippet: \n\n \u003cdiv id=\"g_id_onload\"\n data-client_id=\"\u003cvar translate=\"no\"\u003eYOUR_GOOGLE_CLIENT_ID\u003c/var\u003e\"\n data-login_uri=\"\u003cvar translate=\"no\"\u003ehttps://your.domain/your_login_endpoint\u003c/var\u003e\"\n data-auto_select=\"true\"\u003e\n \u003c/div\u003e\n\n| **Note:** The [upgraded One Tap UX for ITP browsers](/identity/gsi/web/guides/features#upgraded_ux_on_itp_browsers) doesn't support auto sign-in.\n\nSign out\n--------\n\nWhen a user signs out of your website, they can be directed to a page where a\nGoogle One Tap prompt is automatically displayed. For this setup, auto-selection\nmust be prohibited. Otherwise, the user is automatically signed in again, which\nleads to a dead-loop UX. \n\n### Using FedCM\n\nTo improve user experience, there is a 10 minute quiet period between every\nautomatic sign-in attempt. During this time period, One Tap prompt is\ndisplayed instead. Users need to explicitly click One Tap to sign in.\n\n### Without FedCM\n\nTo prohibit auto-selection after a user signs out, add the class name\n`g_id_signout` to all of your logout links and buttons. See the following code\nsnippet: \n\n \u003cdiv class=\"g_id_signout\"\u003eSign Out\u003c/div\u003e\n\nThe following JavaScript code snippet can also be used for sign out: \n\n const button = document.getElementById('signout_button');\n button.onclick = () =\u003e {\n google.accounts.id.disableAutoSelect();\n }\n\nTo prevent a dead-loop UX, user signed-out status is stored in a cookie named\n`g_state` that is set by the Google Identity Services library. By default the\ncookie domain is set to the domain of current page. If One Tap is displayed\non the parent domain and subdomains, the state cookie must be visible across\nall of your domains. Use the `data-state_cookie_domain` attribute to set the\n`g_state` cookie domain to your parent domain. For example, add\n`data-state_cookie_domain=\"example.com\"` to the `g_id_onload` element for a\nparent domain of `example.com` and a subdomain named `webapp.example.com`.\n| **Key Point:** If One Tap is displayed on multiple domains, you need to set the `g_state` cookie domain to your parent domain.\n\nIf you have a service that monitors all of the cookies used in your domain,\nyou need to notify them of the `g_state` cookie.\n| **Key Point:** Feel free to use other ways to prevent the dead-loop UX on log out moment.\n\nIf you don't want to load the client library on your post-login pages, use\nthese solutions to prevent a dead-loop UX after log out occurs:\n\n- On log out, redirect users to a page (say, `https://example.com/logged_out`) where One Tap is not displayed, or where auto sign-in is always disabled.\n- On log out, add a parameter to the URL. For example, `logged_out=1`. When rendering One Tap by JavaScript API, check that URL parameter and disable auto sign-in when present.\n\n| **Warning:** The term 'sign out' here refers to temporarily disabling One Tap Automatic sign-in for one day. This API does not sign out your users out of your website or any Google websites.\n\nKey user journeys\n-----------------\n\nThe automatic sign-in page. \n\n### Using FedCM\n\nUsers can close the One Tap prompt by clicking the **X** button. For\naccessibility consideration, an ID token is shared with your website\neven if users click the **X** button.\n\nTo improve user experience, there is a 10 minute quiet period between every\nautomatic sign-in attempt. During this time period, One Tap prompt is\ndisplayed instead. Users need to explicitly click One Tap to sign in.\n\n### Without FedCM\n\nIf users don't click the **Cancel** button within 5 seconds, an ID token\nis shared with your website.\n\nWhen Sign-In is cancelled, based on the number of active Google sessions,\neither the account chooser page or the returning user page displays.\n\n- Multiple Google sessions\n\n- Single Google Sessions\n\n| **Key Point:** Once cancelled, Automatic sign-in is disabled for one day."]]
