Google 원탭 표시

사용자가 웹 앱에 가입하거나 로그인할 수 있도록 사이트에 원탭 메시지를 추가합니다. HTML 및 JavaScript를 사용하여 메시지를 렌더링하고 맞춤설정합니다.

기본 요건

설정에 설명된 단계에 따라 OAuth 동의 화면을 구성하고, 클라이언트 ID를 가져오고, 클라이언트 라이브러리를 로드합니다.

로그인 페이지에 Google 계정으로 로그인 버튼을 추가합니다.

프롬프트 렌더링

원탭을 표시하려는 페이지에 코드 스니펫을 배치합니다.

HTML

원탭 메시지를 표시하여 JWT 사용자 인증 정보를 로그인 엔드포인트로 반환합니다.

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-your_own_param_1_to_login="any_value"
   data-your_own_param_2_to_login="any_value">
</div>

data-login_uri 속성은 웹 앱의 로그인 엔드포인트의 URI입니다. Google에서 발급한 ID 토큰과 함께 로그인 엔드포인트로 전송되는 맞춤 데이터 속성을 추가할 수 있습니다.

지원되는 속성의 전체 목록은 g_id_onload 참조를 참고하세요.

자바스크립트

원탭 메시지를 표시하여 JWT 사용자 인증 정보를 브라우저의 JavaScript 콜백 핸들러로 반환합니다.

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: 'YOUR_CALLBACK_HANDLER'
    });
    google.accounts.id.prompt();
  }
</script>

JavaScript에서 원탭 메시지를 구성하려면 먼저 initialize() 메서드를 호출해야 합니다. 그런 다음 prompt() 메서드를 호출하여 프롬프트 UI를 표시합니다.

데이터 옵션의 전체 목록은 idConfiguration 참조를 참고하세요.

프롬프트 상태

프롬프트 UI 상태 알림을 수신하려면 prompt() 메서드에 콜백 함수를 제공합니다.

HTML

알림을 수신하려면 JavaScript 콜백 핸들러가 필요합니다.

자바스크립트

여기서 화살표 함수는 알림 업데이트를 처리하는 데 사용됩니다.

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  google.accounts.id.prompt((notification) => {
    if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
      // try next provider if OneTap is not displayed or skipped
    }
  });
}
</script>

버튼 및 프롬프트

Google 계정으로 로그인 버튼과 원탭 메시지가 한 페이지에 함께 표시될 수 있습니다.

HTML

g_id_onload 및 g_id_signin 요소를 모두 포함하여 Google 계정으로 로그인 버튼과 원탭 메시지를 모두 표시합니다.

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-context="signin"
   data-ux_mode="redirect"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-itp_support="true">
</div>

<div class="g_id_signin"
   data-type="standard"
   data-shape="rectangular"
   data-theme="outline"
   data-text="signin_with"
   data-size="large"
   data-logo_alignment="left">
</div>

자바스크립트

renderButton() 및 prompt() 함수를 동시에 호출하여 Google 계정으로 로그인 버튼과 원탭 프롬프트를 표시합니다.

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  const parent = document.getElementById('google_btn');
  google.accounts.id.renderButton(parent, {theme: "filled_blue"});
  google.accounts.id.prompt();
}
</script>

원탭을 가리지 않음

이 섹션은 FedCM이 사용 중지된 경우에만 적용됩니다. FedCM이 사용 설정된 경우 브라우저는 페이지 콘텐츠 위에 사용자 메시지를 표시합니다.

최종 사용자가 표시된 모든 정보를 볼 수 있도록 하려면 Google One Tap이 다른 콘텐츠로 가려져서는 안 됩니다. 그러지 않으면 경우에 따라 팝업 창이 트리거될 수 있습니다.

페이지 레이아웃과 요소의 z-index 속성을 다시 한번 확인하여 Google One Tap이 다른 콘텐츠로 가려지지 않도록 합니다. 테두리의 픽셀 하나만 가려져도 UX 흐름 변경이 트리거될 수 있습니다.