원탭 프롬프트 위치 변경

경고: FedCM API를 사용하기 위해 One Tap을 이전하는 경우 브라우저에서 원탭 프롬프트의 크기와 위치를 제어합니다. 맞춤 위치는 지원되지 않습니다. 새 원탭 통합의 경우 프롬프트 위치를 맞춤설정해서는 안 됩니다. 기존 통합의 경우 이전 가이드를 검토하고 필요한 경우 앱을 업데이트하세요.

목표: 기본 로그인 흐름이 요구사항을 충족하지 않는 경우 여러 방법으로 맞춤설정할 수 있습니다. 사용 가능한 맞춤설정 옵션에 관한 다음 정보를 읽어보세요.

기본적으로 원탭 메시지는 데스크톱 웹브라우저 창의 오른쪽 상단에 표시됩니다. FedCM을 사용하면 브라우저에서 프롬프트 위치를 완전히 제어합니다. 따라서 맞춤 레이아웃은 지원되지 않습니다.

그 외의 경우 컨테이너 요소 내에 원탭을 표시하여 프롬프트 위치를 변경합니다. 이렇게 하려면 data-prompt_parent_id 속성에 컨테이너 요소의 DOM ID를 지정합니다.

경고: 원탭 메시지 콘텐츠를 숨기지 마세요. 원탭 프롬프트 콘텐츠가 Google iframe에서 가져온다는 인식을 가리지 마세요. 그렇지 않으면 프로젝트가 정지되거나, 계정이 정지되거나, 두 가지 조치가 모두 취해질 수 있습니다.

다음 코드 예에서는 g_id_onload 요소를 컨테이너 요소로 재사용하고 지정된 위치에 원탭 메시지를 표시합니다.

<div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-login_uri="https://your.domain/your_login_endpoint"
     data-prompt_parent_id="g_id_onload"
     style="position: absolute; top: 100px; right: 30px;
            width: 0; height: 0; z-index: 1001;">
</div>

data-prompt_parent_id 속성은 모바일 웹브라우저에서 무시됩니다.