중간 iframe 지원 JavaScript API 참조

이 참조 페이지에서는 후속 UX에서 중간 iframe을 조작하기 위해 원탭에서 사용하는 중간 iframe 지원 JavaScript API를 설명합니다.

중간 iframe을 사용하는 방법은 iframe을 사용하여 원탭 통합 가이드를 참고하세요.

다음 표에는 사용 가능한 모든 메서드와 그 동작이 나와 있습니다.

메서드
verifyParentOrigin 상위 원본 확인을 실행합니다.
notifyParentClose 원탭 UX 흐름이 건너뛰었음을 상위 프레임에 알립니다.
notifyParentDone 상위 프레임에 원탭 UX 흐름이 완료되었음을 알립니다.
notifyParentResize 중간 iframe의 크기를 조정하도록 상위 프레임에 알립니다.
notifyParentTapOutsideMode 사용자가 중간 iframe 외부를 클릭할 때 중간 iframe을 취소할지 여부를 상위 프레임에 알립니다.

중간 iframe 지원 JavaScript 라이브러리 로드

중간 iframe을 로드하려는 HTML 페이지에 다음 코드 스니펫을 배치합니다.

<script src="https://accounts.google.com/gsi/intermediatesupport"></script>

메서드: google.accounts.id.intermediate.verifyParentOrigin

google.accounts.id.intermediate.verifyParentOrigin 메서드는 상위 출처 확인을 실행합니다. 다음은 메서드의 코드 예입니다.

google.accounts.id.intermediate.verifyParentOrigin(
    origins, verifiedCallback, verificationFailedCallback)

다음 코드 예는 상위 출처가 확인된 후에만 UI를 표시하는 방법을 보여줍니다.

<script>
  window.onload = () => {
    google.accounts.id.intermediate.verifyParentOrigin(
        "https://example.com", showUI, showError);
  };
</script>

다음 표에는 매개변수가 나와 있습니다.

매개변수
origins 중간 iframe을 삽입할 수 있는 출처입니다.
verifiedCallback 현재 상위 원본이 중간 iframe을 삽입할 수 있을 때 트리거되는 JavaScript 콜백 메서드입니다.
verificationFailedCallback 현재 상위 출처가 중간 iframe을 삽입할 수 없는 경우 트리거되는 JavaScript 콜백 메서드입니다.

origins

중간 iframe을 삽입할 수 있는 출처입니다. 자세한 내용은 다음 표를 참고하세요.

유형 필수 예
문자열, 문자열 배열 또는 함수 선택사항 allowed_parent_origin: "https://example.com"

다음 표에는 지원되는 값 유형과 설명이 나와 있습니다.

값 유형
string 단일 도메인 URI입니다. 'https://example.com'
string array 도메인 URI 배열입니다. "https://news.example.com,https://local.example.com"

verifiedCallback

이 필드는 현재 상위 출처가 중간 iframe을 삽입할 수 있을 때 트리거되는 JavaScript 콜백 메서드입니다.

verificationFailedCallback

이 필드는 현재 상위 출처가 중간 iframe을 삽입할 수 없는 경우 트리거되는 JavaScript 콜백 메서드입니다.

메서드: google.accounts.id.intermediate.notifyParentClose

google.accounts.id.intermediate.notifyParentClose 메서드는 원탭 UX 흐름이 건너뛰어질 때 상위 프레임에 중간 iframe을 닫도록 알립니다. 다음은 메서드의 코드 예입니다.

google.accounts.id.intermediate.notifyParentClose()

메서드: google.accounts.id.intermediate.notifyParentDone

google.accounts.id.intermediate.notifyParentClose 메서드는 상위 프레임에 중간 iframe을 닫고 로그인 상태를 새로고침하도록 알립니다. 다음은 메서드의 코드 예입니다.

google.accounts.id.intermediate.notifyParentDone()

메서드: google.accounts.id.intermediate.notifyParentResize

google.accounts.id.intermediate.notifyParentResize 메서드는 중간 iframe의 크기를 조절하도록 상위 프레임에 알립니다. 다음은 메서드의 코드 예입니다.

google.accounts.id.intermediate.notifyParentResize(height)

높이

새 높이(픽셀)입니다. 필수 입력란입니다. 값은 음수가 아닌 숫자여야 합니다.

높이 매개변수가 0보다 큰 경우 중간 iframe이 새 높이로 설정됩니다. 높이 매개변수가 0이면 중간 iframe이 표시되지 않습니다. 숨겨진 iframe이 닫히지 않습니다. 나중에 다른 크기 조절 메서드 호출로 표시할 수 있습니다.

메서드: google.accounts.id.intermediate.notifyParentTapOutsideMode

google.accounts.id.intermediate.notifyParentTapOutsideMode 메서드는 사용자가 중간 iframe 외부를 클릭할 때 중간 iframe을 취소할지 여부를 상위 프레임에 알립니다. 다음은 메서드의 코드 예입니다.

google.accounts.id.intermediate.notifyParentTapOutsideMode(cancel)

취소

이 필수 불리언 값은 사용자가 중간 iframe 외부를 클릭할 때 중간 iframe을 취소할지 여부를 나타냅니다.