자동 로그인 및 로그아웃

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

사용자 자동 로그인

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

자동 로그인은 Google 계정으로 로그인 버튼과 원탭 대화상자를 보완하기 위한 것입니다. 이 기능은 사이트 전체에서 사용하도록 설계되었으며, 사용자가 사이트에서 먼저 로그아웃한 후에만 수동 가입 또는 계정 전환이 이루어집니다.

자동 로그인이 실행되려면 다음 조건이 충족되어야 합니다.

• 사용자는 먼저 Google 계정에 로그인해야 합니다.
• 이전에 자신의 계정 프로필을 앱과 공유하는 데 동의했으며
• FedCM을 사용할 때 지난 10분 동안 한 번만 로그인 시도를 했습니다. 이 기간 동안 반복적인 로그인 시도가 발생하면 원탭이 표시됩니다.
• FedCM을 사용할 때 사용자가 FedCM 출시 전에 웹사이트를 승인했더라도 Chrome에서는 사용자가 각 Chrome 인스턴스에서 Google 계정으로 웹사이트에 로그인할 것인지 다시 확인해야 합니다. 이 변경사항은 원탭을 사용하는 기존 사이트의 전환율에 영향을 미칠 수 있습니다. Chrome M121 업데이트에서 자동 로그인 개선으로 전환율 감소 문제가 완화됩니다.

자동 로그인이 사용 설정된 페이지에서 이러한 조건이 충족되면 사용자 상호작용 없이 사용자의 ID 토큰 사용자 인증 정보가 자동으로 반환됩니다. 이러한 조건이 충족되지 않으면 페이지에서 자동 로그인이 사용 설정되어 있더라도 사용자는 기본적으로 원탭 로그인 또는 동의 흐름으로 이동합니다. 사용자가 여러 Google 계정을 가지고 있고 사이트를 방문하는 경우 먼저 단일 Google 계정에 로그인하고 해당 계정에 대한 동의를 제공해야 합니다.

JavaScript 콜백(callback 또는 data-callback)에서 응답을 처리할 때 반환된 CredentialResponse 객체의 select_by 필드에 있는 auto 값을 사용하여 자동 로그인 성공률을 측정할 수 있습니다. select_by는 login_uri 또는 data-login_uri로 전송된 HTTP POST 요청에 포함되지 않습니다.

자동 로그인을 사용 설정하려면 다음 스니펫과 같이 코드에 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가 발생합니다.

<div class="g_id_signout">Sign Out</div>

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

주요 사용자 경험

자동 로그인 페이지