Google 계정으로 로그인 기능

Google 계정으로 로그인의 주요 기능은 다음과 같습니다. 코드 생성기를 사용하여 원탭, 자동 로그인, Google 계정으로 로그인 버튼을 웹페이지에 삽입하는 코드를 생성할 수 있습니다.

전 세계 사용자는 FedCM을 지원하는 브라우저에서 서드 파티 로그인을 선택 해제할 수 있습니다. 사용자가 선택 해제하면 원탭 및 자동 로그인을 사용할 수 없으며 표시되지 않습니다.

원탭

사용자가 웹사이트를 방문할 때 브라우저에 활성 Google 세션이 있으면 'Google 계정으로 로그인'이 사용자에게 Google 계정으로 웹사이트에 로그인하거나 가입하라는 메시지를 표시할 수 있습니다. 사용자는 탭 한 번 (Google 세션 케이스 1회) 또는 탭 두 번 (Google 세션이 여러 개 있는 경우)으로 제휴 로그인 또는 가입 과정을 완료할 수 있습니다. 모든 UX 흐름이 웹페이지에 삽입된 iframe에서 실행되므로 원탭 UX를 사용하면 원활한 사용자 진입점이 가능합니다.

동의 및 사용자 로그인을 요청하는 원탭 팝업

사용자는 원탭 전체에 대해 선택 해제할 수 있습니다. 이 경우 Google 계정에는 원탭이 표시되지 않습니다. 모든 활성 Google 계정을 선택 해제하면 원탭 UI가 표시되지 않습니다.

기본 로그인 대화상자와 리프 페이지 모두에 원탭을 두는 것이 좋습니다. 개발자는 다음과 같은 여러 가지 이유로 원탭을 선호합니다.

  • 사용자 전환율 증가 우수사례에서 Google 파트너가 원탭을 사용하여 가입 및 로그인 환경을 개선한 방법을 자세히 알아보세요.
  • 사용자를 전용 로그인 및 가입 페이지로 리디렉션하지 않고도 로그인 및 가입할 수 있습니다
  • 사용자가 현재 여정에서 벗어날 필요 없이 웹사이트의 컨텍스트에서 로그인하고 가입할 수 있습니다.
  • 재방문 시 맞춤설정된 메시지 및 자동 로그인을 통해 중복 계정 방지

자동 로그인

원탭을 사용하면 취소 가능한 자동 로그인을 사용 설정하여 재사용자에게 간소화된 UX를 제공할 수도 있습니다. 재방문 사용자가 웹사이트에 자동으로 로그인하기 위해 사용자 동작이 필요하지 않습니다. 자동 로그인은 이전에 계정 프로필을 앱과 공유하도록 동의한 활성 Google 계정이 하나만 있을 때 트리거됩니다.

사용자는 일정 기간 동안 자동 로그인 프로세스를 취소할 수 있으므로 사용자 제어 및 투명성이 보장됩니다. 사용자가 자동 로그인을 취소하면 Google 계정으로 로그인에서 이 결정을 하루 동안 기억한 후 자동 로그인을 다시 사용 설정합니다. 취소 가능한 기능을 사용하면 사용자가 자동 로그인 프로세스를 더 세부적으로 제어할 수 있습니다.

FedCM이 사용 설정되면 자동 로그인 이벤트 사이에 10분의 대기 기간이 적용됩니다. 이 시간 동안 자동 로그인이 트리거되면 사용자는 자동 로그인 과정 대신 원탭 로그인 과정을 따릅니다.

웹용 Google 계정으로 로그인은 자동 로그인을 지원하지 않으며 이 경우 UI가 표시되지 않고 사용자 인증 정보가 반환됩니다. 로그인 사용자 인증 정보가 Google에서 신뢰 당사자로 반환될 때 최종 사용자에게 항상 일부 UI, 수동 또는 자동 로그인이 표시됩니다. 이를 통해 사용자 개인 정보 보호 및 제어 기능이 개선됩니다.

자동 로그인 팝업

자동 로그인 사용 설정 여부는 웹사이트의 UX에 따라 결정해야 합니다.

Google 계정으로 로그인 버튼

원탭과 달리 Google 계정으로 로그인 버튼 흐름은 사용자 동작에 의해 트리거되어야 합니다. 이를 위해 Google 계정으로 로그인은 버튼을 렌더링하는 API만 제공하며 프로그래매틱 방식으로 버튼 흐름을 시작하는 API는 제공하지 않습니다. 개발자는 웹페이지에서 Google 계정으로 로그인 버튼을 렌더링하기만 하면 됩니다. 버튼 UX 흐름을 트리거하는 시점은 라이브러리에서 투명하게 처리됩니다.

맞춤설정되지 않은 로그인 버튼

즉, Google 계정으로 로그인 버튼은 이제 Google ID 서비스 JavaScript 라이브러리에서 생성되어야 합니다. 버튼 렌더링 API를 사용하면 Google의 가이드라인을 준수하면서 웹사이트의 브랜드 요구사항에 맞게 색상, 모양, 텍스트, 크기를 맞춤설정할 수 있습니다. 여러 웹사이트에서 일관된 버튼을 사용하면 사용자가 이러한 버튼을 빠르게 인식하고 신뢰하며 사용할 수 있습니다.

사용자 프로필 정보는 버튼을 렌더링하는 데 사용될 수도 있습니다. 맞춤설정된 버튼은 이전에 웹사이트에서 사용자를 인증한 활성 Google 세션이 하나 이상 있는 경우에만 표시됩니다. 맞춤설정된 버튼을 사용하면 최종 사용자에게 이전에 Google 계정으로 로그인을 사용한 적이 있음을 알려 웹사이트에서 불필요한 중복 계정 생성을 방지할 수 있습니다. 이 방법은 웹사이트를 가끔 방문하는 최종 사용자에게 특히 유용합니다. 사용한 로그인 방법을 잊어버릴 수 있습니다.

맞춤설정된 로그인 버튼

Google 계정으로 로그인 버튼 흐름은 팝업 및 리디렉션 UX 모드를 지원합니다.

  • 팝업 UX에서 Google 계정으로 로그인 버튼을 클릭하면 웹페이지 상단에 새 팝업 창이 열립니다. 버튼 UX 흐름이 팝업 창에 렌더링됩니다.
  • 리디렉션 UX에서는 Google 계정으로 로그인 버튼을 클릭하면 전체 페이지 리디렉션이 발생합니다. 버튼 UX 흐름이 동일한 창에서 렌더링됩니다. 하지만 버튼 UX가 표시되면 사용자가 더 이상 웹페이지를 볼 수 없습니다.

ID 토큰 공유에 대한 사용자 동의는 취소될 수 있습니다. Google 계정으로 로그인은 프로그래매틱 방식으로 사용자 동의를 취소하는 API를 제공합니다.

Google Identity Services Authorization API의 revoke() 메서드와 달리 사용자 동의를 취소하기 위해 액세스 토큰이 필요하지 않습니다. 하지만 대상 Google 세션의 이메일 주소 또는 Google 사용자 ID를 제공해야 하며, 브라우저에 해당 계정을 위한 활성 Google 세션이 있어야 합니다.

취소 API는 이전에 부여된 경우 ID 토큰 공유 및 기타 승인 범위를 취소합니다. 이는 어떤 취소 API를 사용하든 항상 적용됩니다.

코드 생성기

코드 생성기는 클라이언트 측 통합 코드를 생성하는 데 도움이 되는 개발자 도구입니다. Google 계정으로 로그인 HTML API를 사용하면 클라이언트 측 통합을 위한 자바스크립트 코드가 필요하지 않을 수 있습니다.

코드 생성기 1단계: 설정

JavaScript API를 사용하는 개발자는 코드 생성기를 사용하여 대화형으로 버튼을 디자인하는 것이 좋습니다. 먼저 HTML 코드를 생성한 다음 코드를 JavaScript API의 해당 필드에 복사할 수도 있습니다.