Chrome 서드 파티 쿠키 지원 중단이 2024년 1분기에 시작됩니다. 이전 가이드에 따라 잠재적인 변경사항을 검토하고 사용자가 웹사이트에 로그인할 때 부정적인 영향을 받지 않도록 하세요.

이 페이지는 Cloud Translation API를 통해 번역되었습니다.

자동 로그인 및 로그아웃

이 페이지에서는 사용자가 Google 원탭으로 로그인하거나 로그아웃하는 방법과 관련된 기능을 구현하는 방법을 설명합니다.

Google 원탭은 자동 로그인을 지원하므로 방문자가 사이트로 돌아올 때 수동으로 거쳐야 하는 단계를 없애 원활한 사용자 환경 (UX)을 제공합니다. 사용자가 마지막 방문 시 선택한 Google 계정을 기억할 필요가 없으므로 플랫폼에서 불필요한 중복 계정이 생성될 가능성이 줄어듭니다.

자동 로그인은 Google 계정으로 로그인 버튼과 원탭 대화상자를 보완하기 위한 것입니다. 이 기능은 전체 사이트에서 사용하도록 고안되었으며 수동 가입이나 계정 전환은 사용자가 사이트에서 처음 로그아웃한 후에만 발생합니다.

자동 로그인이 실행되려면 다음 조건이 필요합니다.

사용자는 먼저 Google 계정에 로그인해야 합니다.
계정 프로필을 앱과 공유하는 데 동의함
최근 10분 동안 로그인 시도가 1회밖에 되지 않았습니다. 이 창에서 로그인 시도가 반복되면 원탭이 표시됩니다.

자동 로그인이 사용 설정된 페이지의 경우 이러한 조건이 충족되면 사용자 상호작용 없이 방문자 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>

로그아웃에도 다음 자바스크립트 코드 스니펫을 사용할 수 있습니다.

const button = document.getElementById('signout_button');
button.onclick = () => {
  google.accounts.id.disableAutoSelect();
}

따라서 로그아웃 상태가 도메인의 쿠키를 통해 기록되므로 데드 루프 UX가 방지됩니다.

로그아웃 상태는 도메인의 g_state 쿠키에 저장됩니다. 도메인에서 사용되는 모든 쿠키를 모니터링하는 서비스를 보유하고 있다면 이 쿠키를 서비스에 알려야 합니다.

로그인 후 페이지에 클라이언트 라이브러리를 로드하지 않으려면 다음 솔루션을 사용하여 로그아웃 후 데드 루프 UX를 방지하세요.

로그아웃 시 원탭이 표시되지 않거나 자동 로그인이 항상 사용 중지된 페이지 (예: https://example.com/logged_out)로 사용자를 리디렉션합니다.
로그아웃 시 URL에 매개변수를 추가합니다. 예를 들면 logged_out=1입니다. JavaScript API를 통한 One Tap을 렌더링할 때 이 URL 매개변수를 확인하고 매개변수가 있는 경우 자동 로그인을 사용 중지합니다.