중급 Iframe 지원 JavaScript API

이 참조 페이지에서는 후속 UX에서 중간 iframe을 조작할 수 있는 중급 Iframe 지원 JavaScript API에 대해 설명합니다.

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

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

방법
verifyParentOrigin 상위 출처 확인을 수행할 때
notifyParentClose 원탭 UX 흐름을 건너뛰도록 상위 프레임에 알림
notifyParentDone 원탭 UX 흐름이 완료되었음을 상위 프레임에 알림
notifyParentResize 상위 프레임에 중간 iframe의 크기를 조절하도록 알립니다.
notifyParentTapOutsideMode 사용자가 중간 iframe 외부를 클릭할 때 중간 iframe 취소 여부를 상위 프레임에 알립니다.

중간 Iframe 지원 자바스크립트 라이브러리 로드

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

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

메서드: google.accounts.id.middle.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을 삽입할 수 있을 때 트리거되는 자바스크립트 콜백 메서드입니다.
verificationFailedCallback 현재 상위 출처에서 중간 iframe 삽입이 허용되지 않을 때 트리거된 자바스크립트 콜백 메서드

출처

중간 iframe 삽입이 허용되는 출처입니다. 자세한 내용은 다음 표를 참고하세요.

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

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

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

validationCallback(확인된 콜백)

이 필드는 현재 상위 출처에서 중간 iframe을 삽입할 수 있을 때 트리거되는 자바스크립트 콜백 메서드입니다.

VerificationFailedCallback(인증 실패 콜백)

이 필드는 현재 상위 출처에서 중간 iframe 삽입이 허용되지 않을 때 트리거되는 자바스크립트 콜백 메서드입니다.

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

google.accounts.id.intermediate.notifyParentClose 메서드는 원탭 UX 흐름을 건너뛸 때 상위 프레임에 중간 iframe을 닫도록 알립니다. 메서드의 다음 코드 예를 참고하세요.

google.accounts.id.intermediate.notifyParentClose()

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

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

google.accounts.id.intermediate.notifyParentDone()

메서드: google.accounts.id.바꿉니다.

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

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

높이

픽셀 단위의 새 높이입니다. 필수 필드입니다. 값은 음수가 아니어야 합니다.

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

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

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

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

취소

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