이 페이지에서는 사용자가 Google 원탭으로 로그인하거나 로그아웃하는 방식과 관련된 기능을 구현하는 방법을 설명합니다.
사용자 자동 로그인
Google One Tap은 자동 로그인을 지원하므로 사용자가 사이트로 돌아올 때 거쳐야 하는 수동 단계를 삭제하여 원활한 사용자 환경 (UX)을 제공합니다. 사용자가 마지막 방문 시 선택한 Google 계정을 기억할 필요가 없으므로 플랫폼에서 불필요한 중복 계정이 생성될 가능성이 줄어듭니다.
자동 로그인은 Google 계정으로 로그인 버튼 및 원탭 대화상자를 보완하기 위한 것입니다. 사용자가 사이트에서 처음 로그아웃한 후에만 수동 가입 또는 계정 전환이 발생하도록 전체 사이트에서 사용하도록 설계되었습니다.
자동 로그인이 발생하려면 다음 조건이 필요합니다.
- 사용자가 먼저 Google 계정에 로그인해야 합니다.
- 이전에 앱과 계정 프로필을 공유하는 데 동의한 사용자
- FedCM을 사용하는 경우 지난 10분 동안 한 번만 로그인 시도를 했습니다. 이 기간 동안 반복적으로 로그인 시도가 발생하면 원탭이 표시됩니다.
- FedCM을 사용하는 경우 사용자가 FedCM 출시 전에 웹사이트를 승인했더라도 Chrome에서는 각 Chrome 인스턴스에서 Google 계정으로 웹사이트에 로그인할 것인지 다시 확인하도록 요구합니다. 이 변경사항은 원탭을 사용하는 기존 사이트의 전환율에 영향을 미칠 수 있습니다. Chrome M121 업데이트에서 자동 로그인 개선사항을 통해 전환율 감소 문제가 완화됩니다.
자동 로그인이 사용 설정된 페이지에서 이러한 조건이 충족되면 사용자 상호작용 없이 사용자의 ID 토큰 사용자 인증 정보가 자동으로 반환됩니다. 이러한 조건을 충족하지 않으면 페이지에서 자동 로그인이 사용 설정되어 있더라도 사용자는 로그인 또는 동의를 위해 원탭 흐름으로 기본 설정됩니다. 사용자에게 Google 계정이 여러 개 있는 경우 사이트를 방문할 때 먼저 하나의 Google 계정에 로그인하고 해당 계정에 대한 동의를 제공해야 합니다.
반환된 사용자 인증 정보 객체의 select_by 필드에 있는 auto 값을 사용하여 자동 로그인 성공률을 측정할 수 있습니다.
자동 로그인 기능을 사용 설정하려면 다음 스니펫에 표시된 대로 코드에 data-auto_select="true"를 추가합니다.
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-auto_select="true">
</div>
로그아웃
사용자가 웹사이트에서 로그아웃하면 Google 원탭 메시지가 자동으로 표시되는 페이지로 리디렉션될 수 있습니다. 이 설정에서는 자동 선택이 금지되어야 합니다. 그렇지 않으면 사용자가 자동으로 다시 로그인되어 데드루프 UX가 발생합니다.
FedCM 사용
사용자 환경을 개선하기 위해 자동 로그인 시도 사이에는 10분의 무음 기간이 있습니다. 이 기간에는 원탭 메시지가 대신 표시됩니다. 사용자는 원탭을 명시적으로 클릭하여 로그인해야 합니다.
FedCM 미사용
사용자가 로그아웃한 후 자동 선택을 금지하려면 모든 로그아웃 링크와 버튼에 g_id_signout 클래스 이름을 추가하세요. 다음 코드 스니펫을 참고하세요.
<div class="g_id_signout">Sign Out</div>
다음 JavaScript 코드 스니펫을 로그아웃에도 사용할 수 있습니다.
const button = document.getElementById('signout_button');
button.onclick = () => {
google.accounts.id.disableAutoSelect();
}
데드루프 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 세션 수에 따라 계정 선택기 페이지 또는 재방문 사용자 페이지가 표시됩니다.
- 여러 Google 세션
- 단일 Google 세션
