iframe을 사용하여 원탭 통합

Google 원탭은 iframe (이하 중간 Iframe)을 사용해야 합니다. 인식 가능한 데이터가 없습니다. 중간 iframe이 사용되면 원탭 UX에서 변경됩니다.

중간 iframe 기반 통합은 다음과 같은 유연성과 위험을 야기합니다.

• 원탭 및 후속 UX 흐름을 위한 삽입된 UX.

  원탭 UX가 완료되면 후속 UX 흐름을 중간 iframe에 있습니다. 따라서 원탭과 후속 UX를 삽입해야 합니다. 다음 예를 참조하십시오.

  

  중간 iframe이 없으면 일반적으로 후속 UX 흐름을 표시하는데, 경우에 따라 방해가 될 수 있습니다.

• 한 번 통합과 모든 곳에 표시:

  모든 원탭 통합 코드 (원탭 API 호출 및 후속 UX) 처리)는 중간 iframe에 캡슐화됩니다. 콘텐츠 페이지에서는 원탭이 표시될 수도 있는데, 중간에 삽입하기만 하면 있습니다.

  이 아키텍처를 사용하면 관심사를 분리할 수 있으므로 통합 및 유지보수 비용을 줄일 수 있습니다

• ID 토큰 노출 범위를 제한합니다.

  ID 토큰은 중간 iframe에서 직접 사용됩니다. 그들은 광고가 게재되지 않습니다. 이 아키텍처는 ID 토큰 노출 범위를 줄입니다

  중간 iframe 방식은 로그인 관련 전용 하위 도메인 (예: login.example.com)과 콘텐츠 관련 하위 도메인 (예:sports.example.com 및 games.example.com)을 포함할 수 없습니다.

• 원탭 표시 도메인.

  Google의 OAuth 정책에서 요구하는 대로 OAuth를 수신하는 모든 도메인은 Google Cloud 콘솔에서 사전 등록해야 합니다. 일반 One 탭 통합으로 개발자는 원탭이 지원되는 모든 도메인을 사전 등록해야 합니다. 이 도메인에 ID 토큰이 다시 전달되므로 표시될 수 있습니다. 다소 유용함 웹사이트를 사용하면 사용자가 동적으로 하위 도메인을 만들 수 있는데, 사전 등록이 불가능했습니다. 따라서 원탭을 동적으로 생성된 하위 도메인입니다.

  이 문제는 중간 iframe을 사용하여 해결할 수 있습니다. 이 경우 중간 iframe의 도메인만 사전 등록하면 됩니다. 거기 콘텐츠 페이지 도메인을 등록할 필요가 없습니다. ID 토큰은 노출됩니다.

• 개인 정보 보호 위험.

  개발자는 중간 iframe이 콘텐츠를 볼 수 있습니다. 예를 들어 악성.com에 사용자의 중간 iframe을 허용하여 해당 웹사이트에 원탭 UX를 표시합니다. 이 최종 사용자의 개인 정보 보호 문제를 많이 일으킵니다.

• 보안 위험.

  위에서 언급한 예상치 못한 프레이밍 문제로 인해 iframe에서 보안 또는 개인 정보 보호에 민감한 정보를 상위 요소에 전송해서는 안 됩니다. 사용자 데이터 등과 같은 주요 프레임으로 구성됩니다. 웹사이트를 위험에 빠뜨릴 수 있습니다.

중간 iframe에서 원탭 렌더링

중간 iframe 내에 원탭을 표시하려면 다음 코드를 삽입합니다. 스니펫을 중간 iframe의 HTML 코드에 삽입합니다.

<div id="g_id_onload"
     data-client_id="YOUR_GOOGLE_CLIENT_ID"
     data-login_uri="https://your.domain/your_login_endpoint"
     data-allowed_parent_origin="https://example.com">
</div>

data-allowed_parent_origin 속성을 사용하면 Google One Tap이 중간 iframe 모드에서 표시될 수 있습니다. 하나의 도메인만 설정하거나 쉼표로 구분된 속성 값으로 사용합니다. 와일드 카드 하위 도메인도 지원됩니다.

(선택사항) 중간 iframe에서 후속 UX 렌더링

로그인 응답에서는 일부 HTML 코드를 반환할 수 있습니다. 이 코드는 최종 사용자에게 표시되는 콘텐츠를 말합니다. 예를 들어 추가 프로필 정보를 요청하면 동의하지 않을 수 있습니다 페이지를 제출한 후에는 추가 페이지를 표시할 수 있습니다. 결제 또는 구독을 예로 들 수 있습니다.

다음과 같이 중간 iframe 크기를 조절할 수 있습니다.

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentResize(320);
</script>

요약하면 중간 iframe을 사용하면 전체 로그인 또는 가입 UX 흐름에서 내장 UX로 구현됩니다.

원탭 UX 후 첫 페이지의 경우 notifyParentResize()를 호출해야 합니다. 메서드를 두 번 사용할 수 있습니다.

1. 원탭 UX가 완료되면 중간 iframe이 숨김으로 설정됩니다.

2. 숨겨진 요소의 offsetHeight 속성 값은 0입니다.

첫 번째 호출에서는 iframe 높이를 1픽셀로 조정하여 표시됩니다. 그런 다음 offsetHeight 속성 값을 사용할 수 있게 되면 적당한 높이로 크기를 조절합니다.

다음 코드 예는 상위 원점을 확인하고 크기를 조절하는 방법을 보여줍니다. 원탭 UX 후 UI용 중간 iframe

<script>
window.onload = () => {
  google.accounts.id.intermediate.verifyParentOrigin(
    ["https://example.com","https://example-com.cdn.ampproject.org"],
    () => {
      google.accounts.id.intermediate.notifyParentResize(1);
      window.setTimeout(() => {
        let h = document.getElementById('container').offsetHeight;
        google.accounts.id.intermediate.notifyParentResize(h);
      }, 200);
    },
    () => {
      document.getElementById('container').style.display = 'none';
      document.getElementById('warning').innerText = 'Warning: the page is displayed in an unexpected domain!';
    }
  );
};
</script>

완료된 UX에서 중간 iframe 제거

다음과 같은 경우 중간 iframe을 삭제하도록 상위 콘텐츠 페이지에 알려야 합니다. UX 흐름이 완료됩니다. 이를 위해 다음 코드 스니펫을 로그인 응답 코드입니다.

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>
<script>
  google.accounts.id.intermediate.notifyParentDone();
</script>

UX 흐름을 건너뛰면 notifyParentClose 메서드를 호출해야 합니다. 하세요.

HTML 페이지에 중간 iframe 삽입

Google One Tap을 삽입하려는 HTML 페이지에 다음 코드 스니펫을 삽입합니다. 다음을 표시합니다.

<script src="https://accounts.google.com/gsi/intermediate"></script>
<div id="g_id_intermediate_iframe"
     data-src="https://example.com/onetap_iframe.html">
</div>

data-src 속성은 중간 iframe의 URI입니다.